Next14中Supabase Google OAuth登录后自定义redirectUrl重定向问题

问题分析 #

邮箱登录能正常通过redirectUrl参数跳转，是因为登录流程完全在客户端完成，可直接读取参数并跳转；而Google OAuth登录需要经过第三方授权流程，必须将redirectUrl传递到Supabase的回调地址，再在回调页面完成最终跳转，之前的配置缺少了获取请求中的redirectUrl参数和回调页处理跳转这两个关键步骤。

解决方案步骤 #

1. 修改Google登录的Server Action，获取并传递redirectUrl

在Server Action中，先从请求URL里提取redirectUrl参数，再配置到redirectTo中：

export async function signInWithGoogle() {
  // 从当前请求中获取redirectUrl参数
  const request = await fetchRequest();
  const searchParams = new URL(request.url).searchParams;
  const redirectUrl = searchParams.get("redirectUrl") || "/";

  const supabase = createClient();
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      // 指向回调页并携带redirectUrl参数
      redirectTo: `${getURL()}auth/callback?redirectUrl=${encodeURIComponent(redirectUrl)}`,
    },
  });
  if (error) {
    console.error(error);
    return;
  }
  if (data?.url) {
    return redirect(data.url);
  }
}

2. 创建认证回调页面，处理最终跳转

新建app/auth/callback/page.js（或.tsx），在该页面完成OAuth登录后的状态校验与跳转：

"use client";

import { useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { createClient } from "@/utils/supabase/client";

export default function AuthCallback() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const redirectUrl = searchParams.get("redirectUrl") || "/";

  useEffect(() => {
    const supabase = createClient();

    const checkAuth = async () => {
      // 确认OAuth流程完成，获取会话信息
      const { data: { session } } = await supabase.auth.getSession();
      if (session) {
        // 登录成功，跳转到指定地址
        router.push(redirectUrl);
      }
    };

    checkAuth();
  }, [router, redirectUrl]);

  return <div>登录验证中...</div>;
}

3. 配置Supabase控制台的认证地址

进入Supabase控制台 → 项目设置 → 认证：

• Site URL：设置为你的站点根地址（本地http://localhost:3000，生产环境填你的域名）
• Redirect URLs：添加回调地址，比如http://localhost:3000/auth/callback和生产环境的对应地址，确保与redirectTo中的地址完全一致。

关键注意事项 #

• 必须对redirectUrl做encodeURIComponent编码，避免特殊字符导致参数传递失败
• 回调页面必须是客户端组件（加"use client"指令），因为需要使用useRouter和useSearchParams
• 确保Supabase控制台的Redirect URLs包含你的回调地址，否则会出现授权错误

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