supabase signInWithIdToken not working: Nonces mismatch

[saadHeisentech]

// using this library for decoding
import jwtDecode from 'jwt-decode'

const handleLogin = async () => {
    setLoading(true);
    try {
      await GoogleSignin.hasPlayServices();
      const u = await GoogleSignin.signIn();
      // get the nonce value
      const nonce = jwtDecode<any>(u.idToken!);
      const { nonce: nonceVal } = nonce!;
      // login to supabase
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'google',
        token: u.idToken!,
        nonce: nonceVal,
      });
      console.log('supabase data:', data);
      if (error) {
        console.log('Supabase error:', error);
      }
      if (data.user) {
        // do something
      }
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

[MexJason]

Did you try to also pass the access token in the signInWithIdToken function?

[He1nr1chK]

Did you try to also pass the access token in the signInWithIdToken function?

Passing access_token along with id_token does not solve the error: [AuthApiError: Passed nonce and nonce in id_token should either both exist or not.]

[sunnyysetia]

+1 having the same issue :(

[furkand]

is there any solution I am having exactly same issue

[timdobranski]

I've been blocked on this for a while now. My code is nearly identical to the OP. I'm getting the nonce from jwt-decode, but passing it in the signInWithIdToken() call only changes the error from 'Passed nonce and nonce in id_token should either both exist or not' to nonces mismatch. Anyone have any suggestions or solutions?

It seems like the signInWithIdToken() isn't behaving as expected, or I'm missing something.

[Eirmas]

To my understanding Supabase expects the nonce to be the decoded version of the nonce present in the ID token received from google, hence why passing the nonce from the ID token doesnt work as it will get its hash and match them for equality.
Unfortunately I cannot find any way to get the nonce before its encoded in the ID token. Any ideas?

/** If the ID token contains a `nonce` claim, then the hash of this value is compared to the value in the ID token. */
nonce?: string

[timdobranski]

Hate to say it, but it doesn't look like this will work currently. Supabase requires a nonce if it's in the token, and react native doesn't expose the nonce in its current implementation. Unless I've got something wrong, native signin on iOS with supabase and react-native isn't possible at this time. Either supabase has to modify the endpoint (unlikely) or react-native has to expose the nonce (unlikely any time soon, I assume).

[vonovak]

Hello and thanks for reporting,
I did not test this, and it may not work, but the next version of the google sign in library obtainable for sponsors here allows passing custom nonce. Maybe that will work.
edit: it only allows that on Android

edit2: I tested this and it works, can be used like this:

 const nonce = Crypto.randomUUID()
 const hashedNonce = await digestStringAsync(CryptoDigestAlgorithm.SHA256, nonce)
 const userInfo = await GoogleOneTapSignIn.signIn({
      webClientId,
      nonce: hashedNonce,
    })

Thank you 🙂

[vonovak]

quick update: passing custom nonce works as outlined in the post above, for Android.

For iOS, I confirm that a valid idToken for supabase can be obtained using https://docs.expo.dev/versions/latest/sdk/auth-session/ (edit: no need to use any of the deprecated APIs)

edit2: please note rn-google sign in does not expose nonce option because the underlying native sdk doesn't expose it either

related issue: supabase/gotrue#1205 (comment)

[sonipranjal]

Facing the same issue AuthApiError: Passed nonce and nonce in id_token should either both exist or not.

Any workaround?

[sonipranjal]

Expo auth session for Google auth is deprecated: https://docs.expo.dev/versions/latest/sdk/auth-session/#googleauthrequestconfig

[sonipranjal]

Hi everyone, I got it working by using the browser

Made a gist for everyone who is struggling to solve this:

https://gist.github.com/sonipranjal/f4a66f35924ede2e2f4a8d5b66199857

[codypl]

I am having the same problem, it seems like @react-native-google-signin/google-signin and supabase are not compatible because there is currently no way to get the nonce value expected by supabase signInWithIdToken method

[alexandreandriesse]

Same problem here, the library is useless if we can't get, or pass, the nonce value...

[erdemgonul]

same problem here...

[vonovak]

hello everyone, I'm going to lock this discussion because there's nothing new that can be added to it at this point.

To summarize (basically repeating this comment): to provide custom nonce:

on Android, you need to use one-tap sign in which is available for sponsors.
on iOS, it can be implemented using expo's authSession (it's not trivial, but can be done - you can hire me if you're unsure how to do it), or using the workaround posted above.

Thank you! 🙂