如何在Next.js应用生产环境中使用msal-browser实现Azure AD认证

报错信息中https://login.microsoftonline.com/undefined/的undefined说明你配置的NEXT_PUBLIC_AZURE_AD_TENANT_ID环境变量在构建/运行时没有被正确读取，导致生成的认证 authority 地址非法，无法拉取OpenID配置。

• 首先明确Next.js的环境变量规则：前缀为NEXT_PUBLIC_的环境变量是构建时注入到客户端代码的，如果你在Azure App Service的「应用设置」中配置这两个变量，默认是运行时服务端可见，不会注入到已构建的客户端代码中，所以部署后读取不到。

方案1：构建时传入变量（推荐，性能更好） #

在你的CI/CD流水线（GitHub Actions/Azure DevOps等）的构建步骤前，添加两个流水线变量NEXT_PUBLIC_AZURE_AD_CLIENT_ID和NEXT_PUBLIC_AZURE_AD_TENANT_ID，赋值为对应的Azure AD参数，再执行next build命令，构建时变量会被自动打包到客户端代码中。
如果是本地构建后部署，提前将两个变量写入项目根目录的.env.production文件，再执行构建命令。

方案2：运行时读取变量（适合需要动态改配置的场景） #

如果需要后续修改参数不用重新构建，需要调整msal初始化逻辑，避免顶层初始化时读取不到变量：

1. 修改msal配置代码为懒初始化：

import * as msal from "@azure/msal-browser";

let msalInstance = null;

const getRedirectUri = () => {
  return process.env.NODE_ENV === "development" 
    ? "/" 
    : "https://somewebsitename.azurewebsites.net/";
};

export const getMsalInstance = () => {
  if (msalInstance) return msalInstance;

  const msalConfig = {
    auth: {
      clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID,
      authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}`,
      redirectUri: getRedirectUri()
    }
  };

  msalInstance = new msal.PublicClientApplication(msalConfig);
  return msalInstance;
};

2. 所有用到msalInstance的地方，改为调用getMsalInstance()获取实例，不要直接导入顶层初始化的实例。

• 如果你硬编码参数依然报错，确认你是直接替换了process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID的位置，且修改后重新执行了构建命令再部署
• 确认Azure AD注册应用的「重定向URI」已经添加了你的App Service域名，类型选择单页应用(SPA)，不要选择Web类型

内容的提问来源于stack exchange，提问作者Rekkert