How to create and access scopes in Angular application

Question

I was just wondering how exactly I would go on adding custom scopes. Like I’ve seen online that you might need to add these scopes on Azure, so is that correct? Also for my angular application if I want to add on MsalGuard would it be

authrequest: {

scopes: [‘api’://{clientid}/{scope name}]
```} 

Also how would it be configured on Azure for the  custome scope 

Answer 1

Hello Ahmad Mujeeb

As discussed over private messages, Yes you are right you need to add custom scopes on Azure App registration too.

In Microsoft Entra ID, this behavior is **by design. The account picker/“Stay signed in” prompt is dependent on authentication tokens and cookies that are currently stored in the browser session. The prompt may be ignored if there is already a valid session. There is no supported setting to have it always show up. Usually, it only shows up when the user registers in from a new session or when the session or cookies are cleared.

Depending on browser cookies, session state, and cached login tokens, Microsoft Entra ID's Stay signed in/account picker functionality can change. The account selector and "Stay signed in" prompt reappear after clearing the browser's cache and cookies, which resets the authentication session. It only appears occasionally because the sign-in flow may skip that prompt if a valid session cookie already exists.

If the assistance was helpful, kindly take a moment to click on and click on Yes for was this answer helpful. And, if you have any further query do let us know.

Answer 2

Custom scopes are created and managed in Azure (Entra ID / Azure AD B2C) on the API’s app registration, then requested from the Angular SPA using MSAL.

1. Create custom scopes on the API app registration

1. In the Azure portal, open the web API app registration (the resource the Angular app will call).
2. Go to Expose an API.
3. Set the Application ID URI (for example, api://<api-client-id> or a custom URI like https://contoso.com/api) and Save.
4. Under Scopes defined by this API, select Add a scope.
5. Fill in:
   • Scope name (for example, tasks.read, tasks.write)
   • Consent display name/description fields
   • Who can consent (Admins and users or Admins only)
6. Select Add scope.

The full scope string is:

<Application ID URI>/<Scope name>

For example:

• api://<api-client-id>/tasks.read
• https://contoso.com/api/Employees.Read.All

This matches the pattern described for web APIs:

• Application ID URI acts as the prefix
• Scope name is appended to form the full scope string.

2. Grant the Angular app permission to those scopes

1. Open the Angular SPA app registration.
2. Go to API permissions → Add a permission.
3. Choose My APIs, select the API app.
4. Under the API’s permission set, select the scopes created earlier (for example, tasks.read, tasks.write).
5. Add permissions and, if needed, select Grant admin consent.
6. Optionally copy the full scope name from the configured permissions list for use in the Angular app.

This is the same pattern shown for an Angular SPA and API with scopes like tasks.read and tasks.write.

3. Use scopes in Angular MSAL (MsalGuard)

In MSAL Angular, MsalGuardConfiguration can include an authRequest with scopes. The scopes array must contain the full scope strings created above, not just the short names.

Example MsalGuard configuration:

import { InteractionType } from '@azure/msal-browser';
import { MsalGuardConfiguration } from '@azure/msal-angular';

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
  return {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: [
        'api://<api-client-id>/tasks.read',
        'api://<api-client-id>/tasks.write'
      ]
    },
    loginFailedRoute: './login-failed',
  };
}

Key points:

• authRequest.scopes should be the full scope URIs, e.g. api://<api-client-id>/<scope-name>.
• authRequest is optional but recommended so consent is obtained up front and users are not prompted multiple times.
• MsalGuard will use these scopes when prompting the user to sign in.

If dynamic scopes are needed per route, authRequest can be a function that returns different scopes based on the route state, as shown in the dynamic example:

authRequest: (authService, state) => {
  return {
    scopes: state.root.url.some(x => x.path === 'calendar')
      ? ['user.read', 'Calendars.Read']
      : ['user.read']
  };
}

4. Summary

• Custom scopes are defined on the API app registration under Expose an API.
• The full scope is Application ID URI + / + Scope name.
• The Angular SPA must be granted those scopes under API permissions.
• In MSAL Angular, configure MsalGuard with authRequest.scopes set to the full scope strings like api://<api-client-id>/tasks.read.

---

References:

• Configure authentication in a sample Angular single-page application by using Azure Active Directory B2C
• Configure an application to expose a web API
• Use MSAL Guard to protect routes
• MSAL Angular Configuration