Supabase Auth OAuth的redirectTo在移动端失效问题求助

以下是针对你遇到的问题的排查和解决步骤：

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

确保移动端的深链接地址com.example.react://login-callback/已精确添加到Supabase项目的认证 > URL配置 > 重定向URL列表中，注意要和代码中使用的地址完全一致（包括结尾的斜杠）。不要只添加Web端地址，移动端的每个scheme都需要单独配置。

2. 检查OAuth提供商的后台配置（以Apple为例） #

登录Apple Developer后台，找到你的App ID，进入Sign In with Apple配置项，确保将Supabase的OAuth回调地址（通常是https://<你的Supabase项目ID>.supabase.co/auth/v1/callback）添加到Return URLs中。同时，确认没有在提供商后台强制设置固定的重定向地址，这会覆盖你传递的redirectTo参数。

3. 完善Supabase Auth的初始化配置 #

在React Native项目中初始化Supabase时，需要明确指定deepLinkRedirectUri参数，确保Auth模块能正确识别移动端的回调地址：

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  '你的Supabase URL',
  '你的匿名密钥',
  {
    auth: {
      deepLinkRedirectUri: 'com.example.react://login-callback/',
    },
  }
);

4. 替换Linking.openURL为InAppBrowser #

直接使用系统浏览器打开OAuth链接可能会导致缓存或重定向规则冲突，建议使用React Native的InAppBrowser库在App内打开认证页面：

1. 安装依赖：

npm install react-native-inappbrowser-reborn
# 或 yarn add react-native-inappbrowser-reborn

2. 修改登录函数：

import InAppBrowser from 'react-native-inappbrowser-reborn';

export const signInWithApple = async () => {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "apple",
    options: {
      redirectTo: redirectTo,
    },
  });

  if (error !== null) {
    console.log(error?.message);
    return "error";
  } else {
    console.log(data);
    // 使用InAppBrowser打开链接
    if (await InAppBrowser.isAvailable()) {
      await InAppBrowser.open(data.url, {
        dismissButtonStyle: 'cancel',
        preferredBarTintColor: '#fff',
        preferredControlTintColor: '#000',
      });
    } else {
      Linking.openURL(data.url);
    }
    return "success";
  }
};

5. 检查iOS Info.plist的完整配置 #

除了CFBundleURLSchemes，还需要添加以下配置以支持Apple登录和深链接：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>appleid</string>
  <string>appleauth</string>
</array>
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

同时确认CFBundleURLTypes的配置正确，示例：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.example.react</string>
    </array>
  </dict>
</array>

6. 清除缓存并测试 #

尝试清除手机系统浏览器的缓存，卸载并重装App，避免旧的重定向缓存影响测试结果。

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