Redirect loop on authentication after token expiry

[InspiredJason]

trafficstars

Library versions

• react-aad-msal: 2.3.5
• msal: 1.3.2

Describe the bug 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 { MsalAuthProvider, LoginType } from 'react-aad-msal' 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

const token = await authProvider.getAccessToken()

Expected behavior The app should retrieve the access token after more than an hour of inactivity silently in the background.

To Reproduce Steps to reproduce the behavior:

1. Run React App,
2. User is Authenticated correctly
3. Call the getAccessToken method after token expiry
4. See error

Desktop (please complete the following information):

• Device: [e.g. iPhone6]
• OS: Windows 10 Enterprise Build 18362.836
• Browser Chrome Version 81.0.4044.138, Firefox 78.0.1

[Anand-rana]

i am also face same issue access token not come.

[pejohnst]

This started to happening to me, as well. I believe it started when I updated Chrome to version 84, and that is related to Chrome's new behavior for 3rd party cookies. When I allow 3rd party cookies, the problem goes away. I am looking into using MSAL 2.0 which supports Authorization Code Flow with PKCE, but it is a manual integration process to use in React unlike using this nice library for React.

[jdthorpe]

I again struggled with this for a while, especially since the error never propagates to the error argument of the child of <AzureAD>, i.e.:

<AzureAD provider={authProvider} reduxStore={store}>
        {
           ({
                login,
                logout,
                authenticationState,
                error

            }) => {
                   if(error){
                         // NEVER TRUE
                   }
            }
     }
</AzureAD >

However, if your register a redux store, you can listen for the "AAD_LOGIN_ERROR" action and handle the error there, for example, by switching to the Popup loginType in the Auth Provider, which doesn't suffer from this problem with third party cookies.

[GraemeF]

Should be resolved by #238