Login with Google

To enable Google Auth for your project, you need to set up a Google OAuth application and add the application credentials to your Supabase Dashboard.

Overview#

Setting up Google logins for your application consists of 3 parts:

Create and configure a Google Project on the Google Cloud Platform Console
Add your Google OAuth keys to your Supabase Project
Add the login code to your Supabase JS Client App

Access your Google Cloud Platform account#

Go to cloud.google.com.
Click on Sign in at the top right to log in.

Create a Google Cloud Platform Project#

Click on Select a Project at the top left.
- (Or, if a project is currently selected, click on the current project name at the top left.)
Click New Project at the top right.
Fill in your app information, then click Create.
- (This can take a few minutes.)
This should bring you to the dashboard for your new project.

Create the OAuth Keys for your project#

From your project's dashboard screen:

In the search bar at the top labeled Search products and resources type OAuth.
Click on OAuth consent screen from the list of results.
On the OAuth consent screen page select External.
Click Create.

Edit your app information#

On the Edit app registration page fill out your app information.
Click Save and continue at the bottom.

Find your callback URL#

The next step requires a callback URL, which looks like this:

https://<project-ref>.supabase.co/auth/v1/callback

Go to your Supabase Project Dashboard
Click on the Authentication icon in the left sidebar
Click on Providers under the Configuration section
Click on Google from the accordion list to expand and you'll find your Redirect URL, you can click Copy to copy it to the clipboard

Create your Google credentials#

Click Credentials at the left to go to the Credentials page on the Google Cloud Platform console.
Click Create Credentials near the top then select OAuth client ID
On the Create OAuth client ID page, select your application type. If you're not sure, choose Web application.
Fill in your app name.
At the bottom, under Authorized redirect URIs click Add URI.
Enter your callback URI under Authorized redirect URIs at the bottom.
Enter your callback URI in the Valid OAuth Redirect URIs box.
Click Save Changes at the bottom right.
Click Create.

Copy your new OAuth credentials

A box will appear called OAuth client created.
Copy and save the values under Your Client ID and Your Client Secret.

Enter your Google credentials into your Supabase Project#

Go to your Supabase Project Dashboard
In the left sidebar, click the Authentication icon (near the top)
Click on Providers under the Configuration section
Click on Google from the accordion list to expand and turn Google Enabled to ON
Enter your Google Client ID and Google Client Secret saved in the previous step
Click Save

When your user signs in, call signInWithOAuth() with google as the provider:

async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
  })
}

You can view the full list of query parameters and their descriptions here.

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

async function signout() {
  const { error } = await supabase.auth.signOut()
}

Obtain the provider refresh token#

Google OAuth2.0 doesn't return the provider_refresh_token by default. If you need the provider_refresh_token returned, you will need to add additional query parameters:

async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      queryParams: {
        access_type: 'offline',
        prompt: 'consent',
        hd: 'domain.com', // google will also allow OAuth logins to be restricted to a specified domain using the 'hd' parameter
      },
    },
  })
}

Resources#

Edit this page on GitHub