Google Sign-In using Supabase and React Native (Expo)

This post will cover how to add Google Sign-In to your Expo + Supabase project using expo-auth-session.

Disclaimer: It seems like this does not work with Expo SDK 48 as of now, but should still work versions below (I'm still on 47). Keep an eye on this GitHub Issue where other people have mentioned the problem.

If you don't have a Expo + Supabase project you can follow this supabase guide. This example uses v2 of supabase-js.

We'll start of by configuring Supabase and Google Cloud

Google Cloud

Go to Google Cloud and create a new project if you haven't done so. When you have your Google Cloud Project setup go to the Credentials page.

1. If you see a prompt to "Configure Consent Screen", click that button and follow the instructions to finish the setup.
2. Click on "Create Credentials" that should be located at the top of the screen and select "OAuth Client ID".
3. In the "Application type" field select "Web application" and give your application a name.
4. Under "Authorized redirect URIs" add https://{YOUR_PROJECT_REFERENCE_ID}.supabase.co/auth/v1/callback. Your reference ID can be found under Settings -> General in your Supabase project dashboard, click SAVE
5. Click on your newly created credential under OAuth 2.0 Client IDs, in the top right you should see Client ID and Client secret. Copy and save these because they will be needed when we configure Supabase.

Supabase

Activate Google Provider

In your Supabase project dashbarod go to Authentication -> Providers
https://app.supabase.com/project/{YOUR_PROJECT_REFERENCE_ID}/auth/providers.

1. Scroll down to Google and open it.
2. Add the Client ID and Client Secret you saved from step 5 in configuring Google Cloud.
3. Press Save.

Now the Google provider should be configured in your Supabase project.

Add Redirect

Go to your Supabase project and navigate to Authentication -> URL Configuration
https://app.supabase.com/project/{YOUR_PROJECT_REFERENCE_ID}/auth/url-configuration

Click on Add URL and add exp://{LOCAL_IP_ADDRESS}:19000/--/auth/callback

Mine looks like

Now we are done configuring Supabase.

Code

If you followed the supabase guide you should be pretty much good to go. We need to create a new functions to handle the Google Sign-In.

import { makeRedirectUri, startAsync } from 'expo-auth-session';
import { supabase, supabaseUrl } from './supabase';

export const googleSignIn = async () => {
  // This will create a redirectUri
  // This should be the URL you added to "Redirect URLs" in Supabase URL Configuration
  // If they are different add the value of redirectUrl to your Supabase Redirect URLs
  const redirectUrl = makeRedirectUri({
    path: '/auth/callback',
  });

  // authUrl: https://{YOUR_PROJECT_REFERENCE_ID}.supabase.co
  // returnURL: the redirectUrl you created above.
  const authResponse = await startAsync({
    authUrl: `${supabaseUrl}/auth/v1/authorize?provider=google&redirect_to=${redirectUrl}`,
    returnUrl: redirectUrl,
  });

  // If the user successfully signs in
  // we will have access to an accessToken and an refreshToken
  // and then we'll use setSession (https://supabase.com/docs/reference/javascript/auth-setsession)
  // to create a Supabase-session using these token
  if (authResponse.type === 'success') {
    supabase.auth.setSession({
      access_token: authResponse.params.access_token,
      refresh_token: authResponse.params.refresh_token,
    });
  }
};

Now you should be all good to go! Call this function when a user wants to sign in with Google.

You might need to add the following import to your App.tsx:

global.Buffer = require("buffer").Buffer;
// Or (depending on your preference / project)
import { Buffer } from 'buffer';
global.Buffer = Buffer;

Credit to Dalibor Belic

That's it! Leave a comment if you find any errors or if you have any questions.

I want to give credit to the people in this GitHub Issue whose comments helped me put all the pieces together.