Skip to main content

Version 10 to 11

App module simple#

Old#

export function loadConfig(oidcConfigService: OidcConfigService) {
return () => oidcConfigService.load_using_stsServer('https://localhost:44318');
}
@NgModule({
imports: [
HttpClientModule,
AuthModule.forRoot(),
// ...
],
declarations: [AppComponent],
providers: [
OidcConfigService,
{
provide: APP_INITIALIZER,
useFactory: configureAuth,
deps: [OidcConfigService, HttpClient],
multi: true,
},
Configuration,
],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(private oidcSecurityService: OidcSecurityService, private oidcConfigService: OidcConfigService) {
this.oidcConfigService.onConfigurationLoaded.subscribe((configResult: ConfigResult) => {
const config: OpenIdConfiguration = {
stsServer: 'https://localhost:44318',
redirect_url: 'https://localhost:44395',
client_id: 'angularclient2',
response_type: 'code',
scope: 'dataEventRecords openid profile email',
post_logout_redirect_uri: 'https://localhost:44395/unauthorized',
start_checksession: false,
silent_renew: true,
silent_renew_url: 'https://localhost:44395/silent-renew.html',
post_login_route: '/dm',
forbidden_route: '/unauthorized',
unauthorized_route: '/unauthorized',
log_console_warning_active: true,
log_console_debug_active: false,
max_id_token_iat_offset_allowed_in_seconds: 10,
history_cleanup_off: true,
// iss_validation_off: false
// disable_iat_offset_validation: true
};
this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
});
}
}

New#

// imports
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
export function configureAuth(oidcConfigService: OidcConfigService) {
return () =>
oidcConfigService.withConfig({
stsServer: 'https://localhost:44318',
redirectUrl: window.location.origin,
postLogoutRedirectUri: 'https://localhost:44395/unauthorized',
clientId: 'angularclient2',
scope: 'dataEventRecords openid profile email',
responseType: 'code',
silentRenew: true,
silentRenewUrl: `${window.location.origin}/silent-renew.html`,
renewTimeBeforeTokenExpiresInSeconds: 10,
logLevel: LogLevel.Debug,
postLoginRoute: '/dm',
forbiddenRoute: '/unauthorized',
unauthorizedRoute: '/unauthorized',
historyCleanupOff: true,
});
}
@NgModule({
imports: [AuthModule.forRoot()],
// declarations, etc.
providers: [
OidcConfigService,
{
provide: APP_INITIALIZER,
useFactory: configureAuth,
deps: [OidcConfigService],
multi: true,
},
],
})
export class AppModule {}

App module (when loading config from an http endpoint)#

Old#

// imports
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AuthModule, OidcConfigService, ConfigResult, OpenIdConfiguration } from 'angular-auth-oidc-client';
export function loadConfig(oidcConfigService: OidcConfigService) {
return () => oidcConfigService.load(`${window.location.origin}/api/ClientAppSettings`);
}
@NgModule({
imports: [
HttpClientModule,
AuthModule.forRoot(),
//...
],
declarations: [AppComponent],
providers: [
OidcSecurityService,
OidcConfigService,
{
provide: APP_INITIALIZER,
useFactory: loadConfig,
deps: [OidcConfigService],
multi: true,
},
Configuration,
],
bootstrap: [AppComponent],
})
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: configResult.customConfig.redirect_url,
client_id: configResult.customConfig.client_id,
response_type: configResult.customConfig.response_type,
scope: configResult.customConfig.scope,
post_logout_redirect_uri: configResult.customConfig.post_logout_redirect_uri,
start_checksession: configResult.customConfig.start_checksession,
silent_renew: configResult.customConfig.silent_renew,
silent_renew_url: 'https://localhost:44311/silent-renew.html',
post_login_route: configResult.customConfig.startup_route,
forbidden_route: configResult.customConfig.forbidden_route,
unauthorized_route: configResult.customConfig.unauthorized_route,
log_console_warning_active: configResult.customConfig.log_console_warning_active,
log_console_debug_active: configResult.customConfig.log_console_debug_active,
max_id_token_iat_offset_allowed_in_seconds: configResult.customConfig.max_id_token_iat_offset_allowed_in_seconds,
history_cleanup_off: true,
// iss_validation_off: false
// disable_iat_offset_validation: true
};
this.oidcSecurityService.setupModule(config, configResult.authWellknownEndpoints);
});
}
}

New#

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { AuthModule, OidcConfigService } from 'angular-auth-oidc-client';
import { map, switchMap } from 'rxjs/operators';
export function configureAuth(oidcConfigService: OidcConfigService, httpClient: HttpClient) {
const setupAction$ = httpClient.get<any>(`${window.location.origin}/api/ClientAppSettings`).pipe(
map((customConfig) => {
return {
stsServer: customConfig.stsServer,
redirectUrl: customConfig.redirect_url,
clientId: customConfig.client_id,
responseType: customConfig.response_type,
scope: customConfig.scope,
postLogoutRedirectUri: customConfig.post_logout_redirect_uri,
startCheckSession: customConfig.start_checksession,
silentRenew: true,
silentRenewUrl: customConfig.redirect_url + '/silent-renew.html',
postLoginRoute: customConfig.startup_route,
forbiddenRoute: customConfig.forbidden_route,
unauthorizedRoute: customConfig.unauthorized_route,
logLevel: 0, // LogLevel.Debug, // customConfig.logLevel
maxIdTokenIatOffsetAllowedInSeconds: customConfig.max_id_token_iat_offset_allowed_in_seconds,
historyCleanupOff: true,
};
}),
switchMap((config) => oidcConfigService.withConfig(config))
);
return () => setupAction$.toPromise();
}
@NgModule({
imports: [
HttpClientModule,
AuthModule.forRoot(),
// ...
],
// ...
providers: [
OidcConfigService,
{
provide: APP_INITIALIZER,
useFactory: configureAuth,
deps: [OidcConfigService, HttpClient],
multi: true,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}

App Component#

Old#

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { OidcSecurityService } from 'angular-auth-oidc-client';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
isAuthorizedSubscription: Subscription | undefined;
isAuthorized = false;
constructor(public oidcSecurityService: OidcSecurityService) {
if (this.oidcSecurityService.moduleSetup) {
this.doCallbackLogicIfRequired();
} else {
this.oidcSecurityService.onModuleSetup.subscribe(() => {
this.doCallbackLogicIfRequired();
});
}
}
ngOnInit() {
this.isAuthorizedSubscription = this.oidcSecurityService.getIsAuthorized().subscribe((isAuthorized: boolean) => {
this.isAuthorized = isAuthorized;
});
}
ngOnDestroy(): void {
if (this.isAuthorizedSubscription) {
this.isAuthorizedSubscription.unsubscribe();
}
}
private doCallbackLogicIfRequired() {
// Will do a callback, if the url has a code and state parameter.
this.oidcSecurityService.authorizedCallbackWithCode(window.location.toString());
}
}

New#

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { OidcSecurityService } from 'angular-auth-oidc-client';
@Component({
selector: 'app-component',
templateUrl: 'app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
isAuthenticated$: Observable<boolean>;
constructor(public oidcSecurityService: OidcSecurityService) {}
ngOnInit() {
this.isAuthenticated$ = this.oidcSecurityService.isAuthenticated$;
this.oidcSecurityService.checkAuth().subscribe((isAuthenticated) => console.log('app authenticated', isAuthenticated));
}
}

isAuthenticated#

Old#

this.oidcSecurityService.getIsAuthorized().subscribe((isAuthenticated: boolean) => {
// work with `isAuthenticated`
});

New#

this.oidcSecurityService.isAuthenticated$.subscribe((isAuthenticated: boolean) => {
// work with `isAuthenticated`
});

User data#

Old#

this.oidcSecurityService.getUserData().subscribe((userData: any) => {
// work with `userData`
});

New#

this.oidcSecurityService.userData$.subscribe((userData: any) => {
// work with `userData`
});