1

I'm developing a micro frontend application where the container app handles user authentication and stores tokens in sessionStorage. These tokens are needed to access various APIs with different scopes. What's the best way to manage tokens for different scopes and handle token expiration?

Specifically, I'm looking for guidance on:

  1. Token Acquisition: Should I request tokens for different scopes individually, or is there a way to obtain tokens for multiple scopes in a single API call?

  2. Token Renewal: How can I ensure that tokens are renewed when they expire, and is there a way to automate this process?

  3. Centralized Storage: What's the best practice for storing tokens, and how can I retrieve them efficiently when making API requests in individual micro apps?

I'm using MSAL for authentication in a React-based micro frontend setup, and I'd appreciate any advice or best practices on handling tokens effectively in this scenario.

SDK
  • 1,356
  • 3
  • 19
  • 44
  • `Should I request tokens for different scopes individually` --> yes, within one api generation request, we could only define one kind of api, let's say if the scopes are `https://graphapi/User.Read api://xxxx/my_custom_permission`, then only the first graph api scope takes effect, but if the scopes are `User.Read Group.Read Mail.Read`, all of the scopes are Graph API permission, then the token will contain all of these scopes. – Tiny Wang Sep 01 '23 at 08:35
  • In frontend app, I'm afraid you can generate new access token each time when need to use it to call API, or you need to store the refresh token and renew access token manually, refresh token is not able to refresh automatically. – Tiny Wang Sep 01 '23 at 08:37

1 Answers1

0

I created an Azure AD Application and added API permissions:

enter image description here

I tried to generate the access token for two APIs (Microsoft Graph and Web API) via Postman by using parameters like below:

https://login.microsoftonline.com/TenantID/oauth2/v2.0/token

client_id:ClientID
scope:user.read api://ClientID/test.read
grant_type:authorization_code
redirect_uri:https://jwt.ms
code:code
client_secret:ClientSecret

enter image description here

When I decoded the access token, the aud is Microsoft Graph not the Web API. The access token generated for the first scope.

enter image description here

Note that: You can call one API at a time that is you have to request tokens for multiple/different scopes separately.

  • As you are making use of Azure AD MSAL, there is no need of caching the token or renewing the expired access token MSAL does it automatically.
  • You have to make use of acquireTokenSilent to generate the tokens.
  • If the token is expired MSAL will silently refresh the access token.

References:

reactjs - How to get azure ad refresh token with react - Stack Overflow by Thomas Norling

javascript - Storing MSAL Graph API token in client side React and reusing it until expiry - Stack Overflow by Philippe Signoret

Rukmini
  • 6,015
  • 2
  • 4
  • 14