Home

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:

Access your Google Cloud Platform account#

Google Developer Portal.

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

Add login code to your client app#

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


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

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:


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

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:


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

Resources#