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

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.

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 14
  • Comments: 18 (4 by maintainers)

Most upvoted comments

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.

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.

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

@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.

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

Using:

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.

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}
          />

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

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

@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.

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.