How to get tokens for custom API and Microsoft Graph using angular-oauth2-oidc with separate...

I'm using angular-oauth2-oidc in my Angular application (Angular v18) to authenticate against Microsoft Entra ID (login.microsoftonline.com).

My primary goal is to get an access_token for my backend API.

Additionally, I need to fetch user information from the Microsoft Graph API (https://graph.microsoft.com/v1.0/users), which requires a separate User.Read.All scope.

I've set up two AuthConfig objects: authCodeFlowConfig for my API and graphCodeFlowConfig for Microsoft Graph.

app.config.ts:

import { AuthConfig } from 'angular-oauth2-oidc';
import { environment } from 'src/environments/environment';

// Config for my backend API
export const authCodeFlowConfig: AuthConfig = {
issuer: environment.ISSUER,
redirectUri: environment.REDIRECT_URI,
clientId: environment.CLIENT_ID,
responseType: environment.RESPONSE_TYPE,
scope: environment.SCOPE, // 'openid profile api://<client-id>/sso_application'
strictDiscoveryDocumentValidation: false,
showDebugInformation: true,
sessionChecksEnabled: true,
silentRefreshRedirectUri: `${window.location.origin}?silent-refresh=true`,
};

// Config for Microsoft Graph API
export const graphCodeFlowConfig: AuthConfig = {
issuer: environment.ISSUER,
redirectUri: window.location.origin, // Or a specific Graph redirect
clientId: environment.CLIENT_ID, // Same client ID
responseType: environment.RESPONSE_TYPE,
scope: 'openid profile User.Read.All', // Graph specific scopes
strictDiscoveryDocumentValidation: false,
showDebugInformation: true,
sessionChecksEnabled: true,
silentRefreshRedirectUri: `${window.location.origin}?silent-refresh=true`,
};


In my AppComponent constructor, I'm trying to configure the OAuthService for Graph first, get the token, and then immediately re-configure it for my backend API and get its token.

Relevant code in app.component.ts:

import { OAuthService } from 'angular-oauth2-oidc';
import { authCodeFlowConfig, graphCodeFlowConfig } from './app.config';

export class AppComponent {
constructor(public oauthService: OAuthService) {

this.oauthService.configure(authCodeFlowConfig);
this.oauthService.loadDiscoveryDocumentAndLogin().then(() => {
const accessToken = this.oauthService.getAccessToken();
console.log("Access token: ", accessToken);
sessionStorage.setItem('access_token', accessToken); // Storing for API calls

// Now switch to graph config and fetch that token
this.oauthService.configure(graphCodeFlowConfig);
// Attempting to use tryLogin as the initial redirect for Graph should have happened
this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
const graphToken = this.oauthService.getAccessToken();
console.log("Graph token: ", graphToken);
sessionStorage.setItem('graph_token', graphToken); // Storing for Graph calls
});
this.oauthService.setupAutomaticSilentRefresh();
}).catch(error => {
console.error('OAuth initialization error:', error);
});
}
}


This approach doesn't seem to work as expected. And the page keeps loading in a loop with the state= in the url constantly changing.

My Question:

What is the correct way to use angular-oauth2-oidc to obtain an access token for Microsoft Graph API (User.Read.All scope) AND a separate access token for my custom backend API (with its own scopes), ideally during the initial login phase or shortly after?

Is re-configuring the service like this viable, or is there a better pattern, perhaps involving requesting all scopes at once or using a different method to get the second token?

Continue reading...