Nuxt 3中Supabase Google OAuth登录后URL携带AccessToken问题

问题 #

我正在开发一个Nuxt 3应用，用Supabase实现Google OAuth用户认证，已配置Google作为认证提供商。流程看似正常：能打开Google登录界面，登录成功后重定向回首页，但遇到以下问题：

• Access Token未存储到Cookie或LocalStorage，反而附加在URL的hash中（token已简化）：

  http://localhost:3000/#access_token=eyJb<...>PZg0165&refresh_token=2OD<...>7A&token_type=bearer
  

• 重定向后控制台出现两个警告：

  Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key.
  
  [Vue Router warn]: The selector "#access_token=eyJhbGciO<...>PZg0165&refresh_token=2OODw0wgEx2Fp_Nn9VE7IA&token_type=bearer" is invalid. If you are using an id selector, make sure to escape it.
  

• 确认Supabase用户数据库已成功添加该用户，且token在jwt.io验证有效。

相关代码片段：

<script setup>
const supabase = useSupabaseClient();

const login = async () => {
  const { error } = supabase.auth.signInWithOAuth({
    provider: "google",
  });

  if (error) {
    console.log(error);
  }
};
</script>

<template>
  <h1>Log in</h1>
  <button @click="login"> Login with Google </button>
</template>

我的疑问：

1. 问题根源是什么？是Supabase的Bug，还是我漏了配置步骤？
2. 需要手动从URL提取token并存储，还是Supabase会自动处理？
3. 若必须手动处理，Nuxt 3中的最佳实践是什么？

回答 #

1. 问题根源 #

这不是Supabase的Bug，核心原因是浏览器上下文存在多个GoTrueClient实例（对应第一个警告），导致Supabase无法正常捕获OAuth回调的token并完成存储流程：

• 重复实例可能是因为你既使用了@nuxtjs/supabase模块的自动初始化，又手动创建了Supabase客户端；或者模块配置有误，导致多次初始化。
• Vue Router的警告是连锁反应：因为Supabase没清理URL中的token hash，Router误将整个hash字符串当成了元素ID选择器，从而抛出无效选择器的警告。

另外，也需确认Supabase控制台的OAuth回调URL与Nuxt应用的域名/端口完全匹配（比如http://localhost:3000），不过从用户已被创建来看，回调URL大概率是正确的，核心问题还是多实例。

2. 是否需要手动提取token？ #

正常情况下不需要。Supabase官方客户端会自动解析OAuth回调URL中的token，将其存储到Cookie或LocalStorage（取决于配置的存储策略），并自动清理URL中的hash参数。只有当客户端实例异常（比如多实例）时，这个自动流程才会失效。

3. 手动处理的最佳实践（仅作为临时方案，优先解决多实例问题） #

如果暂时无法解决多实例问题，可按以下步骤手动处理：

1. 在Nuxt的根布局或全局插件中，监听页面加载事件，解析URL的hash参数。
2. 调用Supabase的setSession方法存储token，然后清理URL的hash。

示例代码（全局插件plugins/supabase-handler.ts）：

export default defineNuxtPlugin(() => {
  const supabase = useSupabaseClient();
  const router = useRouter();

  // 处理OAuth回调的token
  const handleOAuthCallback = async () => {
    const hash = window.location.hash.slice(1);
    const params = new URLSearchParams(hash);
    const accessToken = params.get('access_token');
    const refreshToken = params.get('refresh_token');

    if (accessToken && refreshToken) {
      await supabase.auth.setSession({
        access_token: accessToken,
        refresh_token: refreshToken
      });
      // 清理URL的hash，避免Router警告
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  };

  // 页面加载时执行（仅客户端环境）
  if (process.client) {
    handleOAuthCallback();
  }
});

优先推荐的解决方案：

• 检查是否重复初始化了Supabase客户端：确保只通过@nuxtjs/supabase模块的useSupabaseClient或useSupabaseAuthClient获取实例，不要手动创建新的SupabaseClient对象。
• 确认nuxt.config.ts中的Supabase配置正确：

  // nuxt.config.ts
  export default defineNuxtConfig({
    modules: ['@nuxtjs/supabase'],
    supabase: {
      url: process.env.SUPABASE_URL,
      key: process.env.SUPABASE_KEY,
      redirect: false // 若手动处理回调可设为false，默认true会自动处理
    }
  });
  

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