OIDC Client integration with Coreui angular demo

This is an example of how to integrate the angular-auth-oidc-client library with CoreUI Template for Angular version using Code Flow Authentication.

Usage

This repository has been started from clone the CoreUI Template for Angular version. To use the repository:

1. Clone this repository
2. Run npm install to get the dependencies
3. Create an OpenID Connect App (for example on Okta ) and setting clientId and statsServer on enviroment.ts
4. Run ng serve --open to get it running on http://localhost:4200
5. Login on page of your Identity server

Example

The application is supposed to look somewhat like this:

How to integrate OIDC Client

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:

1. statsServer: URL of Oauth Identity server
2. 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.