Login issue on 2nd attempt if user relaunch the application

[jhaankit]

I am getting an error, if user hits wrong credentials on 1st attempt and then relaunch the application and try to re-login.

To Reproduce Steps to reproduce:

1. Launch the url https://foo.com (your app url address).
2. App will be redirected to login page for AD authentication.
3. Enter a wrong credentials.
4. you will get error message "Your account or password is incorrect. If you can't remember your password, reset it now."
5. Go to the url address bar and update it to https://foo.com (your app url address) from https://login.microsoftonline.com/ and hit Enter. I mean, relaunch the application.
6. You will not be redirected to login page again.

Expected behavior It should be redirected to login page again.

Desktop

• OS: MacOS Mojave
• Browser: chrome, firefox tested
• Version: Latest

Additional context From my understanding the sessionStorage or localStorage is not getting cleared and creating this issue. It works fine, if i clear the cache.

Screenshots

[AndrewCraswell]

Thanks for filing this, I have an idea what might be causing it. Will try to take a look this weekend.

[jhaankit]

Hello team, anyone have any solution for the above issue. This is showstopper issue and we do not have any solution for it. Help will be really appreciated. Thanks in advance.

[AndrewCraswell]

Hey @jhaankit, apologies for the silence here. There are a few issues we've been working with the MSAL folks to find reasonable solutions. This is one issue that is still open on their end. Until something more official can be adopted the best workaround is to intercept these errors and manually clear the cache. You can see how one user solved this here: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1069#issuecomment-546621599

I am currently working on a few changesets to improve the error messaging around this. In your screenshots, you're receiving a "User login is required" which isn't the basal error. We can do a better job to return the "Login is in progress" error so people can correctly identify that there was an error caused by a pre-existing login being in the process. But ultimately, I would hope to see a better approach to this class of problem implemented directly into the MSAL library.

[AndrewCraswell]

Btw, I've been told there will be a new MSAL release hopefully tomorrow which will aim to resolve this. I would guess before December this library will be updated to utilize it.

[jhaankit]

Thank you for your quick response. I will try workaround provided by you.

Sorry, mistakenly i closed the ticket. I reopened it.

[AndrewCraswell]

This seems to have been resolved in MSAL release 1.2.0-beta.5. Since MSAL is listed as a peerdependency, you can update this separately.

[AndrewCraswell]

I take that back, MSAL version 1.2.0 just dropped this minute. Things move fast around here :)

[alankopetman]

Unfortunately, me and my team are still seeing this issue after updating MSAL :(. I can confirm that it's still the issue where auth state is set to "InProgress" when returning to the original app from the microsoft login page without authenticating.

[AndrewCraswell]

@alankopetman Can you confirm which version of react-aad-msal you are using?

[alankopetman]

@AndrewCraswell Sorry it looks like we were on an older version (1.1.3). We just updated to the current version (2.2.4) and we're not seeing that issue anymore. However, we still see this error, but it isn't causing our app to lock up and not redirect to the login page anymore.

Edit: I spoke too soon. I'm seeing the issue with [email protected] and [email protected]. However, the behavior I described above was with [email protected] and [email protected]. Sorry about the confusion.

[alankopetman]

@AndrewCraswell I think I know what our issue is. Due to the architecture of our app we had no need to render a login button so we called the login function in the render props cb.

    <AzureAD provider={props.authProvider}>
      {({ login, authenticationState }: IAzureADFunctionProps) => {
        if (authenticationState === AuthenticationState.Authenticated) {
          return props.children;
        }
        login();
      }}
    </AzureAD>

So we moved the logic to another component that performs the login on mount and we're not having those issues anymore.

const LoginRedirect: React.FC<{login: () => void}> = props => {
  const { login } = props;
  React.useEffect(() => {
    login();
  }, [login]);
  return null;
};

...

<AzureAD provider={props.authProvider}>
  {({ login, authenticationState }: IAzureADFunctionProps) => {
    if (authenticationState === AuthenticationState.Authenticated) {
      return props.children;
    }
    return <LoginRedirect login={login} />
  }}
</AzureAD>

I don't think this is related to this issue anymore. We saw similarities and assumed it was.