Cannot authenticate: Azure authentication in React app - reactjs

Question

I'm trying to set up Azure authentication from a React app following this tutorial:
https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react
After setting up Azure and running it, I get this error:
ClientConfigurationError: url_parse_error: URL could not be parsed into appropriate segments. Given Error: Given url string: common/
Below is the configuration file 'authConfig.js'.
I don't know what I'm doing wrong as I'm doing this for the first time and I don't understand the error messages, nor do I find anything relevant in the docs other than what I've tried, changing the authority string.
/*
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
*/
import { LogLevel } from "#azure/msal-browser";
/**
* Configuration object to be passed to MSAL instance on creation.
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
*/
export const msalConfig = {
auth: {
clientId: "912fcdde-6306-4397-96ec-d7e24418d206",
// authority: "bde20525-a858-4726-a4c7-48bd8239499f",
// authority: "emtechdemo07052021.onmicrosoft.com",
authority: "common",
redirectUri: "http://localhost:3000"
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
},
system: {
loggerOptions: {
loggerCallback: (level, message, containsPii) => {
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;
}
}
}
}
};
/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit:
* https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
*/
export const loginRequest = {
scopes: ["User.Read"]
};
/**
* Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
*/
export const graphConfig = {
graphMeEndpoint: "https://graph.microsoft.com"
};

Answer 1

Please try by changing the value of authority to:
https://login.microsoftonline.com/common
If you want to authenticate users against a specific tenant, please specify that tenant id or fully qualified tenant name instead of common. Something like:
https://login.microsoftonline.com/bde20525-a858-4726-a4c7-48bd8239499f
- OR -
https://login.microsoftonline.com/emtechdemo07052021.onmicrosoft.com
For more details, please see here (2nd bullet point which talks about the values for msalConfig section).