syncweek-react-aad / react-aad

A React wrapper for Azure AD using the Microsoft Authentication Library (MSAL). The easiest way to integrate AzureAD with your React for authentication.
MIT License
344 stars 94 forks source link

Two Redirect URI's on AAD B2C Stops Redirection to Login Page When Login Expires #228

Closed lmeerwood closed 2 years ago

lmeerwood commented 4 years ago

Library versions

Describe the bug When I have two redirect URI's in my Azure AD B2C instance my web application will no longer redirect to the log in page when the access token has expired. Everything between the <AzureAD> tags stops showing (which is everything in my case). If I leave it at just one it redirects fine.

Once the app has stopped working the only way I can get it to go to the login page again is by clearing my local storage and my cookies.

I am unsure if this helps, but when the page has stopped loading, every refresh adds more and more entries in local storage. image

Expected behavior Application to redirect to the log in page when token expires.

To Reproduce Steps to reproduce the behavior:

  1. Have two redirect URI's in your Azure AD B2C instance.
  2. Log in to your web app.
  3. Either wait for the token to expire, or force it to expire early.
  4. Reload page.
  5. Page won't load anything

Desktop (please complete the following information):

Below is how I have my code set up.

main.tsx

...
ReactDOM.render(
    <>
        <AzureAD provider={authProvider} forceLogin={true}>
            <App />
        </AzureAD>
    </>,
    document.getElementById('app')
);
...
authProvider.ts

...
const config: Configuration = {
    auth: {
        authority: 'https://myapp.b2clogin.com/myapp.onmicrosoft.com/b2c_1_signin',
        clientId: 'my-client-id',
        redirectUri: () => window.location.origin,
        validateAuthority: false
    },
    cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: true
    }
};

// Authentication Parameters
const authenticationParemeters: AuthenticationParameters = {
    scopes: ['https://myapp.onmicrosoft.com/myappfe/read']
};

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

export const authProvider = new MsalAuthProvider(config, authenticationParemeters, options);
...

One thing I am noticing is I get a lot of ClientAuthError's with the iframe: image I have seen others with this issue but haven't been able to resolve it myself. Would this be related to the current issue I'm having?