React Native Expo集成Supabase与Facebook登录：Nonce不匹配求助

在React Native Expo应用中，使用Supabase和react-native-fbsdk-next实现Facebook认证时，参考Google认证流程适配后，调用signInWithIdToken出现AuthApiError: Nonces mismatch错误——尽管控制台显示传入的nonce与从getAuthenticationTokenIOS获取的nonce完全一致。

当前使用的Facebook登录函数：

const facebookSignIn = async () => {
  try {
    const res = await LoginManager.logInWithPermissions(
      ['public_profile'],
      'limited'
    );

    if (res.isCancelled) {
      throw new Error('User cancelled the login process');
    } else if (Platform.OS === 'ios') {
      const res = await AuthenticationToken.getAuthenticationTokenIOS();

      if (res) {
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'facebook',
          token: res.authenticationToken,
          nonce: res.nonce,
        });

        console.log({ data, error });
      } else {
        throw new Error('No auth token present');
      }
    }
  } catch (error: any) {}
};

• 手动管控nonce生成与传递：Facebook自动生成的nonce无法匹配Supabase的校验逻辑，必须手动生成并贯穿登录流程：
  1. 登录前用expo-crypto生成随机nonce（避免重复）
  2. 调用LoginManager.logInWithPermissions时传入该nonce
  3. 调用Supabase的signInWithIdToken时，使用手动生成的nonce而非Facebook返回的nonce

修改后的代码示例：

import * as Crypto from 'expo-crypto';

const facebookSignIn = async () => {
  try {
    // 手动生成随机nonce
    const generatedNonce = Crypto.randomUUID();
    
    const res = await LoginManager.logInWithPermissions(
      ['public_profile'],
      'limited',
      { nonce: generatedNonce } // 传递自定义nonce
    );

    if (res.isCancelled) {
      throw new Error('User cancelled the login process');
    } else if (Platform.OS === 'ios') {
      const authTokenRes = await AuthenticationToken.getAuthenticationTokenIOS();

      if (authTokenRes) {
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'facebook',
          token: authTokenRes.authenticationToken,
          nonce: generatedNonce, // 使用手动生成的nonce
        });

        console.log({ data, error });
      } else {
        throw new Error('No auth token present');
      }
    }
  } catch (error: any) {
    console.error('Login error:', error);
  }
};

• 核对Facebook开发者配置：确认应用的平台配置（包名、签名哈希）正确，且已启用Authentication Token权限
• 验证令牌有效性：确保获取的authenticationToken未被篡改，可通过Facebook官方工具校验其内容
• 检查Supabase配置：确认Supabase控制台中Facebook提供商已启用，且App ID/Secret与Facebook后台完全一致

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