Next.js 13 集成 Supabase 登录后重定向问题求助

核心原因 #

登录后直接调用router.push('/')时，Supabase的session可能还未完成持久化（比如写入HTTP-only cookie），或者目标页面因Next.js 13的路由缓存机制，加载了未更新的session状态。

解决方案 #

1. 等待Session持久化完成再跳转

Supabase的signInWithPassword返回session后，需要确保session已写入cookie才能让服务器端识别。可以通过监听Supabase的authStateChange事件，确认session已同步后再执行跳转：

const handleSignIn = async (e: React.FormEvent) => {
  e.preventDefault();
  setStatus("loading");

  const { data, error } = await supabase.auth.signInWithPassword({
    email: form.email,
    password: form.password,
  });

  if (error) {
    toast.error(error.message, {
      className: "!bg-red-500 !text-white !border-red-500",
    });
    setStatus("not submitted");
    console.error(error);
    return;
  }

  // 监听auth状态变化，确认session已持久化
  const unsubscribe = supabase.auth.onAuthStateChange((event, session) => {
    if (event === "SIGNED_IN" && session) {
      toast.success(
        locale === "en" ? "Wait! We are redirecting you" : "¡Espera! Te estamos redirigiendo",
        { className: "!bg-electric-violet-500 !text-white !border-electric-violet-500" }
      );
      router.push("/");
      setStatus("submitted");
      unsubscribe(); // 取消监听
    }
  });
};

2. 禁用目标页面的路由缓存

如果目标页面是App Router下的组件，默认会被静态缓存，导致获取的session是旧值。在目标页面的组件文件顶部添加动态渲染配置：

export const dynamic = "force-dynamic"; // 强制每次请求都重新渲染

若目标页面是Server Component，确保使用createServerComponentClient并传入cookies来获取最新session：

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";

export default async function Home() {
  const supabase = createServerComponentClient({ cookies });
  const { data: { session } } = await supabase.auth.getSession();

  return <div>{session ? "已登录" : "未登录"}</div>;
}

3. 检查Supabase客户端配置

确保在App Router中使用的Supabase客户端正确开启session持久化，比如在app/utils/supabase.ts中：

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

export const createSupabaseClient = () =>
  createClientComponentClient({
    options: {
      auth: {
        persistSession: true, // 确保session持久化到cookie
      },
    },
  });

4. 强制页面刷新（备选方案）

如果上述方法无效，可以用window.location.href替代router.push，强制页面刷新以获取最新session：

// 替换router.push("/");
window.location.href = "/";

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