Supabase + Next.js 13 App Router OAuth登录无code参数返回问题

我在使用Supabase的Twitch和Google OAuth登录处理函数时，预期回调地址/auth/callback会返回code参数，但实际并未获取到。目前仅能看到Cookie中存在code-verifier，但URL里没有code参数，相关文档也没提这个问题。

登录处理代码如下：

// twitch signin handler
const handleTwitchSignIn = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "twitch",
    options: {
      redirectTo: `${location.origin}/${lang}/auth/callback`,
    },
  });
};

// google signin handler
const handleGoogleSignIn = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${location.origin}/${lang}/auth/callback`,
    },
  });
};

可能的原因及解决方法： #

• 核对回调地址配置：确保在Twitch/Google开发者后台设置的回调地址，和代码中redirectTo的值完全一致，包括协议（http/https）、域名、路径，任何字符差异都会导致第三方服务不返回code参数。
• 理解Supabase PKCE流程：Supabase默认使用PKCE模式完成OAuth授权，这个流程中code不会暴露在URL中，而是由Supabase后台自动完成code与token的交换。你不需要手动获取URL中的code，应该通过Supabase的Auth API来获取会话信息。
• 修正回调页面逻辑：在/auth/callback页面，直接调用Supabase的会话获取方法来处理登录结果，示例代码：

  async function handleAuthCallback() {
    const { data: { session }, error } = await supabase.auth.getSession();
    if (error) {
      console.error("登录回调失败:", error);
      // 这里可以添加错误提示或跳转至登录页
    } else if (session) {
      // 登录成功，跳转至应用主页
      window.location.href = `/${lang}/`;
    }
  }
  
  // 页面加载时执行回调处理
  handleAuthCallback();
  

• 清理浏览器缓存：旧的Cookie或缓存可能干扰授权流程，清除后重新测试登录流程。

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