What is the structure of the config file for Azure B2C Authetication using react app along with the Authority link structure?

Question

I am trying to get the perfect structure of config and the authority url for my B2C auth application that will be integrated with Azure and React. I did get this structure for my config file and the auth link is specified as in the comments. but I am not able to get the popup screen and the error says that the authority link is invalid.

import { LogLevel } from "@azure/msal-browser";

/**
 * To learn more about user flows, visit: https://learn.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
 * To learn more about custom policies, visit: https://learn.microsoft.com/en-us/azure/active-directory-b2c/custom-policy-overview
 */

const tenantName = "TenantName";
const signInPolicy = "Plicy_For_SignIn";
const applicationID = "CliendId";
const reactRedirectUri = "http://localhost:3000"; //RedirectURL

// Formatted as https://{b2ctenantname}.b2clogin.com/tfp/{b2ctenantguid or full tenant name including onmicrosoft.com}/{signuporinpolicyname}

const AuthorityUrl = `https://${tenantName}/tfp/${tenantName}/${signInPolicy}`;

/**
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
 */
export const msalConfig = {
  auth: {
    clientId: applicationID,
    authority: AuthorityUrl,
    redirectUri: reactRedirectUri,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  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;
          default:
            return;
        }
      },
    },
  },
};

/**
 * https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
  scopes: ["User.Read"],
};

After using the same and passing it to the root of the Index.js file by wrapping it with MsalProvider and calling the instance for a popup login is not working.

I am using the packages that are mentioned in the official documents @azure/msal-react and @azure/msal-browser

The Error that I am getting is a 400 followed by a message that says:

ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientConfigurationError: untrusted_authority: The provided authority is not a trusted authority. Please include this authority in the knownAuthorities config parameter.

I need some help on this!!

Thabk you!!

Answer 1

Here is an example authority URL, as per the guide here:
authority: "https://contoso.b2clogin.com/contoso.onmicrosoft.com/Your-B2C-SignInOrSignUp-Policy-Id"

Your code has:
const tenantName = "TenantName";
const signInPolicy = "Plicy_For_SignIn";
const AuthorityUrl = https://${tenantName}/tfp/${tenantName}/${signInPolicy}

Which results into: https://TenantName/tfp/TenantName/Plicy_For_SignIn -> that does not conform to the sample.

You need to make it follow this format:
authority: "https://contoso.b2clogin.com/contoso.onmicrosoft.com/Your-B2C-SignInOrSignUp-Policy-Id"

As follows: const AuthorityUrl = https://${tenantName}.b2clogin.com/tfp/${tenantName}.onmicrosoft.com/${signInPolicy}