The different ways to load your OpenID configuration for Angular Auth OIDC Client

Tim Deschryver

In this article, we'll take a brief look at how to use the provideAuth function from the Angular Auth OIDC Client library to load your OpenID configuration. Either synchronously or asynchronously.

Static configuration link

Providing the configuration synchronously is straightforward, as you can pass the configuration object directly to the provideAuth function. This is the simplest way to configure the library, but it doesn't allow for dynamic configuration based on the application's environment or other factors.


See the samples documentation page for a range of examples.

Configurable configuration link

The above setup can be tweaked a bit to load the configuration via a (parameterized) function that returns the OpenIdConfiguration. Together with the approach I've discussed in Multiple releases using the same, but configurable, Angular Standalone Application build, we can make the configurable depending on the environment. This allows us to have different configurations for different environments, for example, a development, a staging, and a production environment.


Use secureRoutes to prevent the library from automatically adding the access token to each request. See Watch out what you expose with Angular Interceptors for more information.

Asynchronous configuration (HTTP) link

Sometimes, you might want to load the configuration from an external source, such as an HTTP request. Using this solution, the client doesn't have ownership of the configuration, instead, it's retrieved from a server.

Storing the configuration on the server makes it possible to use an updated version of the configuration without the need to redeploy the client application. This offers the most flexibility, out of the three options, but it introduces a dependency on the server.

To achieve this, use the overload of the provideAuth function to use the loader property to provide a custom StsConfigLoader. The openIdConfigurationFactory in the example below injects the HttpClient and retrieves the OpenID configuration from the server.

Conclusion link

In this article, we've seen how to configure the provideAuth function from the Angular Auth OIDC Client library to load your OpenID configuration synchronously or asynchronously. This allows you to have a static configuration, a configurable configuration, or a configuration that is loaded from an external source. Depending on your requirements you can choose the most suitable approach for your application.

Outgoing links

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 PayPal logo

Share this post on

Twitter LinkedIn