angular-auth-oidc-client

Angular Lib for OpenID Connect & OAuth2

OpenID Code Flow with PKCE, Code Flow with refresh tokens, OpenID Connect Implicit Flow

OpenID Certification

This library is certified by OpenID Foundation. (RP Implicit and Config RP)

Features

• Supports OpenID Connect Code Flow with PKCE
• Supports Code Flow PKCE with Refresh tokens
• Supports Revocation Endpoint
• Support for current best practice
• Implements OIDC validation as specified, complete client side validation for REQUIRED features
• Supports OpenID Connect Implicit Flow
• OpenID Connect Session Management 1.0
• Samples for most of the common use cases

Installation

Navigate to the level of your package.json and type

 npm install angular-auth-oidc-client

or with yarn

 yarn add angular-auth-oidc-client

Documentation

• Quickstart
• Samples
• Silent renew
• Guards
• Features
• Logout
• Using and revoking the access token
• CSP & CORS
• Public API
• Configuration
• Migration
• Changelog

Quickstart

For the example of the Code Flow. For further examples please check the Samples Section

Import the module and services in your module.

import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AuthModule, LogLevel, OidcConfigService } from 'angular-auth-oidc-client';
// ...

export function configureAuth(oidcConfigService: OidcConfigService) {
    return () =>
        oidcConfigService.withConfig({
            stsServer: 'https://offeringsolutions-sts.azurewebsites.net',
            redirectUrl: window.location.origin,
            postLogoutRedirectUri: window.location.origin,
            clientId: 'angularClient',
            scope: 'openid profile email',
            responseType: 'code',
            silentRenew: true,
            silentRenewUrl: `${window.location.origin}/silent-renew.html`,
            logLevel: LogLevel.Debug,
        });
}

@NgModule({
    // ...
    imports: [
        // ...
        AuthModule.forRoot(),
    ],
    providers: [
        OidcConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: configureAuth,
            deps: [OidcConfigService],
            multi: true,
        },
    ],
    // ...
})
export class AppModule {}

And call the method checkAuth() from your app.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { OidcClientNotification, OidcSecurityService, PublicConfiguration } from 'angular-auth-oidc-client';
import { Observable } from 'rxjs';

@Component({
    /**/
})
export class AppComponent implements OnInit {
    constructor(public oidcSecurityService: OidcSecurityService) {}

    ngOnInit() {
        this.oidcSecurityService.checkAuth().subscribe((auth) => console.log('is authenticated', auth));
    }

    login() {
        this.oidcSecurityService.authorize();
    }

    logout() {
        this.oidcSecurityService.logoff();
    }
}

Using the access token

You can get the access token by calling the method getToken() on the OidcSecurityService

const token = this.oidcSecurityService.getToken();

And then you can use it in the HttpHeaders

import { HttpHeaders } from '@angular/common/http';

const token = this.oidcSecurityServices.getToken();

const httpOptions = {
    headers: new HttpHeaders({
        Authorization: 'Bearer ' + token,
    }),
};

License

MIT

Version 10

if you need information about version 10 please search here

https://github.com/damienbod/angular-auth-oidc-client/tree/version-10

Changelog

2020-05-24 Version 11.1.2

• Added support to check the secure token server for an authenticated session if not locally logged in (iframe silent renew)
  • PR // Fixes #744
• fix config bug with eager loading of the well known endpoints
  • PR
• prevent routing in silent renew requests with iframes
• return tokens direct in forceRefreshSession