Skip to main content

Quickstart

Installation​

You can either use the schematics with ng add or install the lib and add the needed files manually.

ng Add​

You can use the schematics and ng add the library.

ng add angular-auth-oidc-client

Step through the wizard and select the appropriate configuration options for you environment. Once the wizard is complete, a module will be created to encapsulate your OIDC configuration. Many of the configured values are placeholders and will need to be adjusted for your individual use case. Once you've confirmed your configuration, the library is ready to use.

Npm / Yarn / pnpm​

Navigate to the level of your package.json and type

npm install angular-auth-oidc-client

After installing the library you can get started with the lib like below.

Using a local configuration​

Standalone​

Use the provideAuth function to configure the library.

import { ApplicationConfig } from '@angular/core';
import { provideAuth, LogLevel } from 'angular-auth-oidc-client';
// ...

export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      config: {
        authority: '<your authority address here>',
        redirectUrl: window.location.origin,
        postLogoutRedirectUri: window.location.origin,
        clientId: '<your clientId>',
        scope: 'openid profile email offline_access',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        logLevel: LogLevel.Debug,
      },
    }),
    // ...
  ],
};

NgModule​

Import the module and services in your module.

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

@NgModule({
  // ...
  imports: [
    // ...
    AuthModule.forRoot({
      config: {
        authority: '<your authority address here>',
        redirectUrl: window.location.origin,
        postLogoutRedirectUri: window.location.origin,
        clientId: '<your clientId>',
        scope: 'openid profile email offline_access',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        logLevel: LogLevel.Debug,
      },
    }),
  ],
  // ...
})
export class AppModule {}

Login and Logout​

Make sure the login is checked at the beginning of your app (for example in the app.component.ts). The OidcSecurityService provides everything you need to login/logout your users.

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

@Component({
  /* ... */
})
export class AppComponent implements OnInit {
  private readonly oidcSecurityService = inject(OidcSecurityService);

  ngOnInit() {
    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData}) => /* ... */);
  }

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

  logout() {
    this.oidcSecurityService.logoff().subscribe((result) => console.log(result));
  }
}