This is an example of how to integrate the angular-auth-oidc-client
library with CoreUI Template for Angular version using Code Flow Authentication.
This repository has been started from clone the CoreUI Template for Angular version. To use the repository:
- Clone this repository
- Run
npm install
to get the dependencies - Create an OpenID Connect App (for example on Okta ) and setting clientId and statsServer on enviroment.ts
- Run
ng serve --open
to get it running on http://localhost:4200 - Login on page of your Identity server
The application is supposed to look somewhat like this:
Install the library angular-auth-oidc-client
npm install angular-auth-oidc-client --save
Initialize the library at startup of application modifing and adding some configurations in app.module.ts:
import { AuthModule, LogLevel, OidcConfigService } from 'angular-auth-oidc-client';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { environment } from '../environments/environment';
...
export function configureAuth(oidcConfigService: OidcConfigService) {
return () => {
oidcConfigService.withConfig({
stsServer: environment.stsServer,
redirectUrl: window.location.origin,
clientId: environment.clientId,
scope: 'openid profile email',
responseType: 'code',
triggerAuthorizationResultEvent: true,
postLogoutRedirectUri: `${window.location.origin}/#/login`,
startCheckSession: false,
silentRenew: true,
silentRenewUrl: `${window.location.origin}/silent-renew.html`,
postLoginRoute: '/',
forbiddenRoute: '/forbidden',
unauthorizedRoute: '/unauthorized',
logLevel: LogLevel.Debug,
historyCleanupOff: true,
autoUserinfo: true
});
}
}
...
@NgModule({
imports: [
...
AuthModule.forRoot()
],
For configure the parameters of oidc-client use the official guide OIDC Client
Add import to app.component.ts and modify the app.component.ts to redirect to login page if the user is not authenticated.
import { OidcSecurityService } from 'angular-auth-oidc-client';
...
export class AppComponent implements OnInit {
...
ngOnInit() {
...
//Check if user is authenticate otherwise redirect to login page
this.oidcSecurityService.checkAuth().subscribe((isAuthenticated) => {
if (!isAuthenticated) {
if ('/login' !== window.location.pathname) {
this.write('redirect', window.location.pathname);
this.router.navigate(['/login']);
}
}
if (isAuthenticated) {
this.navigateToStoredEndpoint();
}
});
}
private navigateToStoredEndpoint() {
const path = this.read('redirect');
if (this.router.url === path) {
return;
}
if (path.toString().includes('/unauthorized')) {
this.router.navigate(['/']);
} else {
this.router.navigate([path]);
}
}
private read(key: string): any {
const data = localStorage.getItem(key);
if (data) {
return JSON.parse(data);
}
return;
}
private write(key: string, value: any): void {
localStorage.setItem(key, JSON.stringify(value));
}
}
For redirect to the Identity server login page you can add Login component (see folder app/views/login) to app.routing.ts and on app.module.ts
import { LoginComponent } from './views/login/login.component';
...
declarations: [
...
LoginComponent,
...
],
Add the page silent-renew.html in folder src, for silent renew token and, setting the values of enviroment.ts or enviroment.prod.ts for the identity server:
- statsServer: URL of Oauth Identity server
- clientId: Client id for Identity server
In this example the user information will be shown in dashboard.component.ts and in the default-layout.component.ts will show the logout function.