angular-oauth2-oidc

When writing custom HttpInterceptor implementations, do not inject OAuthService directly. Doing so creates a circular dependency that will cause an error.

Instead, inject OAuthStorage to retrieve the access_token. This allows you to access the token without triggering the circular dependency loop.

An alternative to disabling initial navigation is to provide a redirectUri that already includes the desired initial route in the hash. When the router sees the route already present in the hash, it will not override it, allowing the library to read the tokens.

http://localhost:8080/#/home

When session checks detect a change, the library performs a token refresh to synchronize the local state with the current session information. Depending on your authentication flow, you must ensure refresh capabilities are configured:

• Implicit Flow: You must configure silent refresh.
• Code Flow: You must either configure silent refresh or use refresh tokens.

If using refresh tokens, ensure your Auth Server binds the token lifetime to the session lifetime.

The angular-oauth2-oidc library follows the OAuth2 and OpenID Connect (OIDC) specifications. As a result, it is designed to be compatible with any authorization server that adheres to these standards.

Note that while the library is spec-compliant, some authorization servers may exhibit unique behaviors or require specific settings. When integrating with a particular provider, you may need to adjust your configuration to accommodate these non-standard implementations.

When performing a login using tryLogin, you can provide an onTokenReceived callback function within the options object. This callback is triggered immediately after a successful login, once the library has received the access_token and (if requested) the id_token. If an id_token was provided, the library automatically validates it before the callback is executed. The callback receives a context object containing the token information.

this.oauthService.tryLogin({
    onTokenReceived: context => {
        //
        // Output just for purpose of demonstration
        // Don't try this at home ... ;-)
        //
        console.debug("logged in");
        console.debug(context);
    }
});

When bootstrapping your application, you must perform two steps to ensure the library is configured and attempts to process the login callback to fetch tokens:

1. Call configure() with your AuthConfig.
2. Call loadDiscoveryDocumentAndTryLogin() to fetch the OIDC discovery document and attempt to handle the login redirect.

this.oauthService.configure(authCodeFlowConfig);
this.oauthService.loadDiscoveryDocumentAndTryLogin();

After configuring the service, you must call configure() and loadDiscoveryDocumentAndTryLogin() during application bootstrapping. To initialize the specific code flow, use initCodeFlow(). Alternatively, initLoginFlow() automatically chooses between code and implicit flow based on your configuration.

// During bootstrapping
this.oauthService.configure(authCodeFlowConfig);
this.oauthService.loadDiscoveryDocumentAndTryLogin();

// To trigger the flow
this.oauthService.initCodeFlow();
// OR
this.oauthService.initLoginFlow();

Starting from version 9, JwksValidationHandler has been moved to a separate library to improve tree shaking and reduce bundle sizes. If you are implementing the implicit flow, you must install the JWKS package separately.

Note: This dependency is not required if you are using the code flow, which is the recommended flow for single-page applications.

npm i angular-oauth2-oidc-jwks --save

The library provides an Observable<OAuthEvent> via this.oauthService.events that publishes a stream of events as they occur. You can subscribe to this stream to react to lifecycle changes, such as token reception or configuration loading, or to log them for debugging purposes.

this.oauthService.events.subscribe(e => console.log(e));

Since version 3.1, the library includes a default HttpInterceptor that automatically attaches the access_token to requests sent to authorized resource servers and handles security-related errors (HTTP 401 and 403).

To enable this, configure the resourceServer object within your OAuthModule.forRoot() call:

1. Set sendAccessToken to true.
2. Set allowedUrls to an array of URL prefixes. Note: Use lower case for the prefixes.

OAuthModule.forRoot({
    resourceServer: {
        allowedUrls: ['http://www.angular.at/api'],
        sendAccessToken: true
    }
})