如何为@supabase/auth-ui-react配置自定义邮件确认跳转URL？

API 探路者

2026-7-13

解决@supabase/auth-ui-react邮件确认后跳转指定路径的问题

核心结论

可以实现，但需要确保控制台配置和Auth组件属性完全匹配，缺一不可。

正确配置步骤

1. Supabase 控制台配置

进入你的项目 → Authentication → URL Configuration

Site URL：填写应用的根域名（如本地开发的http://localhost:3000，生产环境的https://your-app.com），这是所有跳转逻辑的基础。
Redirect URLs：添加你要跳转的完整路径，比如http://localhost:3000/dashboard，注意要和后续组件中redirectTo的值完全一致，本地和生产环境的URL都要添加。

2. Auth 组件中配置 `redirectTo`

在组件中明确传递redirectTo属性，值为你要跳转的完整URL（必须和控制台Redirect URLs中的条目完全匹配）：

import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';
import { supabase } from '../path-to-your-supabase-client';

export default function AuthPage() {
  return (
    <Auth
      supabaseClient={supabase}
      appearance={{ theme: ThemeSupa }}
      redirectTo="http://localhost:3000/dashboard" // 与控制台Redirect URLs完全一致
      providers={['email']}
      // 其他配置项...
    />
  );
}

3. 排查常见坑点

URL 不匹配：控制台的Redirect URLs和组件的redirectTo必须完全一致，包括协议（http/https）、域名、路径，不能多斜杠或拼写错误。
邮件模板变量错误：默认的确认邮件模板使用{{ .ConfirmationURL }}变量，不要手动修改这个变量，它会自动携带redirect_to参数。
浏览器缓存：测试时建议使用无痕模式，避免旧配置缓存导致的问题。
客户端初始化冲突：如果在createClient时也设置了redirectTo，Auth组件的属性会覆盖它，但建议保持两者值一致避免混淆。