Login through AAD (Azure Active Directory) in React app doesn't working

Question

I'm trying to implement an authentication through Azure Active Directory for React app. When I run my application, after login I get a blank page. In the console I see: "[HMR] Waiting for update signal from WDS..."

This is my provider:

export const authProvider = new MsalAuthProvider(
    {
        auth: {
            authority: "https://login.microsoftonline.com/common",
            clientId: "********-****-****-****-************",
            postLogoutRedirectUri: window.location.origin,
            redirectUri: window.location.origin,
            knownAuthorities: [],
            navigateToLoginRequestUrl: true,
        },
        cache: {
            cacheLocation: 'sessionStorage',
            storeAuthStateInCookie: true,
        },
    },
    {
        scopes: [
            'user.read',
            'api://********-****-****-****-************/Read'
        ]
    },
{
        loginType: LoginType.Redirect,
        tokenRefreshUri: window.location.origin + '/auth.html'
    }
);

package: react-aad-msal

In Azure: I have an app registeration, with SPA platform. Redirect URI: http://localhost:3000.

Anyone has ideas? I tried many things, and read about it but with no result.

Thanks in advance!

Answer 1

(Moving from comments to answer so that others may more easily find it)

The issue is resolved for the customer by changing the authority URL from Common to specifying single TenantID.