Home

Login with Google

Supabase Auth supports Sign in with Google on the web, native Android applications and Chrome extensions.

Overview#

To support Sign in with Google you need to configure the Google provider in the Supabase dashboard for your project.

There are three general ways to use Sign in with Google, depending on the application you're building:

In some cases you're able to use the OAuth flow within web-based native apps such as with React Native, Expo or other similar frameworks. It is best practice to use native Sign in with Google capabilities whenever possible.

Before you can use Sign in with Google, you need to obtain a Google Cloud Platform account and have a project ready or create a new one.

Using the OAuth flow for web#

Sign in with Google's OAuth flow is designed for web or browser based sign in methods. It can be used in web-based apps as well as in websites, though sometimes it is worthwhile considering using One Tap login directly.

Behind the scenes, Supabase Auth uses the Google OAuth 2.0 APIs, which are OpenID Connect certified, to perform the authentication.

To initiate sign in, you can use the signInWithOAuth() method from the Supabase JavaScript library:


_10
supabase.auth.signInWithOAuth({
_10
provider: 'google',
_10
})

This call takes the user to Google's consent screen. When the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session.

You can additionally extract the provider_token from the session (on initial login only) which is the OAuth 2.0 access token issued by Google that grants your application access to the Google services for the authenticated users. Please store this token in local storage, cookies or in your database or server.

Google does not send out a refresh token by default, so you will need to pass parameters like these to signInWithOAuth() in order to extract the provider_refresh_token:


_10
const { data, error } = await supabase.auth.signInWithOAuth({
_10
provider: 'google',
_10
options: {
_10
queryParams: {
_10
access_type: 'offline',
_10
prompt: 'consent',
_10
},
_10
},
_10
})

Configuration #

To use the OAuth 2.0 flow, you will require the following information:

  1. Obtain OAuth credentials for your Google Cloud project in the Credentials page of the console. When creating a new credential, choose Web application. In Authorized redirect URIs enter https://<project-id>.supabase.co/auth/v1/callback. This URL will be seen by your users, and you can customize it by configuring custom domains.
  2. Configure the OAuth Consent Screen. This information is shown to the user when giving consent to your app. Within Authorized domains make sure you add your Supabase project's domain <project-id>.supabase.co. Configure the non-sensitive scopes by making sure the following ones are selected: .../auth/userinfo.email, .../auth/userinfo.profile, openid. If you're selecting other sensitive scopes, your app may require additional verification. In those cases, it's best to use custom domains.
  3. Finally, add the client ID and secret from step 1 in the Google provider on the Supabase Dashboard.

Using personalized sign-in buttons, One Tap or automatic sign-in#

Most web apps and websites can utilize Google's personalized sign-in buttons, One Tap or automatic sign-in for the best user experience.

Under the hood, these sign in methods end with an identity token being issued by Sign in with Google for Web. You can then use the supabase.auth.signInWithIdToken() method to immediately issue an access and refresh tokens for the user, without needing to build any additional UIs or flows.

To get started, you can use the HTML Code Generator to customize the look, feel, features and behavior of the Sign in with Google button. Make sure you pick the Swap to JavaScript callback option and name the function that will receive a CredentialResponse when sign in completes.

For example, this HTML code shows a typical Sign in with Google button:


_20
<div
_20
id="g_id_onload"
_20
data-client_id="<client ID>"
_20
data-context="signin"
_20
data-ux_mode="popup"
_20
data-callback="handleSignInWithGoogle"
_20
data-nonce=""
_20
data-auto_select="true"
_20
data-itp_support="true"
_20
></div>
_20
_20
<div
_20
class="g_id_signin"
_20
data-type="standard"
_20
data-shape="pill"
_20
data-theme="outline"
_20
data-text="signin_with"
_20
data-size="large"
_20
data-logo_alignment="left"
_20
></div>

When the user signs in, the handleSignInWithGoogle function will be called:


_10
async function handleSignInWithGoogle(response) {
_10
const { data, error } = await supabase.auth.signInWithIdToken({
_10
token: response.credential,
_10
nonce: 'NONCE', // must be the same one as provided in data-nonce (if any)
_10
})
_10
}

Use of nonce is recommended, though optional. Make sure each nonce is generated randomly and available both in the data-nonce attribute as well as in the handleSignInWithGoogle callback function; otherwise the ID token will not be accepted.

Important Note on Nonce Validation#

Supabase Auth expects the nonce in Google's ID token to be hashed (specifically with SHA-256 and represented as a hexadecimal string).

To succeed with nonce validation, you will need to provide a hashed version of the nonce to Google and the non-hashed version to the signInWithIdToken method.

The following code snippet provides an example of how to create both versions in a web application:


_17
// Adapted from https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
_17
_17
import crypto from 'crypto'
_17
_17
// ...
_17
_17
const nonce = crypto.randomBytes(16).toString('base64') // Generate a random nonce
_17
const encoder = new TextEncoder()
_17
const encodedNonce = encoder.encode(nonce) // Encode the nonce
_17
const hash = await crypto.subtle.digest('SHA-256', encodedNonce) // Hash it with SHA-256
_17
const bytes = new Uint8Array(hash)
_17
const hashedNonce = Array.from(bytes)
_17
.map((b) => b.toString(16).padStart(2, '0')) // Convert the hash to a hexadecimal string
_17
.join('')
_17
_17
// Use 'hashedNonce' when making the authentication request to Google
_17
// Use 'nonce' when invoking the supabase.auth.signInWithIdToken() method

Configuration #

  1. Obtain OAuth credentials for your Google Cloud project in the Credentials page of the console. When creating a new credential, choose Web application. As you're using the Google sign in button, you should configure the Authorized JavaScript origins and Authorized redirect URIs to the website where the buttons appear. You should not use your Supabase project domain name. For this use case, the client secret provided is not needed and can be ignored.
  2. Configure the OAuth Consent Screen. This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service.
  3. Finally, add the client ID from step 1 in the Google provider on the Supabase Dashboard under Authorized Client IDs.

Note that you do not have to configure the OAuth flow client ID and secret in the Supabase Dashboard when using this approach!

© Supabase Inc—ContributingAuthor StyleguideOpen SourceSupaSquad