Skip to content

Example of integration of OIDC Client for Oauth2 with CoreUI Angular version

Notifications You must be signed in to change notification settings

GiskardB/coreui-angular-oidc-client

Repository files navigation

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:

Use Case

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.

About

Example of integration of OIDC Client for Oauth2 with CoreUI Angular version

Topics

Resources

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published