Silent Id-Token Re-authorization for React Spa Application using MSAL2Provider?

Anonymous
2022-08-10T01:54:09.123+00:00

Hi Support,

I currently have a SPA Application with API Authentication registered in Active Directory. I am able to login and make fetch requests to the MS-Graph-API, using MSAL2Provider authentication. However, when the user has been logged in for an hour or more, his authorization (Id-Token) expires. Once this happens, all MS-Graph-API requests fail even though I have a valid access-token. I have been able to initiate a new authroization request by launching a LoginPopup, when the user's authorization expires. However, I would like to initate a silent login, so reauthorization occurs seemlessly. Can anyone advise how I can achieve this for a React SPA applications? Any suggestions would be greatly appreciated.

Microsoft Security | Microsoft Entra | Microsoft Entra ID
Microsoft Security | Microsoft Graph
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. CarlZhao-MSFT 46,376 Reputation points
    2022-08-10T09:21:38.453+00:00

    Hi @Anonymous

    Of course, if you're using the implicit grant flow for your SPA, then you can get the access token silently in the background:

    Now that you've signed the user into your single-page app, you can silently get access tokens for calling web APIs secured by Microsoft identity platform, such as the Microsoft Graph. Even if you already received a token using the token response_type, you can use this method to acquire tokens to additional resources without having to redirect the user to sign in again.

    https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?  
    client_id=6731de76-14a6-49ae-97bc-6eba6914391e  
    &response_type=token  
    &redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F  
    &scope=https%3A%2F%2Fgraph.microsoft.com%2Fuser.read  
    &response_mode=fragment  
    &state=12345  
    &nonce=678910  
    &prompt=none  
    &login_hint=******@mycompany.com  
    

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. Anonymous
    2022-08-10T14:54:28.317+00:00

    Since msal-react doesn't support implicit grant flow. I used silentLogin for authroization code flow instead. I had success with the following solution: silentLogin

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.