Capacitor(React) iOS端集成Supabase Google认证遇阻求助

核心配置修正 #

• Supabase控制台重定向URL配置
  必须在Supabase项目的Authentication -> URL Configuration中添加两个iOS相关重定向URL：

  • capacitor://localhost
  • 你的应用Bundle ID://callback（替换为实际Bundle ID，例如com.yourteam.yourapp://callback）

• 代码适配重定向逻辑
  不要固定单一重定向地址，针对iOS场景做精准适配，同时保证流程参数正确：

  import { Capacitor } from '@capacitor/core';
  import { supabase } from '../path-to-your-supabase-client';
  
  const signInWithGoogle = async () => {
    const redirectTo = Capacitor.isNativePlatform() 
      ? Capacitor.getPlatform() === 'ios' 
        ? 'com.yourteam.yourapp://callback' // 替换为你的Bundle ID回调URL
        : 'capacitor://localhost'
      : window.location.origin;
  
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo,
        skipBrowserRedirect: false, // iOS端需保持默认值，确保跳转流程正常触发
      },
    });
  
    if (error) console.error('登录错误:', error);
  };
  

• iOS项目URL Scheme配置
  打开Xcode中的Info.plist，添加对应URL Scheme：

  1. 右键Info.plist → Add Row，选择URL types
  2. 展开Item 0，将URL Schemes设为你的应用Bundle ID
  3. 把Role设置为Editor

• 监听认证回调完成流程
  在App根组件中添加回调监听，让Supabase处理授权完成后的回调：

  import { App } from '@capacitor/app';
  
  App.addListener('appUrlOpen', ({ url }) => {
    if (url.startsWith('com.yourteam.yourapp://callback')) { // 替换为你的回调URL
      supabase.auth.handleOAuthCallback(url);
      // 可在此处添加登录成功后的逻辑，比如页面跳转
    }
  });
  

常见排查点 #

• 确认Supabase控制台的Google OAuth配置中，已正确填写iOS端对应的客户端ID（若单独创建）
• 查看Xcode控制台日志，搜索Supabase或OAuth关键词定位具体错误
• 检查iOS设备网络，确保能正常访问Google认证服务

内容的提问来源于stack exchange，提问作者Manarjan Singh Ghai