Supabase Flutter与JS SDK回调URL配置问题求助

核心问题 #

你碰到的是Supabase OAuth重定向配置的典型跨端矛盾：Site URL仅支持单值导致两端无法同时生效，逗号分隔多URL的方式不被系统认可，代码端单独指定redirectTo但控制台配置未匹配，最终只能用两个Supabase项目绕开，却带来了数据库维护的额外负担。

正确解决方案步骤 #

1. 控制台Redirect URLs配置（关键） #

别再纠结Site URL的多值问题，Supabase的OAuth重定向逻辑主要依赖Redirect URLs列表，而非Site URL：

• 进入Supabase控制台 → 目标项目 → Authentication → URL Configuration
• 在Redirect URLs中添加所有需要的重定向地址：
  • 移动端深链接：io.appname://appname.com/auth/verify
  • Web开发地址：http://localhost:4200/auth/verify
  • （后续上线时补充生产环境Web地址，比如https://appname.com/auth/verify）
• Site URL可以填写任意合法地址（比如生产环境Web地址），它主要用于密码重置、魔法链接等邮件类跳转，不影响OAuth重定向流程。

2. 代码端保持分端指定redirectTo #

你之前的代码写法没问题，继续保留两端各自的redirectTo配置，确保每个值都在控制台的Redirect URLs列表内：

Flutter端：

await Supabase.instance.client.auth.signInWithOAuth(
    Provider.google,
    redirectTo: 'io.appname://appname.com/auth/verify',
);

Angular Web端：

await Supabase.connection.auth.signInWithOAuth(
    'google',
    {
      redirectTo: 'http://localhost:4200/auth/verify',
    },
);

（注：Angular代码里的options:是冗余项，直接传配置对象即可）

3. 验证与调试要点 #

• 确认Redirect URLs列表里没有拼写错误，包括协议（http:///https:///io.appname://）和路径
• 移动端测试前，确保深链接配置正确：
  • Android：在AndroidManifest.xml中添加对应的intent-filter
  • iOS：在Info.plist中配置LSApplicationQueriesSchemes和Universal Links（如果用域名绑定的深链接）
• 测试OAuth流程时，查看浏览器/APP的跳转地址，确认回调地址是你指定的redirectTo值，没有被Supabase默认地址覆盖

备选方案（如果上述配置仍有问题） #

如果控制台的Redirect URLs列表还是无法同时生效，可以用一个中间重定向服务：

1. 部署一个简单的云函数（比如Vercel Edge Function、Cloudflare Worker），逻辑是根据请求的User-Agent判断是移动端还是Web端，然后跳转到对应的重定向地址
2. 将这个云函数的地址（比如https://your-redirect-service.com）添加到Supabase的Redirect URLs列表，并设置为两端代码的redirectTo值
3. 云函数示例逻辑（伪代码）：

export default function handler(req) {
  const userAgent = req.headers.get('user-agent');
  if (userAgent.includes('Android') || userAgent.includes('iOS')) {
    return Response.redirect('io.appname://appname.com/auth/verify');
  } else {
    return Response.redirect('http://localhost:4200/auth/verify');
  }
}

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