React Native集成Supabase谷歌授权：重定向失败及会话不更新问题

1. 跳转到localhost的原因 #

Supabase OAuth默认的回调URL是本地开发的http://localhost:3000/auth/callback，如果未在Supabase后台配置匹配的Expo应用深链接，授权成功后会自动 fallback 到这个默认地址，导致跳转localhost。

2. 修复重定向与浏览器自动关闭 #

步骤1：配置Supabase后台重定向URL #

• 进入Supabase项目控制台 → Authentication → URL Configuration
• 在Redirect URLs中添加两类地址：
  • 开发环境：exp://你的本地IP:8081（从Expo终端复制开发服务器地址）
  • 生产环境：你的应用slug://（查看app.json中的slug字段）
• 保存配置

步骤2：正确生成授权链接与重定向地址 #

手动指定redirectTo参数，确保和Supabase后台配置完全一致：

import { Platform } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import { supabase } from '../path-to-your-supabase-client';

const signInWithGoogle = async () => {
  const redirectUrl = Platform.OS === 'ios' 
    ? '你的应用slug://' 
    : 'exp://你的本地IP:8081';

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: { redirectTo: redirectUrl }
  });

  if (error) {
    // 处理错误逻辑
    return;
  }

  if (data.url) {
    const result = await WebBrowser.openAuthSessionAsync(data.url, redirectUrl);
    // 授权成功后手动刷新会话并关闭浏览器
    if (result.type === 'success') {
      await supabase.auth.refreshSession();
      await WebBrowser.dismissBrowser();
    }
  }
};

步骤3：添加深链接监听 #

在App根组件中监听深链接回调，处理授权后的会话同步：

import { Linking, useEffect } from 'react-native';
import { supabase } from '../path-to-your-supabase-client';

function App() {
  // ... 你的组件状态

  useEffect(() => {
    const handleDeepLink = async (url) => {
      const targetUrl = typeof url === 'object' ? url.url : url;
      // 匹配我们配置的深链接前缀
      if (targetUrl.startsWith('你的应用slug://') || targetUrl.startsWith('exp://你的本地IP:8081')) {
        // 让Supabase处理回调中的会话信息
        await supabase.auth.onAuthStateChange((event, session) => {
          if (event === 'SIGNED_IN') {
            setSession(session);
          }
        });
        await WebBrowser.dismissBrowser();
      }
    };

    // 监听实时深链接
    const subscription = Linking.addEventListener('url', handleDeepLink);
    // 初始化时检查是否有未处理的深链接
    Linking.getInitialURL().then(handleDeepLink);

    return () => subscription.remove();
  }, []);

  // ... 组件其余逻辑
}

3. 修复客户端会话不更新问题 #

• 移除单次getSession调用，改为授权成功后主动调用refreshSession()拉取最新会话
• 修正onAuthStateChange的订阅依赖，确保挂载时正确监听：

useEffect(() => {
  const { subscription } = supabase.auth.onAuthStateChange((_event, session) => {
    console.log('状态变更:', _event, session);
    setSession(session ?? null);
  });

  return () => subscription.unsubscribe();
}, [supabase]);

关键注意事项 #

• 开发环境必须用电脑的实际IP（不能用localhost，手机和电脑不在同一本地域名下）
• 所有重定向URL必须在Supabase后台配置，否则会被谷歌OAuth拦截
• openAuthSessionAsync的第二个参数必须和signInWithOAuth的redirectTo完全一致

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