Angular Lib for OpenID Connect & OAuth2

Secure your Angular app using the latest standards for OpenID Connect & OAuth2. Provides support for token refresh, all modern OIDC Identity Providers and more.

Implemented specs & features

The following client/RP features from OpenID Connect/OAuth2.0 specifications are implemented by openid-client.

• OpenID Connect Core 1.0
  • Authorization Callback
    • Authorization Code Flow
  • UserInfo Request
  • Offline Access / Refresh Token Grant
  • Client Credentials Grant
  • Client Authentication
    • none
    • client_secret_basic
    • client_secret_post
    • client_secret_jwt
    • private_key_jwt
  • Consuming Self-Issued OpenID Provider ID Token response
• OpenID Connect Discovery 1.0
  • Discovery of OpenID Provider (Issuer) Metadata
  • Discovery of OpenID Provider (Issuer) Metadata via user provided inputs (via webfinger)
• OpenID Connect Dynamic Client Registration 1.0
  • Dynamic Client Registration request
  • Client initialization via registration client uri
• RFC7009 - OAuth 2.0 Token revocation
  • Client Authenticated request to token revocation
• RFC7662 - OAuth 2.0 Token introspection
  • Client Authenticated request to token introspection
• RFC8628 - OAuth 2.0 Device Authorization Grant (Device Flow)
• RFC8705 - OAuth 2.0 Mutual TLS Client Authentication and Certificate-Bound Access Tokens
  • Mutual TLS Client Certificate-Bound Access Tokens
  • Metadata for Mutual TLS Endpoint Aliases
  • Client Authentication
    • tls_client_auth
    • self_signed_tls_client_auth
• RFC9101 - OAuth 2.0 JWT-Secured Authorization Request (JAR)
• RFC9126 - OAuth 2.0 Pushed Authorization Requests (PAR)
• OpenID Connect RP-Initiated Logout 1.0
• Financial-grade API Security Profile 1.0 - Part 2: Advanced (FAPI)
• JWT Secured Authorization Response Mode for OAuth 2.0 (JARM) - ID1
• OAuth 2.0 Demonstration of Proof-of-Possession at the Application Layer (DPoP) - draft 04
• OAuth 2.0 Authorization Server Issuer Identification - draft-04

Updates to draft specifications (DPoP, JARM, etc) are released as MINOR library versions, if you utilize these specification implementations consider using the tilde ~ operator in your package.json since breaking changes may be introduced as part of these version updates.

Certification

This library has certified that openid-client conforms to the following profiles of the OpenID Connect™ protocol

• Basic, Implicit, Hybrid, Config, Dynamic, and Form Post RP
• FAPI 1.0 Advanced RP

Features

• Code samples for most of the common use cases
• Supports schematics via ng add support
• Supports all modern OIDC identity providers
• Supports OpenID Connect Code Flow with PKCE
• Supports Code Flow PKCE with Refresh tokens
• Supports OpenID Connect Implicit Flow
• Supports OpenID Connect Session Management 1.0
• Supports RFC7009 - OAuth 2.0 Token Revocation
• Supports RFC7636 - Proof Key for Code Exchange (PKCE)
• Supports OAuth 2.0 Pushed authorisation requests (PAR) draft
• Semantic releases
• Github actions
• Modern coding guidelines with prettier, husky
• Up to date documentation
• Implements OIDC validation as specified, complete client side validation for REQUIRED features
• Supports authentication using redirect or popup

Installation

Npm / Yarn

Navigate to the level of your package.json and type

 npm i @glamtime/oauth-oidc-client

or with yarn

 yarn add @glamtime/oauth-oidc-client

Configuration

Import the AuthModule in your module.

import {NgModule} from '@angular/core';
import {OAuthModule} from '@glamtime/oauth-oidc-client';

// ...

@NgModule({
  // ...
  imports: [
    // ...
    OAuthModule.forRoot({
      issuer: '<your authority address here>',
      clientId: '<your clientId>',
      clientSecret: '<your clientSecret>'
    }),
  ],
  // ...
})
export class AppModule {
}

And call the method checkAuth() from your app.component.ts. The method checkAuth() is needed to process the redirect from your Security Token Service and set the correct states. This method must be used to ensure the correct functioning of the library.

import {Component, OnInit} from '@angular/core';
import {OAuthService} from '@glamtime/oauth-oidc-client';

@Component({
  /*...*/
})
export class AppComponent implements OnInit {
  constructor(public authService: OAuthService) {
  }

  ngOnInit() {
    oauthService.checkAuth().subscribe();
  }

  onLogin() {
    this.oauthService.login().subscribe();
  }

  onLogout() {
    this.oauthService.logout().subscribe();
  }
}

Http Interceptor

The HttpClient allows you to implement HTTP interceptors to tap into requests and responses. A common use case would be to intercept any outgoing HTTP request and add an authorization header.

Note: Do not send the access token with requests for which the access token is not intended!

You can configure the resource servers that you want to send a token with in the configuration:

OAuthModule.forRoot({
  config: {
    // ...
    resourceServers: ['https://my-secure-url.com/', 'https://my-second-secure-url.com/'],
  },
}),

The lib provides an own interceptor implementation which you can register like any other HTTP interceptor: and use the interceptor the lib provides you

import {OAuthInterceptor, OAuthModule} from 'angular-auth-oidc-client';

@NgModule({
  // ...
  imports: [
    // ...
    OAuthModule.forRoot(),
    HttpClientModule,
  ],
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: OAuthInterceptor, multi: true},
    // ...
  ],
})
export class AppModule {
}

If you configured a route to be protected, every child route underneath is protected, too. So if you configure https://example.org/api the token is also added to a request to the route https://example.org/api/users.

In case you are running multiple configurations all the configured routes over all configurations are collected and compared against the currently requested route. If a match is made, the token for the configuration you added the secure route to is being taken and applied in the Authorization header.

Keep in mind that you always can implement your own interceptor as described in the Angular documentation.