如何从Next.js调用受Kinde保护的Express后端API？

核心问题定位 #

你遇到的问题本质是请求Express API时没有正确携带Kinde的accessToken，或者Express端的Token验证配置不匹配。下面给出分步解决方案：

1. 在Next.js中正确携带accessToken到API请求 #

无论是Server Component还是Client Component，都需要将获取到的accessToken通过Authorization请求头传递给Express：

Server Component 示例

import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

export default async function Home() {
  const { getAccessToken, isAuthenticated } = getKindeServerSession();
  const isLoggedIn = await isAuthenticated();

  let apiResponse = null;
  if (isLoggedIn) {
    const accessToken = await getAccessToken();
    // 调用Express受保护路由
    const res = await fetch("http://your-express-server.com/admin", {
      method: "GET",
      headers: {
        "Authorization": `Bearer ${accessToken}`
      }
    });
    apiResponse = await res.json();
  }

  return (
    <div>
      {apiResponse && <p>{apiResponse.message}</p>}
    </div>
  );
}

Client Component 示例

"use client";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { useEffect, useState } from "react";

export default function Dashboard() {
  const { getAccessToken, isAuthenticated } = useKindeBrowserClient();
  const [adminData, setAdminData] = useState<string | null>(null);

  useEffect(() => {
    const fetchAdminData = async () => {
      if (await isAuthenticated()) {
        const token = await getAccessToken();
        const res = await fetch("http://your-express-server.com/admin", {
          headers: {
            "Authorization": `Bearer ${token}`
          }
        });
        if (res.ok) {
          setAdminData(await res.text());
        }
      }
    };
    fetchAdminData();
  }, []);

  return <div>{adminData || "未授权访问"}</div>;
}

2. 修正Express端的Token验证配置 #

方式一：使用jwtVerify验证（推荐）

确保传入正确的Kinde issuer URL，并指定API Audience（需与Kinde后台配置一致）：

const { jwtVerify } = require("@kinde-oss/kinde-node-express");

// 替换为你的Kinde域名和API Audience
const verifier = jwtVerify("https://your-kinde-subdomain.kinde.com", {
  audience: "your-api-audience" // 在Kinde后台「API」页面设置
});

app.get("/admin", verifier, (req, res) => {
  console.log("已验证用户：", req.user);
  res.send({ message: "Welcome to the admin area" });
});

方式二：使用protectRoute中间件

需先初始化Kinde客户端，确保配置参数完整：

const { KindeClient, protectRoute } = require("@kinde-oss/kinde-node-express");

// 从环境变量加载敏感配置
const kindeClient = new KindeClient({
  domain: "https://your-kinde-subdomain.kinde.com",
  clientId: process.env.KINDE_CLIENT_ID,
  clientSecret: process.env.KINDE_CLIENT_SECRET,
  audience: "your-api-audience"
});

app.get("/admin", protectRoute(kindeClient), (req, res) => {
  res.send("Welcome to the admin area");
});

3. 关键排查点 #

• Token有效性：用Kinde后台的Token调试工具验证accessToken是否包含正确的aud（audience）和iss（issuer）字段
• CORS配置：Express需允许Next.js域名跨域，并允许携带Authorization头：

  const cors = require("cors");
  app.use(cors({
    origin: "http://your-nextjs-app.com", // 替换为你的Next.js地址
    credentials: true,
    allowedHeaders: ["Authorization", "Content-Type"]
  }));
  

• 环境变量：确保Express端的KINDE_CLIENT_ID、KINDE_CLIENT_SECRET等配置正确加载
• Kinde后台配置：确认API Audience已添加，且应用的权限范围包含访问该API的权限

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