Cannot authenticate: Azure authentication in React app

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).