[BUG]: Supabase does not work with React Native Google signin

[Eirmas]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

Supabase describes in their docs for google signin on native:

Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:
   [react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin).

However this integration is not currently possible. react-native-google-signin/google-signin does not provide the raw nonce value that Supabase expects to be present. As of right now I cannot find any way of implementing google login with react native and supabase.

See linked issue here

To Reproduce

1. Create a Supabase project with Google signin provider
2. Create a React Native project
3. Install react-native-google-signin/google-signin and supabase
4. Try to integrate them.

[timdobranski]

I can confirm; getting error 'AuthApiError: Passed nonce and nonce in id_token should either both exist or not.' when using signInWithIdToken()

[nick-barth]

Yes, this is a pretty major blocker for us as well, has anyone found a workaround? I'm using this google auth capacitor library, and we also do not have access to the raw nonce.

[Ngineer101]

I'm experiencing the same issue. I followed all the steps described in this post: https://supabase.com/blog/native-mobile-auth

Using:

• For Google sign-in: https://github.com/react-native-google-signin/google-signin
• For Apple sign-in: https://github.com/invertase/react-native-apple-authentication

For both auth providers I get the same error: "Passed nonce and nonce in id_token should either both exist or not."

Neither Apple nor Google sign-in works. Any help would be much appreciated.

[nick-barth]

I'm experiencing the same issue. I followed all the steps described in this post: https://supabase.com/blog/native-mobile-auth

Using:

• For Google sign-in: https://github.com/react-native-google-signin/google-signin
• For Apple sign-in: https://github.com/invertase/react-native-apple-authentication

For both auth providers I get the same error: "Passed nonce and nonce in id_token should either both exist or not."

Neither Apple nor Google sign-in works. Any help would be much appreciated.

@Ngineer101 it appears that your library allows you to create the raw nonce, so after you've received a idToken you should be able to pass Supabase the raw nonce and it should match.

[kangmingtay]

Hey everyone, I chatted with @nick-barth through our support channel and was wondering about the following:

Seems like the issue here is that after completing the authentication with google, google returns an id token that contains a nonce in it. Based on what I've gathered from this thread, it seems like this nonce is being set by google and you don't have access to the raw value?
Is it possible for you to send us an example of the id token issued by google too? Also, it would be great if you can point us to the relevant google auth API endpoint that capacitor uses under the hood and we can investigate further.

[nick-barth]

@kangmingtay Looks like my capacitor plugin is using GoogleSignIn-OS under the hood, which has this issue, which also links this not-implemented PR. If I'm interpreting these correctly, the Nonce values are created by AppAuth, but as of yet, there is no way in the GoogleSignIn-OS library to supply the rawNonce. The react-native folks using React-Native-Google-Signin seem to have an identical open issue. Both have been known issues for over a year.

So from where I'm standing, the best solution would be to allow nonce passing in the underlying libraries. The quickest solution would be loosen the requirement in Supabase for identical nonces, but I'm not familiar enough with the risk of replay attacks to make that decision.

[Ngineer101]

I'm experiencing the same issue. I followed all the steps described in this post: https://supabase.com/blog/native-mobile-auth
Using:

• For Google sign-in: https://github.com/react-native-google-signin/google-signin
• For Apple sign-in: https://github.com/invertase/react-native-apple-authentication

For both auth providers I get the same error: "Passed nonce and nonce in id_token should either both exist or not."
Neither Apple nor Google sign-in works. Any help would be much appreciated.

@Ngineer101 it appears that your library allows you to create the raw nonce, so after you've received a idToken you should be able to pass Supabase the raw nonce and it should match.

@nick-barth do you have an example of how I can do this? I searched the Google sign-in docs and the React Native Google sign-in library docs (https://github.com/react-native-google-signin/google-signin) and I can't find an example of passing the raw nonce to Google when initiating the sign-in process. If this can be done I assume the issue would be solved, but I can't find how to do it.

[kangmingtay]

@nick-barth unfortunately the nonce is necessary to avoid replay attacks here as highlighted in this thread: google/GoogleSignIn-iOS#135

It would be impossible to tell whether the id token was sent by the same client that requested for it without a nonce.

This issue is blocked on this PR getting approved: google/GoogleSignIn-iOS#244

[johnryan]

This blog post makes it sound like this feature was implemented: https://supabase.com/blog/native-mobile-auth

That said I'm seeing the same nonce error. Curious how this could have ever worked as described in the post.

[dshukertjr]

@johnryan You can use the AppAuth plugin directly to make native auth work.

[johnryan]

@johnryan You can use the AppAuth plugin directly to make native auth work.

@dshukertjr That's helpful, but that post specifically calls out using react-native-google-signin to get this to work with react native (and is what I tried to use per the recommendation). Since that lib uses GoogleSignIn under the hood it's hard to understand how that could work. Maybe that blog post should be updated to remove that rec.

[vonovak]

hello, react native google sign in maintainer here.

you can use workarounds for both Android and iOS: react-native-google-signin/google-signin#1176 (comment)

Indeed, if you want to use the official SDK, this is blocked on Google's side here google/GoogleSignIn-iOS#244

I'm attempting to unblock that here openid/AppAuth-iOS#788 and then get back to the PR above

[sonipranjal]

Facing the same issue, would be great if this resolved soon! Thanks for all the work you do @vonovak & Supabase team🙏

[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

[wootsbot]

I'm experiencing the same issue. I followed all the steps described in this post: https://supabase.com/blog/native-mobile-auth

Using:

• For Google sign-in: https://github.com/react-native-google-signin/google-signin
• For Apple sign-in: https://github.com/invertase/react-native-apple-authentication

For both auth providers I get the same error: "Passed nonce and nonce in id_token should either both exist or not."

Neither Apple nor Google sign-in works. Any help would be much appreciated.

I confirm that with Apple sign-in: https://github.com/invertase/react-native-apple-it is necessary to ensure that the initial step has been completed. https://github.com/invertase/react-native-apple-authentication/blob/main/docs/INITIAL_SETUP.md

Unfortunately, I have not succeeded with Google.

[wootsbot]

This blog post makes it sound like this feature was implemented: https://supabase.com/blog/native-mobile-auth

That said I'm seeing the same nonce error. Curious how this could have ever worked as described in the post.

It seems that everything points to using the version provided to sponsors.

[mrkpatchaa]

EDIT: I didn't see your last comment for Apple.

@wootsbot expo-apple-authentication works well for Apple Id Token.

import * as AppleAuthentication from 'expo-apple-authentication'
...
  async function authWithApple() {
    try {
      const credential = await AppleAuthentication.signInAsync({
        requestedScopes: [
          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
          AppleAuthentication.AppleAuthenticationScope.EMAIL,
        ],
      })
      console.log(credential.user)
      const authResult = await supabase!.auth.signInWithIdToken({
        provider: 'apple',
        token: credential.identityToken!,
      })
      console.log(authResult)
      // signed in
    } catch (err) {
      // @ts-expect-error err unknown
      if (err.code === 'ERR_REQUEST_CANCELED') {
        // handle that the user canceled the sign-in flow
      } else {
        // handle other errors
      }
    }
  }
...

          <AppleAuthentication.AppleAuthenticationButton
            buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
            buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.WHITE_OUTLINE}
            cornerRadius={8}
            style={{ width: '100%', height: 45 }}
            onPress={authWithApple}
          />

[hf]

Fixed in: #1264