Changing the oidc lib and now it works a bit

package-lock.json

@@ -2457,9 +2457,9 @@
       }
     },
     "acorn": {
-      "version": "6.4.0",
+      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-      "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
     "adm-zip": {
@@ -2516,6 +2516,16 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-auth-oidc-client": {
+      "version": "10.0.15",
+      "resolved": "https://registry.npmjs.org/angular-auth-oidc-client/-/angular-auth-oidc-client-10.0.15.tgz",
+      "integrity": "sha512-DrYlR4TrnZX+Xr+Vnh1GlkiTmi7LDBnijEkW2NNgLfPp0D6T9ETtl4b2LgcGywLnpNRDBtaX7nOPY1GYL82bZw==",
+      "requires": {
+        "common-tags": "1.8.0",
+        "jsrsasign-reduced": "8.0.12",
+        "tslib": "^1.9.0"
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -2895,7 +2905,8 @@
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
-      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
+      "integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==",
+      "dev": true
     },
     "batch": {
       "version": "0.6.1",
@@ -3515,6 +3526,11 @@
       "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
       "dev": true
     },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
+    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -3843,11 +3859,6 @@
         "randomfill": "^1.0.3"
       }
     },
-    "crypto-js": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
-      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
-    },
     "css-parse": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
@@ -5999,6 +6010,11 @@
         "verror": "1.10.0"
       }
     },
+    "jsrsasign-reduced": {
+      "version": "8.0.12",
+      "resolved": "https://registry.npmjs.org/jsrsasign-reduced/-/jsrsasign-reduced-8.0.12.tgz",
+      "integrity": "sha512-owXLbv0thS4LoG2kIIOVFPbvqWrS3v/QjdOgdFl4CP/OkHOU4S4YzgVDRtBBI7bID0foZ7qisbCvPX3pWvpNlQ=="
+    },
     "jszip": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.2.2.tgz",
@@ -6027,9 +6043,9 @@
       "dev": true
     },
     "kind-of": {
-      "version": "6.0.2",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
     "lcid": {
@@ -6997,24 +7013,6 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
-    "oidc-client": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/oidc-client/-/oidc-client-1.10.1.tgz",
-      "integrity": "sha512-/QB5Nl7c9GmT9ir1E+OVY3+yZZnuk7Qa9ZEAJqSvDq0bAyAU9KAgeKipTEfKjGdGLTeOLy9FRWuNpULMkfZydQ==",
-      "requires": {
-        "base64-js": "^1.3.0",
-        "core-js": "^2.6.4",
-        "crypto-js": "^3.1.9-1",
-        "uuid": "^3.3.2"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.11",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
-        }
-      }
-    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -9799,7 +9797,8 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "dev": true
     },
     "validate-npm-package-license": {
       "version": "3.0.4",

package.json

@@ -19,12 +19,12 @@
     "@angular/platform-browser": "^8.2.14",
     "@angular/platform-browser-dynamic": "^8.2.14",
     "@angular/router": "^8.2.14",
+    "angular-auth-oidc-client": "^10.0.15",
     "bootstrap": "^4.4.1",
     "detect-browser": "^4.8.0",
     "hammerjs": "^2.0.8",
     "hls.js": "^0.12.4",
     "jquery": "^3.4.1",
-    "oidc-client": "^1.10.1",
     "popper.js": "^1.16.1",
     "zone.js": "~0.9.1"
   },

src/app/app-routing.module.ts

@@ -13,7 +13,6 @@ import { ShowResolverService } from './services/show-resolver.service';
 import { StreamResolverService } from "./services/stream-resolver.service";
 import { ShowDetailsComponent } from './show-details/show-details.component';
 import {LoginComponent} from "./login/login.component";
-import {LoggedComponent} from "./logged/logged.component";
 
 const routes: Routes = [
 	{ path: "browse", component: BrowseComponent, pathMatch: "full", resolve: { shows: LibraryResolverService } },
@@ -24,7 +23,6 @@ const routes: Routes = [
 	{ path: "watch/:item", component: PlayerComponent, resolve: { item: StreamResolverService } },
 	{ path: "search/:query", component: SearchComponent, resolve: { items: SearchResolverService } },
 	{ path: "login", component: LoginComponent },
-	{ path: "logged", component: LoggedComponent },
 	{ path: "**", component: NotFoundComponent }
 ];
 

src/app/app.component.html

@@ -20,19 +20,19 @@
 					<mat-icon matTooltipPosition="below" matTooltip="Search" (click)="openSearch()">search</mat-icon>
 				</li>
 				<li class="nav-item" *ngIf="!isLoggedIn(); else accountDrop">
-					<a class="icon" (click)="login()" matTooltipPosition="below" matTooltip="Login">
+					<a class="icon" (click)="this.authManager.login()" matTooltipPosition="below" matTooltip="Login">
 						<mat-icon>account_circle</mat-icon>
 					</a>
 				</li>
 				<ng-template #accountDrop>
 					<li class="nav-item">
-						<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="icon" matTooltipPosition="below" [matTooltip]="authManager.user.profile.name">
+						<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="icon" matTooltipPosition="below" [matTooltip]="authManager.user.name">
 							<mat-icon>more_vert</mat-icon>
 						</button>
 					</li>
 					<mat-menu #accountMenu="matMenu">
 						<button mat-menu-item>Settings</button>
-						<button mat-menu-item>Logout</button>
+						<button mat-menu-item (click)="this.authManager.logout()">Logout</button>
 					</mat-menu>
 				</ng-template>
 			</ul>

src/app/app.component.ts

@@ -70,12 +70,7 @@ export class AppComponent
 	
 	isLoggedIn(): boolean
 	{
-		return this.authManager.isLoggedIn();
+		return this.authManager.isAuthenticated;
-	}
-	
-	login()
-	{
-		this.authManager.login();
 	}
 }
 

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import {APP_INITIALIZER, NgModule} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
@@ -30,7 +30,18 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import {MatTabsModule} from "@angular/material/tabs";
 import {PasswordValidator} from "./misc/password-validator";
 import {MatCheckboxModule} from "@angular/material/checkbox";
-import { LoggedComponent } from './logged/logged.component';
+import {
+	AuthModule,
+	ConfigResult,
+	OidcConfigService,
+	OidcSecurityService,
+	OpenIdConfiguration
+} from "angular-auth-oidc-client";
+
+export function loadConfig(oidcConfigService: OidcConfigService)
+{
+	return () => oidcConfigService.load_using_stsServer(window.location.origin);
+}
 
 @NgModule({
 	declarations: [
@@ -45,8 +56,7 @@ import { LoggedComponent } from './logged/logged.component';
 		PeopleListComponent,
 		ShowsListComponent,
 		LoginComponent,
-		PasswordValidator,
+		PasswordValidator
-		LoggedComponent
 	],
 	imports: [
 		BrowserModule,
@@ -68,9 +78,42 @@ import { LoggedComponent } from './logged/logged.component';
 		MatFormFieldModule,
 		FormsModule,
 		MatTabsModule,
-		MatCheckboxModule
+		MatCheckboxModule,
+		AuthModule.forRoot()
 	],
-	providers: [],
+	providers: [
+		OidcConfigService,
+		{
+			provide: APP_INITIALIZER,
+			useFactory: loadConfig,
+			deps: [OidcConfigService],
+			multi: true
+		},],
 	bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule 
+{
+	constructor(private oidcSecurityService: OidcSecurityService, private oidcConfigService: OidcConfigService)
+	{
+		this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) =>
+		{
+			const config: OpenIdConfiguration = {
+				stsServer: configResult.customConfig.stsServer,
+				redirect_url: "/",
+				client_id: 'kyoo.webapp',
+				response_type: "code",
+				scope: "openid profile kyoo.read offline_access",
+				silent_renew: true,
+				silent_renew_url: "/silent",
+				use_refresh_token: true,
+
+				forbidden_route: '/Forbidden',
+				unauthorized_route: '/Unauthorized',
+				log_console_warning_active: true,
+				log_console_debug_active: true
+			};
+			
+			this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
+		});
+	}
+}

src/app/logged/logged.component.html

@@ -1 +0,0 @@
-<p>logged works!</p>

src/app/logged/logged.component.ts

@@ -1,21 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {AuthService} from "../services/auth.service";
-import {Router} from "@angular/router";
-
-@Component({
-	selector: 'app-logged',
-	templateUrl: './logged.component.html',
-	styleUrls: ['./logged.component.scss']
-})
-export class LoggedComponent implements OnInit 
-{
-	constructor(private authManager: AuthService, private router: Router) { }
-
-	ngOnInit() 
-	{
-		this.authManager.loginCallback().then(result => 
-		{
-		//	this.router.navigateByUrl("");
-		});
-	}
-}

src/app/login/login.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import {AuthService} from "../services/auth.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {catchError} from "rxjs/operators";
 import {EMPTY} from "rxjs";

src/app/services/auth.service.ts

@@ -1,63 +1,47 @@
 import { Injectable } from '@angular/core';
-import {UserManager, UserManagerSettings, User, Profile} from 'oidc-client';
+import {OidcSecurityService} from "angular-auth-oidc-client";
 
 @Injectable({
 	providedIn: 'root'
 })
 export class AuthService 
 {
-	user: User | null;
+	isAuthenticated: boolean;
-	private _userManager = new UserManager(this.getClientSettings());
+	user: any;
 	
-	constructor()
+	constructor(public oidcSecurityService: OidcSecurityService)
 	{
-		this._userManager.getUser().then(user => 
+		if (this.oidcSecurityService.moduleSetup)
-		{
+			this.authorizeCallback();
-			this.user = user;
-			if (user)
-				console.log("Logged in as: " + user.profile.name + " Access token: " + user.access_token);
 		else 
-				console.log("Not logged in.");
+			this.oidcSecurityService.onModuleSetup.subscribe(() => 
+			{
+				this.authorizeCallback();
 			});
-	}
 
-	isLoggedIn(): boolean 
+		this.oidcSecurityService.getIsAuthorized().subscribe(auth => 
 		{
-		return this.user != null && !this.user.expired;
+			this.isAuthenticated = auth;
-	}
+		});
 
-	getClaims(): Profile 
+		this.oidcSecurityService.getUserData().subscribe(userData => 
 		{
-		return this.user.profile;
+			this.user = userData;
+		});
 	}
 
 	login()
 	{
-		if (!this.user)
+		this.oidcSecurityService.authorize();
-			return this._userManager.signinRedirect();
-		console.log("Already logged in");
-		return;
 	}
 
-	loginCallback()
+	logout() 
 	{
-		return this._userManager.signinCallback().then(user => 
+		this.oidcSecurityService.logoff();
-		{
-			this.user = user;
-			console.log("Logged in!");
-		});
 	}
 
-	getClientSettings(): UserManagerSettings 
+	private authorizeCallback() 
 	{
-		return {
+		this.oidcSecurityService.authorizedCallbackWithCode(window.location.toString());
-			authority: window.location.origin,
-			client_id: "kyoo.webapp",
-			redirect_uri: "/logged",
-			silent_redirect_uri: "/silent",
-			response_type: "code",
-			scope: "openid profile kyoo.read offline_access",
-			automaticSilentRenew: true
-		};
 	}
 }

src/assets/silent.html

@@ -1,12 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 	<head>
-		<meta charset="UTF-8">
+		<base href="./" />
-		<title>Silent renew</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Silent Renew</title>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 	</head>
 	<body>
 		<script>
-			new window.Oidc.UserManager().signinSilentCallback();
+		    window.onload = function() {
+		        /* The parent window hosts the Angular application */
+		        var parent = window.parent;
+		        /* Send the id_token information to the oidc message handler */
+		        var event = new CustomEvent('oidc-silent-renew-message', { detail: window.location });
+		        parent.dispatchEvent(event);
+		    };
 		</script>
 	</body>
 </html>