Supabase Auth UI：redirectTo仅对OAuth生效，邮箱登录无法跳转求解决方案

针对你遇到的OAuth登录正常跳转、邮箱密码登录无法跳转的问题，可以通过以下几种方式解决：

1. 手动监听Auth状态变化实现跳转 #

Supabase Auth UI的redirectTo参数对邮箱/密码登录的支持有限，你可以直接监听认证状态变化，在用户登录成功后手动触发页面跳转：

修改你的LoginPage组件，添加状态监听逻辑：

import { useSupabaseClient } from "@supabase/auth-helpers-react";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { useEffect } from "react";

export default function LoginPage() {
  const supabase = useSupabaseClient();

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
      // 当用户登录成功时跳转
      if (event === "SIGNED_IN" && session) {
        window.location.href = "http://localhost:3001/loginrouting";
      }
    });

    // 组件卸载时移除监听
    return () => {
      authListener?.unsubscribe();
    };
  }, [supabase]);

  return (
    <div className="items-center justify-center mx-12 h-screen">
      <Auth
        redirectTo="http://localhost:3001/loginrouting"
        supabaseClient={supabase}
        appearance={{ theme: ThemeSupa }}
        theme="default"
        providers={["google"]}
      />
    </div>
  );
}

2. 验证Supabase站点URL配置 #

确保你设置的redirectTo URL已添加到Supabase项目的合法跳转列表中：

• 登录Supabase控制台，进入你的项目
• 导航到Authentication > URL Configuration
• 在Site URL或Additional Redirect URLs中添加http://localhost:3001/loginrouting
• 保存更改后重新测试登录流程

3. 排查登录响应状态 #

你可以在浏览器控制台中查看Supabase邮箱登录的请求响应，确认会话是否正常创建。如果会话生成成功但未触发自动跳转，手动监听状态的方法是最可靠的替代方案。

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