Signals in Angular Auth OIDC Client

Modified June 24, 2024

Tim Deschryver

timdeschryver.dev

Version 18 of the Angular Auth OIDC Client (angular-auth-oidc-client) library adds Signal support to access the authenticated state and user data. This makes it simpler to use authentication state and user data in Angular applications compared to the Observables' implementation.

authenticated link

The authenticated property wraps the isAuthenticated$ Observable with a Signal that holds the authenticated state of a user's session. You can use this signal to check if the user is authenticated, and it returns object containing AuthenticatedResult:

 content_paste
export interface AuthenticatedResult {
  isAuthenticated: boolean;
  allConfigsAuthenticated: ConfigAuthenticatedResult[];
}
 
export interface ConfigAuthenticatedResult {
  configId: string;
  isAuthenticated: boolean;
}

To use the authenticated Signal, inject the OidcSecurityService and optionally assign the signal to a property. Then, you can use the property in the template or within the component as a Signal, as is shown in the following example:

 app.component.ts content_paste
import { OidcSecurityService } from 'angular-auth-oidc-client';
 
@Component({
  template: `
    @if (authenticated().isAuthenticated) {
      <p>You are authenticated</p>
    } @else {
      <p>You are not authenticated</p>
    }
 
    <button (click)="logAuthenticatedState()">Log authenticated state</button>
  `,
})
export class AppComponent {
  private readonly oidcSecurityService = inject(OidcSecurityService);
  // Signal containing the authenticated state
  protected readonly authenticated = this.oidcSecurityService.authenticated;
 
  protected logAuthenticatedState() {
    console.log('Is authenticated:', this.authenticated().isAuthenticated);
    console.log(this.authenticated());
  }
}

userData link

userData is the Signal implementation of the userData$ Observable. Accessing the signal returns the UserDataResult object:

 content_paste
export interface UserDataResult {
  userData: any;
  allUserData: ConfigUserDataResult[];
}
 
export interface ConfigUserDataResult {
  configId: string;
  userData: any;
}

You can use this to read the user data in your Angular application. Just like the authenticated Signal, inject the OidcSecurityService and optionally assign the userData Signal to a property to use it in the template or within the component.

 app.component.ts content_paste
import { OidcSecurityService } from 'angular-auth-oidc-client';
 
@Component({
  template: `
    <div>👋 Hello {{ oidcSecurityService.userData().userData?.name }}</div>
 
    <button (click)="logUserData()">Log user data</button>
  `,
})
export class AppComponent {
  private readonly oidcSecurityService = inject(OidcSecurityService);
 
  protected logUser() {
    console.log(this.oidcSecurityService.userData());
  }
}

Example link

The authenticated and userData Signals in the angular-auth-oidc-client library make it easier to use authentication state and user data in Angular applications.

 content_paste
import { OidcSecurityService } from 'angular-auth-oidc-client';
 
@Component({
  selector: 'app-root',
  template: `
    <button (click)="log()">Log state</button>
 
    @if (authenticated().isAuthenticated) {
      <pre>{{ userData() | json }}</pre>
    } @else {
      <div>You are not authenticated.</div>
    }
  `,
})
export class AppComponent {
  private readonly oidcSecurityService = inject(OidcSecurityService);
  // Signal containing authenticated state
  protected readonly authenticated = this.oidcSecurityService.authenticated;
  // Signal containing user data
  protected readonly userData = this.oidcSecurityService.userData;
 
  log() {
    console.log({ authenticated: this.authenticated(), userData: this.userData() });
  }
}

Feel free to update this blog post on GitHub, thanks in advance!

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Share this post

Twitter LinkedIn