@azure/msal-browser untrusted_authority error

Question

I've been trying to follow this tutorial... Sign In Users From A React SPA but I cannot get it to work. I have a personal azure account and have created an SPA application within Azure Active Directory to get a client id. From everything I've read it says I should use https://login.microsoftonline.com/{tenant-id-here} as my authority but when I do I get the error...

ClientConfigurationError: untrusted_authority: The provided authority is not a trusted authority

I have tried adding a knownAuthorities parameter to the config, although I don't think I should have to as I'm just concerned with a single tenant. When I do add the knownAuthorities param, the error changes to...

ClientAuthError: openid_config_error: Could not retrieve endpoints.

My config file looks like this

export const msalConfig = {
    auth: {
        clientId: '{client id from Azure AD Application}',
        authority: 'https://login.microsoftonline.com/{tenant-id}',
        redirectUri: 'http://localhost:3000',
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false
    }
}

The sign in button that causes the error looks like this...

function handleLogin(instance) {
    instance.loginPopup(loginRequest).catch(e => {
        console.error(e);
    })
}

function SignInButton() {
    const {instance} = useMsal();

    return (
        <Button variant="secondary" className="ml-auto" onClick={() => handleLogin(instance)}>
            Sign in
        </Button>
    )
}

Might I be missing something in the azure settings? Or something else in the react application itself?

UPDATE: 16/02/22

Well I've now got it working. I accidentally had the sign in button rendered inside an <a> tag, which must have been stopping the Microsoft login popup from loading. Probably trying to redirect somewhere, which prevented the MSAL process from finishing. Wasn't the most helpful error message to go on.

So to confirm, for a single tenant solution, you only need clientId and authority. And authority is definitely https://login.microsoftonline.com/{your-tenant-id}

score 2 · Answer 1 · answered Nov 07 '22 at 02:17

Kindly add the knownAuthorities, and it's worked for my sample

const msalConfig = {
    auth: {
        clientId: 'enter_client_id_here',
        // comment out if you use a multi-tenant AAD app
        authority: 'https://login.microsoftonline.com/{tenant-id}',
        knownAuthorities: ["login.microsoftonline.com"],
        redirectUri: 'http://localhost:8080'
    }
};

score 0 · Answer 2 · answered Feb 15 '22 at 17:50

I took a look on Github and the settings are a bit different. Try using "https://login.microsoftonline.com/common" as the authority:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        authority: "https://login.microsoftonline.com/common",
        knownAuthorities: [],
        cloudDiscoveryMetadata: "",
        redirectUri: "enter_redirect_uri_here",
        postLogoutRedirectUri: "enter_postlogout_uri_here",
        navigateToLoginRequestUrl: true,
        clientCapabilities: ["CP1"]
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false,
        secureCookies: false
    },
    system: {
        loggerOptions: {
            loggerCallback: (level: LogLevel, message: string, containsPii: boolean): void => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
            piiLoggingEnabled: false
        },
        windowHashTimeout: 60000,
        iframeHashTimeout: 6000,
        loadFrameTimeout: 0,
        asyncPopups: false
    };
}

const msalInstance = new PublicClientApplication(msalConfig);

source: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md

In that same GitHub repo I was looking at the initialisation document and that said that /common was for multi-tenant solutions. https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md — jdez, Feb 15 '22 at 17:57

@azure/msal-browser untrusted_authority error

2 Answers2