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

Published June 24, 2024

Tim Deschryver

timdeschryver.dev

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.

 app.config.ts content_paste
import { provideAuth } from 'angular-auth-oidc-client';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      config: {
        authority: 'https://offeringsolutions-sts.azurewebsites.net',
        clientId: 'angularCodeRefreshTokens',
        triggerAuthorizationResultEvent: true,
        postLoginRoute: '/home',
        forbiddenRoute: '/forbidden',
        unauthorizedRoute: '/unauthorized',
        historyCleanupOff: true,
        redirectUrl: window.location.origin,
        postLogoutRedirectUri: window.location.origin,
        scope: 'openid profile email offline_access',
        responseType: 'code',
        silentRenew: true,
        useRefreshToken: true,
        secureRoutes: ['/api'],
      },
    }),
  ],
};

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.

 app.config.ts content_paste
import { provideAuth } from 'angular-auth-oidc-client';
import { EnvironmentConfiguration } from './environment.config';
import { openIdConfigurationFactory } from './open-id-configuration';
 
export const appConfig = (config: EnvironmentConfiguration): ApplicationConfig = {
 providers: [
    provideAuth({
        config: openIdConfigurationFactory(config),
    }),
  ],
};

 open-id-configuration.ts content_paste
import { OpenIdConfiguration } from 'angular-auth-oidc-client';
import { openIdConfigurationFactory } from './open-id-configuration';
 
export const openIdConfigurationFactory = (
  config: EnvironmentConfiguration,
): OpenIdConfiguration => {
  return {
    // 👇 Use the environment configuration
    authority: config.openId.authority,
    clientId: config.openId.clientId,
    triggerAuthorizationResultEvent: true,
    postLoginRoute: '/home',
    forbiddenRoute: '/forbidden',
    unauthorizedRoute: '/unauthorized',
    historyCleanupOff: true,
    redirectUrl: window.location.origin,
    postLogoutRedirectUri: window.location.origin,
    scope: 'openid profile email offline_access',
    responseType: 'code',
    silentRenew: true,
    useRefreshToken: true,
    secureRoutes: ['/api'],
  };
};

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.

 app.config.ts content_paste
import { provideAuth, StsConfigLoader } from 'angular-auth-oidc-client';
import { openIdConfigurationFactory } from './open-id-configuration';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAuth({
      loader: {
        provide: StsConfigLoader,
        useFactory: openIdConfigurationFactory,
      },
    }),
  ],
};

 open-id-configuration.ts content_paste
import {
  OpenIdConfiguration,
  StsConfigLoader,
  StsConfigHttpLoader,
} from 'angular-auth-oidc-client';
 
export const openIdConfigurationFactory = (): StsConfigLoader => {
  const httpClient = inject(HttpClient);
  const config$ = httpClient.get<OpenIdConfiguration>(`/api/ClientOpenIdConfiguration`);
  return new StsConfigHttpLoader(config$);
};

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

• Multiple releases using the same, but configurable, Angular Standalone Application build
• Watch out what you expose with Angular Interceptors

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