reactjs - React アプリを使用した Azure B2C 認証の構成ファイルと機関リンクの構造はどのようなものですか?

Question

Azure と React に統合される B2C 認証アプリケーションの構成と機関 URL の完全な構造を取得しようとしています。構成ファイルのこの構造を取得しました。認証リンクはコメントのように指定されています。しかし、ポップアップ画面を取得できず、権限リンクが無効であるというエラーが表示されます。

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

/**
 * To learn more about user flows, visit: https://docs.microsoft.com/en-us/azure/active-directory-b2c/user-flow-overview
 * To learn more about custom policies, visit: https://docs.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://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
  scopes: ["User.Read"],
};

同じものを使用し、それをラップして Index.js ファイルのルートに渡した後MsalProvider、ポップアップ ログインのインスタンスが機能しません。

公式ドキュメントに記載されているパッケージを使用しており@azure/msal-react、@azure/msal-browser

私が得ているエラーは、400次のようなメッセージが続きます。

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.

これについて助けが必要です!!

よろしくお願いします！