Google Sign-In using Supabase and React Native (Expo)
Tags: supabase, reactnative, tutorial
Published: 2022-11-02 20:13:05

This post will cover how to add Google Sign-In to your [Expo](expo.dev) + [Supabase](https://supabase.com/) 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](https://github.com/supabase/gotrue-js/issues/406) where other people have mentioned the problem.

If you don't have a Expo + Supabase project  you can follow this [supabase guide](https://supabase.com/docs/guides/with-expo). This example uses v2 of `supabase-js`. 

We'll start of by configuring Supabase and Google Cloud

## Google Cloud 
Go to [Google Cloud](https://console.cloud.google.com/) and create a new project if you haven't done so. When you have your Google Cloud Project setup go to the [Credentials page](https://console.cloud.google.com/apis/credentials). 

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. 


![Google Cloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpdq8nv527mp82kqj9q8.png)


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


![Google Provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id4fy16x0yelw5wymaoa.png)

### 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
![Supabase Redirect URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwpttlsyx61r8l8esctt.png)  

Now we are done configuring Supabase. 

### Code
If you followed the [supabase guide](https://supabase.com/docs/guides/with-expo) you should be pretty much good to go. We need to create a new functions to handle the Google Sign-In. 

```js
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`:
```jsx 
global.Buffer = require("buffer").Buffer;
// Or (depending on your preference / project)
import { Buffer } from 'buffer';
global.Buffer = Buffer;
```
Credit to [Dalibor Belic](https://dev.to/daliboru/comment/23m3i)

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](https://github.com/supabase/gotrue-js/issues/406) whose comments helped me put all the pieces together._