angular-oauth2-oidc-codeflow-pkce

angular-oauth2-oidc-codeflow-pkce is an OAuth2 and OpenId Connect (OIDC) client for Angular. The library is a Github fork of manfredsteyer/angular-oauth2-oidc. The code of this library is found at bipiane/angular-oauth2-oidc.

The fork extends the existing library so it do also support:

• Authorization Code Grant flow

Installing

npm i angular-oauth2-oidc-codeflow-pkce --save

Importing the NgModule

import { OAuthModule } from 'angular-oauth2-oidc-codeflow-pkce';
[...]

@NgModule({
  imports: [ 
    [...]
    HttpModule,
    OAuthModule.forRoot()
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    [...]
  ],
  bootstrap: [
    AppComponent 
  ]
})
export class AppModule {
}

Configuring for Code Grant Flow

To configure the library the following sample uses the new configuration API introduced with Version 2.1. Hence, The original API is still supported.

import { AuthConfig } from 'angular-oauth2-oidc-codeflow-pkce';

export const authConfig: AuthConfig = {

  // Url of the Identity Provider
  issuer: 'https://steyer-identity-server.azurewebsites.net/identity',

  // URL of the SPA to redirect the user to after login
  redirectUri: window.location.origin + '/index.html',

  // The SPA's id. The SPA is registerd with this id at the auth-server
  clientId: 'spa-demo',

  // set the scope for the permissions the client should request
  // The first three are defined by OIDC. The 4th is a usecase-specific one
  scope: 'openid profile email voucher',
}

Configure the OAuthService with this config object when the application starts up:

import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';
import { Component } from '@angular/core';

@Component({
    selector: 'flight-app',
    templateUrl: './app.component.html'
})
export class AppComponent
{
    constructor(private oauthService: OAuthService) {
      this.configureWithNewConfigApi();
    }

    private configureWithNewConfigApi() {
      this.oauthService.configure(authConfig);
      this.oauthService.tokenValidationHandler = new JwksValidationHandler();
       
      this.oauthService.loadDiscoveryDocumentAndTryLogin().then(_ => {
        console.log("Logged in");
      }).catch(err => {
        console.log("Unable to login");
      })
      
      
      // Call this.oauthService.tryLogin() if discovery document is not used.
      // All configurations must be set manually.
    }
}

To initialize the login login flow, make a button call 'initAuthorizationCodeFlow()':

this.oauthService.initAuthorizationCodeFlow();