Redirect loop on authentication after token expiry using react-aad-msal

Question

I've attempted to replace ADAL with MSAL. The first time the user accesses the app it authenticates correctly, but I am getting into a situation where our app goes into a redirect loop after a period of time. I presume this is when the token expires (1 hour by default, I believe). This happens sometimes when the app is idle after an hour, which is why I think it may be to do with the way a new token is obtained as well as when I refresh the browser window.

** AuthProvider.ts **

import { Configuration } from 'msal

// Msal Configurations
const config = {
   auth: {
      authority: 'https://login.microsoftonline.com/' + process.env.REACT_APP_AAD_TENANT,
      clientId: process.env.REACT_APP_AAD_CLIENT_ID,
      postLogoutRedirectUri: window.location.origin,
      redirectUri: window.location.origin,
      validateAuthority: true,
      navigateToLoginRequestUrl: false,
   },
   cache: {
      cacheLocation: 'sessionStorage', // This configures where your cache will be stored
      storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
   },
} as Configuration

// Authentication Parameters
const authenticationParameters = {
   scopes: ['openid', 'api://' + process.env.REACT_APP_AAD_SCOPES],
}

// Options
const options = {
   loginType: LoginType.Redirect,
   tokenRefreshUri: window.location.origin + '/auth.html',
}

export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)

then when calling our api, I thought I could call the getAccessToken method like below and I would silently receive a valid token, but I just end up in a redirect loop.

I'm wondering why it works the first time the user accesses the app, but not when trying to refresh the token. I would think the Azure config is correct, since it works the first time. Could it be an iframe / browser issue or is it a code problem?

[![IdResponse tokenType undefined][1]][1] [1]: https://i.stack.imgur.com/6Vkwn.png

Any news about this issue? I'm experiencing same problem and provided answer is not much of a help. — rpk

Dhivya G - MSFT Identity Dhivya G - MSFT Identity · Accepted Answer · 2020-07-21T00:29:09

To Acquire a valid token using refresh token you need to call msal.js token API acquireTokenSilent. For more information on how to get acquire a token using msal.js refer this document.

You can refer the msal.js sample for your scenario.

Redirect loop on authentication after token expiry using react-aad-msal

1 Answers