Sign in with Google on Expo React Native Web Client

First make sure you have completed the Quickstart page.

  • We need Supabase to be setup.
1

First of all, you need to create a new project in the Google Cloud Console if you donโ€™t have one already.

2

Click the APIs & Services menu.

3

Click the Credentials menu.

4

Then click the Create Credentials button.

  • Please select OAuth client ID
5

But you need to Configure Consent Screen first.

6

Go to Supabase Dashboard > Authentication > Providers

  • Select Google
7

8

  1. Then you need to select Web Application first.
  2. Fill the form.
  3. Paste your https://<project-ref>.supabase.co/auth/v1/callback in the Authorized redirect URIs field.
  4. Click the Save button.
9

10

11

12

End of the setup.

  • You need to add the GOOGLE_OAUTH_CLIENT_ID to the .env file.
#* Google OAuth keys for the app
EXPO_PUBLIC_GOOGLE_OAUTH_CLIENT_ID=some-id.apps.googleusercontent.com
EXPO_PUBLIC_GOOGLE_OAUTH_IOS_CLIENT_ID=some-id.apps.googleusercontent.com             
EXPO_PUBLIC_GOOGLE_OAUTH_ANDROID_CLIENT_ID=some-id.apps.googleusercontent.com
13

You have successfully set up Google OAuth for your Expo React Native Web Client. ๐ŸŽ‰