React Native Expo Facebook Auth with Supabase and react-native-fbsdk-next: Nonces Mismatch

47 Views Asked by At

I'm trying to implement Facebook authentication in a React Native Expo app using Supabase and react-native-fbsdk-next. I'm currently following the Google auth implementation guide provided by Supabase and adjusting it for Facebook, as the Supabase documentation doesn't provide clear instructions on how to implement Facebook auth with Expo. According to the Supabase API docs, the signInWithIdToken method accepts 'facebook' as a provider option, just like 'google'.

Here's the function I'm using for Facebook sign-in:

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) {}
};

When I run this function, I get an AuthApiError: Nonces mismatch error. However, when I log the nonce to the console, the nonce provided to signInWithIdToken and the nonce I got from getAuthenticationTokenIOS are the same value.

I'm not sure why I'm getting this error or how to fix it. Can anyone guide me on how this login function should be done? Any help would be greatly appreciated.

0

There are 0 best solutions below