React集成Clerk与Supabase遇auth.getUser错误：Auth Session Missing

我正尝试在非Next.js的React应用中集成Clerk.com与Supabase，但持续遇到错误：auth.getUser returns an error: Auth Session Missing。

我在Clerk中使用的JWT模板如下：

{
    "claims": {
        "aud": "authenticated",
        "sub": "{{user.id}}",
        "role": "authenticated",
        "email": "{{user.primary_email_address}}",
        "app_metadata": {
            "provider": "clerk"
        },
        "user_metadata": {
            "email": "{{user.primary_email_address}}"
        }
    }
}

问题排查与解决方案 #

1. Supabase客户端未正确携带Clerk的JWT令牌

必须确保Supabase请求头部带上Clerk签发的符合Supabase要求的JWT。在初始化Supabase客户端时，要动态获取Clerk的令牌：

import { useAuth } from "@clerk/clerk-react";
import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = "你的Supabase URL";
const SUPABASE_ANON_KEY = "你的Supabase匿名密钥";

function MyComponent() {
  const { getToken } = useAuth();
  
  // 每次请求前获取最新令牌
  const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
    global: {
      headers: async () => ({
        Authorization: `Bearer ${await getToken({ template: "supabase" })}`,
      }),
    },
  });

  // 后续调用supabase.auth.getUser()等方法
}

注意：template参数要和你在Clerk中创建的JWT模板名称完全一致，否则Clerk不会返回适配Supabase的令牌。

2. Clerk JWT模板的aud字段不符合要求

Supabase验证JWT时，aud（受众）字段必须设置为你的Supabase项目ID（即Supabase URL中https://xxx.supabase.co里的xxx），而非authenticated。修改Clerk的JWT模板：

{
    "claims": {
        "aud": "你的Supabase项目ID",
        "sub": "{{user.id}}",
        "role": "authenticated",
        "email": "{{user.primary_email_address}}",
        "app_metadata": {
            "provider": "clerk"
        },
        "user_metadata": {
            "email": "{{user.primary_email_address}}"
        }
    }
}

3. 等待Clerk会话加载完成再调用Supabase

在React组件中，必须等待Clerk的会话初始化完成、用户已登录后，再调用Supabase的认证接口，否则会因会话未就绪报错：

import { useAuth } from "@clerk/clerk-react";
import { useEffect } from "react";

function MyComponent() {
  const { isLoaded, isSignedIn } = useAuth();
  const supabase = // 初始化你的supabase客户端

  useEffect(() => {
    const fetchSupabaseUser = async () => {
      // 仅在会话加载完成且用户已登录时执行
      if (isLoaded && isSignedIn) {
        const { data, error } = await supabase.auth.getUser();
        if (error) console.error(error);
        else console.log("Supabase用户信息:", data);
      }
    };

    fetchSupabaseUser();
  }, [isLoaded, isSignedIn]);
}

4. 配置Supabase验证Clerk的JWT

Supabase需要能验证Clerk签发的JWT，需完成以下步骤：

• 从Clerk控制台的JWT模板页面，复制对应模板的公钥
• 登录Supabase控制台，进入Authentication > Settings > JWT
• 在Public keys中添加Clerk的公钥，或配置JWKS URL（Clerk提供的JWKS地址）
• 确保开启Allow custom JWT选项

总结 #

按上述顺序排查配置：先修正Clerk JWT模板的aud字段，再确保Supabase客户端正确携带令牌，接着保证会话就绪后调用接口，最后完成Supabase的JWT验证配置，即可解决Auth Session Missing错误。

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