React应用Clerk认证会话有效仍返回401 Unauthorized问题

问题描述 #

在React应用中使用Clerk管理用户认证，用户成功登录后向Express.js后端发起API请求，却持续收到401 Unauthorized响应。已确认Clerk会话处于活跃状态，且请求头中的Authorization token看似传递正确。

详细信息 #

• API端点：http://localhost:3000/api/test
• 预期结果：token有效时收到成功响应
• 实际结果：后端返回401 Unauthorized
• Token行为：发现多次向Clerk的tokens端点和touch端点发起不必要请求，暗示可能存在token管理问题

前端请求代码 #

const Homepage = () => {

  const test = async () => {
   await fetch("http://localhost:3000/api/test", {
        credentials: "include",
      });
  };

return (
    <div className='homepage'>
        <Link to="/dashboard">Get Started</Link>
        <button onClick={test} >TEST BACKEND</button>
    </div>
  )
}

export default Homepage

Express后端代码 #

import express from "express";
import dotenv from 'dotenv';
import cors from "cors";
import {ClerkExpressRequireAuth} from "@clerk/clerk-sdk-node";

dotenv.config();

const port = process.env.PORT || 3000;

const app = express();

app.use(cors({
    origin: process.env.CLIENT_URL,
    credentials:true,
}))

app.use(express.json())

app.get("/api/test", ClerkExpressRequireAuth(), (req,res)=>{
    const userId = req.auth.userId;
    console.log(userId);
    res.send("Success!")
})

app.use((err, req, res, next) => {
    console.error(err.stack)
    res.status(401).send('Unauthenticated!')
})

app.listen(port, ()=>{
    connect()
    console.log("Server running on 3000")
})

问题排查与解决方案 #

1. 前端需主动携带Clerk会话Token #

当前前端请求未显式添加Authorization头，Clerk不会自动将token附加到自定义fetch请求中。需使用Clerk提供的getToken()方法获取会话token，并添加到请求头：

import { useClerk } from '@clerk/clerk-react';

const Homepage = () => {
  const { getToken } = useClerk();

  const test = async () => {
    const token = await getToken();
    await fetch("http://localhost:3000/api/test", {
      credentials: "include",
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
  };

  return (
    <div className='homepage'>
        <Link to="/dashboard">Get Started</Link>
        <button onClick={test} >TEST BACKEND</button>
    </div>
  )
}

export default Homepage

2. 验证后端Clerk配置完整性 #

• 确保.env文件已配置Clerk的Secret Key（从Clerk控制台获取）：

  CLERK_SECRET_KEY=你的Clerk密钥
  CLIENT_URL=http://localhost:5173 # 替换为你的前端实际运行地址
  

• 可给ClerkExpressRequireAuth添加配置项，明确验证策略：

  app.get("/api/test", ClerkExpressRequireAuth({
    authorization: {
      policy: "strict"
    }
  }), (req,res)=>{
      const userId = req.auth.userId;
      console.log(userId);
      res.send("Success!")
  })
  

3. 排查CORS与Cookie传递问题 #

• 确认CLIENT_URL与前端实际地址完全一致（包括端口号，比如http://localhost:5173而非http://localhost）
• 前端fetch的credentials: "include"和后端CORS的credentials: true必须同时配置，否则会话cookie无法正常传递

4. 解决Token重复请求问题 #

前端频繁调用Clerk的tokens/touch端点，本质是后端验证失败触发了Clerk的会话刷新机制。解决上述认证问题后，这类无效请求会自动减少。

内容的提问来源于stack exchange，提问作者Apoorv singh yadav