Signals in Angular Auth OIDC Client

profile
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:

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:

userData link

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

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.

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.

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

Join My Newsletter (WIP)

Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.

Support me

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

Buy Me a Coffee at ko-fi.com PayPal logo

Share this post on

Twitter LinkedIn