RN Expo Facebook Auth Nonces Mismatch

[adamsucharda99]

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.

[eybel]

Hello! I just started a brand new 2024 expo app and created my Development (profile) builds. I was able to see the google button and the popup google window that shows my account to login, and after I press my account it seems that it actually goes through and I see in my terminal that I get all the Google Auth info (token, email, name, etc...) but I get these errors* from the supabase.auth.signInWithIdToken({}):

*error messages:
data: {"session": null, "user": null}
error: [AuthApiError: Passed nonce and nonce in id_token should either both exist or not.]

`
import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from "@react-native-google-signin/google-signin";
import { supabase } from "@/lib/supabaseClient";

const GoogleSignInButtonProvider = () => {
GoogleSignin.configure({
scopes: ["https://www.googleapis.com/auth/drive.readonly"],
webClientId:
"XXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com",
iosClientId:
"XXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com",
});

const onGoogleSignInHandler = async () => {

try {
  await GoogleSignin.hasPlayServices();

  const userInfo = await GoogleSignin.signIn();

  if (userInfo.idToken) {

    const { data, error } = await supabase.auth.signInWithIdToken({
      provider: "google",
      token: userInfo.idToken,
    });

  } else {
    throw new Error("no ID token present!");
  }
} catch (error: any) {
  if (error.code === statusCodes.SIGN_IN_CANCELLED) {
    // user cancelled the login flow
  } else if (error.code === statusCodes.IN_PROGRESS) {
    // operation (e.g. sign in) is in progress already
  } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
    // play services not available or outdated
  } else {
    // some other error happened
  }
}

};
return (

);
};

export default GoogleSignInButtonProvider;
`

A) The only way I was able to fix this is by switch the option SKIP NONCE to TRUE.... but I am not sure if I am supposed to do that, it says its less secure.
B) If I submit a random string. I get nonce mismatch

I am testing it in an IOS simulator.

[ayazalphasquad]

Hi @eybel - I'm also getting the same issue. Did you find some solution ?

[hugoh59]

Did you figure it out, I'm also struggling with this.