NextJS和Auth0如何获取接口请求的承载token

Next.js 和 Auth0 结合使用时，获取接口请求承载的 token 主要涉及以下几个步骤：

基础概念

Next.js: 是一个流行的 React 框架，用于构建服务器端渲染（SSR）和静态站点生成（SSG）的应用程序。
Auth0: 是一个身份验证和授权平台，提供了一系列工具和服务来帮助开发者管理用户身份和访问控制。

类型与应用场景

JWT Tokens: 用于在客户端和服务器之间传递认证信息。
API Tokens: 用于访问特定的 API 资源。

获取接口请求承载的 Token

步骤

配置 Auth0:
- 在 Auth0 控制台中创建一个应用程序，并获取客户端 ID 和客户端密钥。
- 配置回调 URL 和允许的 Web 源。

集成 Auth0 SDK:
- 使用 @auth0/auth0-react 库在 Next.js 应用中集成 Auth0。
获取 Token:
- 在客户端通过 Auth0 SDK 获取访问 token。
- 在服务器端通过中间件验证 token。

示例代码

客户端（Next.js + React）

import { useAuth0 } from "@auth0/auth0-react";

function MyComponent() {
  const { isAuthenticated, getAccessTokenSilently } = useAuth0();

  const fetchProtectedData = async () => {
    if (isAuthenticated) {
      try {
        const token = await getAccessTokenSilently();
        const response = await fetch('/api/my-protected-endpoint', {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error("Error fetching protected data:", error);
      }
    }
  };

  return (
    <div>
      <button onClick={fetchProtectedData}>Fetch Protected Data</button>
    </div>
  );
}

export default MyComponent;

服务器端（Next.js API Routes）

import { expressjwt: jwt } from "express-jwt";
import { expressJwtSecret } from "jwks-rsa";

const auth0Secret = process.env.AUTH0_SECRET;

export default function handler(req, res) {
  const checkJwt = jwt({
    secret: expressJwtSecret({
      cache: true,
      rateLimit: true,
      jwksRequestsPerMinute: 5,
      jwksUri: `https://your-auth0-domain/.well-known/jwks.json`
    }),
    audience: process.env.AUTH0_CLIENT_ID,
    issuer: `https://your-auth0-domain/`,
    algorithms: ["RS256"]
  });

  app.use(checkJwt);

  // Your protected route logic here
  res.status(200).json({ message: "This is a protected route" });
}