#azure/msal-browser untrusted_authority error - reactjs

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}

Answer 1

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

Answer 2

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'
}
};