msal.loginPopup fails to login when user has permissions w/o error message

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

^2.23.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

^1.3.2

Description

Two issues:

1. msal.loginPopup fails to login when user has permissions w/o error message

What we saw:

1. open the website in Chrome or Edge
2. Click Login button
3. sign in with popup dialog (msal.loginPopup())
4. page gets refreshed
5. useIsAuthenticated is still false
6. Repeated attempts results in the same issue

This issue has become more serious recently.

Error Message

We do not see an exception or error returned. That’s the pain point.

Msal Logs

No logs available.

MSAL Configuration

{
	auth: 
	{
		"Instance": "https://login.microsoftonline.com/",
    		"TenantId": null,
   		 "ClientId": null,
    		"ClientSecret": null,
    		"CallbackPath": "/signin-oidc"
	}
	cache: {
		cacheLocation: "localStorage"
	}
}

Relevant Code Snippets

Block 1:
<Button color='secondary' size='sm' onClick={() => msal.loginPopup()}>
    Login
</Button>

Block 2:
const [isLoading, setLoading] = useState(false)
const isAuthenticated = useIsAuthenticated()
const setData = data => {
  localStorage.setItem('Authorization', `Bearer ${data?.accessToken}`)
}

useEffect(() => {
        if (isAuthenticated && !localStorage.Authorization && !isLoading && inProgress === InteractionStatus.None) {
            setLoading(true)
            msal
                .acquireTokenSilent({
                    scopes: ['api://' + localStorage.ClientId + '/User.Read'],
                    account: account
                })
                .then(res => setData(res))
                .catch(error => {
                    showError(error)
                })
                .finally(() => setLoading(false))
        }
    }, [isLoading, isAuthenticated, account, msal, inProgress])

Reproduction Steps

1. Try to login with msal.loginPopup().
2. Check whether token is saved in browser.
3. Run useIsAuthenticated see if it returns true when there is token issued.

Expected Behavior

Successful login when the user has permissions or return some error message so we can know what happened.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

No response

Source

Internal (Microsoft)

[tnorling]

@momoliu-msft You should be able to serve up static assets. Alternatively, you can ensure that your router preserves the hash while routing. The issue isn’t so much the presence of the router and more so that it is indeterminately redirecting to a static route which ends up removing the hash.

[tnorling]

@momoliu-msft Only the popup window gets redirected to your redirectUri and ideally that popup should get closed before the user has even noticed