如何在Next.js中结合Auth0使用getStaticPaths调用认证外部API？

核心前提 #

getStaticPaths 是在构建阶段执行的，此时没有用户请求上下文，无法获取当前登录用户的Auth0令牌。因此你需要使用机器到机器（M2M）认证流程，让你的Next.js服务直接向Auth0请求API访问令牌，而非依赖用户令牌。

步骤1：在Auth0后台配置M2M应用 #

1. 登录Auth0控制台，创建一个Machine to Machine Applications类型的应用。
2. 将该应用授权给你的目标外部API（在Auth0的「APIs」菜单中配置权限）。
3. 记录下以下信息：
   • Auth0 域名（AUTH0_DOMAIN）
   • M2M应用的 Client ID（AUTH0_CLIENT_ID）
   • M2M应用的 Client Secret（AUTH0_CLIENT_SECRET）
   • 目标API的标识符（Audience，AUTH0_API_AUDIENCE）

步骤2：配置环境变量 #

在Next.js项目的.env.local文件中添加这些变量：

AUTH0_DOMAIN=your-auth0-domain.auth0.com
AUTH0_CLIENT_ID=your-m2m-client-id
AUTH0_CLIENT_SECRET=your-m2m-client-secret
AUTH0_API_AUDIENCE=https://your-api-audience.com

步骤3：编写获取M2M令牌的函数 #

创建一个工具函数（比如utils/getM2MToken.js）来从Auth0获取令牌：

export async function getM2MToken() {
  const response = await fetch(`https://${process.env.AUTH0_DOMAIN}/oauth/token`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      client_id: process.env.AUTH0_CLIENT_ID,
      client_secret: process.env.AUTH0_CLIENT_SECRET,
      audience: process.env.AUTH0_API_AUDIENCE,
      grant_type: 'client_credentials',
    }),
  });

  if (!response.ok) {
    throw new Error('Failed to fetch M2M token');
  }

  const data = await response.json();
  return data.access_token;
}

步骤4：修改getStaticPaths使用令牌 #

更新你的getStaticPaths函数，先获取令牌再调用外部API：

import { getM2MToken } from '../utils/getM2MToken';

export async function getStaticPaths() {
  try {
    const accessToken = await getM2MToken();
    
    const res = await fetch('https://myapi.com/projects', {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    });

    if (!res.ok) {
      throw new Error('Failed to fetch projects');
    }

    const projects = await res.json();

    const paths = projects.map((project) => ({
      params: { id: project.id },
    }));

    return { paths, fallback: false };
  } catch (error) {
    console.error('Error generating paths:', error);
    // 构建时出错可返回空路径或自定义处理逻辑
    return { paths: [], fallback: false };
  }
}

注意事项 #

• 令牌有效期：Auth0的M2M令牌默认有效期为24小时，由于getStaticPaths在构建时执行一次，无需处理令牌刷新；如果使用增量静态再生（ISR），则需要在每次再生时重新获取令牌。
• 环境变量安全：确保AUTH0_CLIENT_SECRET等敏感变量不会暴露到客户端代码中，Next.js会自动处理服务端环境变量的安全。

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