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.
Step 1
2

Click the APIs & Services menu.
Step 2
3

Click the Credentials menu.
Step 3
4

Then click the Create Credentials button.
  • Please select OAuth client ID
Step 4
5

But you need to Configure Consent Screen first.
Step 5
6

Go to Supabase Dashboard > Authentication > Providers
  • Select Google
    Step 6
7

Step 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.
Step 8
9

Step 9
10

Step 10
11

Step 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. 🎉