angular-auth-oidc-client

21.0.1 verified Sat Apr 25 auth: no javascript

Angular library for OpenID Connect and OAuth2 authentication. Version 21.0.1 supports Angular 20+. Certified by OpenID Foundation, implements Code Flow with PKCE, Implicit Flow, Session Management, Token Revocation, and Pushed Authorisation Requests. Ships TypeScript types and supports schematics via ng add. Active development with frequent releases following Angular versions. Differentiator: full OIDC certification and comprehensive Angular integration including guards, interceptors, and session management.

Common errors

error TypeError: Cannot read properties of undefined (reading 'authorize') ↓

cause AuthService not properly injected, possibly due to missing AuthModule.forRoot.

fix

Ensure AuthModule.forRoot() is imported in your AppModule.

error Error: Configuration 'your-config-id' not found. ↓

cause Providing a configId in authorize() that does not match any configuration.

fix

Check the configId parameter matches the one defined in AuthModule.forRoot().

error Error: The issuer is not valid (strict issuer validation). ↓

cause OIDC well-known endpoint returns an issuer mismatch.

fix

Set strictWellKnownIssuerValidation: false in config or correct the authority URL.

error ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'access_token') ↓

cause AuthResult not handled correctly; access_token may be undefined if authentication failed.

fix

Check the isAuthenticated flag in AuthResult before accessing token properties.

Warnings

breaking Since v20.0.0, strict issuer validation is enabled by default. This may break connections to OIDC providers with mismatched issuer. ↓

fix Set config.strictWellKnownIssuerValidation = false if your IDP is misconfigured.

breaking OidcSecurityService is deprecated since v20.0.0 and scheduled for removal. ↓

fix Use AuthService instead.

deprecated AuthResult type was missing in v20.0.0 export. Re-exported in v20.0.1. ↓

fix Upgrade to v20.0.1 or later.

gotcha The library uses sessionStorage by default unless configured otherwise. Clearing browser storage may log users out unexpectedly. ↓

fix Use config.storage = localStorage if needed, or implement custom storage.

gotcha If you disable PKCE with disablePkce=true, but the IDP requires PKCE, authentication will fail. ↓

fix Enable PKCE (default) unless your IDP does not support it.

gotcha Silent renew iframe may not work in some browsers due to third-party cookie restrictions. ↓

fix Consider using popup or refresh token flow instead.

Install

npm install angular-auth-oidc-client

yarn add angular-auth-oidc-client

pnpm add angular-auth-oidc-client

Imports

AuthModule

wrong

import AuthModule from 'angular-auth-oidc-client'

correct

import { AuthModule } from 'angular-auth-oidc-client'

Named export. ForRoot configuration required.

OidcConfiguration

wrong

import { OidcConfig } from 'angular-auth-oidc-client'

correct

import { OidcConfiguration } from 'angular-auth-oidc-client'

Type for configuration object.

AuthService

wrong

import { AuthService } from 'angular-auth-oidc-client/src/auth.service'

correct

import { AuthService } from 'angular-auth-oidc-client'

Main service for authentication operations.

LogLevel

import { LogLevel } from 'angular-auth-oidc-client'

Enum for log level configuration.

OidcSecurityService

wrong

import { OidcSecurityService } from 'angular-auth-oidc-client/src/oidc-security.service'

correct

import { OidcSecurityService } from 'angular-auth-oidc-client'

Deprecated alias for AuthService since v20.

AuthResult

wrong

import { AuthResult } from 'angular-auth-oidc-client/auth-helper'

correct

import { AuthResult } from 'angular-auth-oidc-client'

Type for authentication result. Exported since v20.0.1.

Quickstart

Shows basic configuration of AuthModule with forRoot and a simple login button in a component.

import { NgModule } from '@angular/core';
import { AuthModule, LogLevel } from 'angular-auth-oidc-client';

@NgModule({
  imports: [
    AuthModule.forRoot({
      config: {
        authority: 'https://your-identity-server.com',
        redirectUrl: window.location.origin + '/callback',
        clientId: 'your-client-id',
        scope: 'openid profile email offline_access',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        logLevel: LogLevel.Debug,
        secureRoutes: ['/api', '/protected'],
      },
    }),
  ],
  providers: [],
})
export class AppModule {};

// In component:
import { Component } from '@angular/core';
import { AuthService } from 'angular-auth-oidc-client';

@Component({ selector: 'app-root', template: '<button (click)="login()">Login</button>' })
export class AppComponent {
  constructor(private authService: AuthService) {}

  login(): void {
    this.authService.authorize();
  }
}