React Native iOS模拟器Supabase Facebook登录重定向问题求助

1. 配置Supabase控制台的重定向URL #

在Supabase控制台的Authentication > URL Configuration页面，将你的iOS App自定义URL Scheme添加到Redirect URLs列表中。格式为你的URL Scheme://，例如你的App URL Scheme是com.yourteam.yourapp，就填入com.yourteam.yourapp://。

2. 配置iOS项目的URL Scheme #

打开Xcode，进入你的项目Target，找到Info > URL Types：

• 点击+添加新的URL Type
• 在URL Schemes栏填入你刚才设置的Scheme（如com.yourteam.yourapp）
• Identifier可填写与App Bundle ID一致的内容

3. 修改登录代码 #

在signInWithOAuth调用中指定redirectTo参数，明确登录完成后的跳转目标，同时添加状态监听获取token：

登录代码调整 #

const onHandleLogin = async () => {
    const {data, error} = await supabase.auth.signInWithOAuth({
      provider: 'facebook',
      options: {
        redirectTo: 'com.yourteam.yourapp://' // 替换为你的自定义URL Scheme
      }
    });

    if (error) {
      console.error('登录失败:', error);
      return;
    }

    if (data.url) {
      const supported = await Linking.canOpenURL(data.url);
      supported ? await Linking.openURL(data.url) : console.error('无法打开登录链接');
    }
  };

监听登录状态获取token #

登录完成跳转回App后，Supabase会自动处理会话，你可以通过状态监听获取token信息：

// 示例：在React Native组件中挂载监听
import { useEffect } from 'react';

useEffect(() => {
  const authSubscription = supabase.auth.onAuthStateChange((event, session) => {
    if (session) {
      console.log('登录成功，Token:', session.access_token);
      // 这里可处理用户信息或token存储逻辑
    }
  });

  return () => authSubscription?.unsubscribe();
}, []);

4. 补充Facebook开发者平台配置 #

在Facebook开发者平台的应用设置中，将Supabase提供的OAuth回调URL（可在Supabase控制台Authentication > Providers > Facebook页面查看）添加到Valid OAuth Redirect URIs列表，确保Facebook登录请求能正常回调到Supabase服务。

内容的提问来源于stack exchange，提问作者Yasin Beyazlı