Login with Google

Regardless of whether you use application code or Google's pre-built solutions to implement the sign in flow, you need to configure your project by obtaining a Client ID and Client Secret in the Clients section of the Google Auth Platform console:

1. Create a new OAuth client ID and choose Web application for the application type.
2. Under Authorized JavaScript origins add your application's URL. These should also be configured as the Site URL or redirect configuration in your project.
   • If your app is hosted on https://example.com/app add https://example.com.
   • Add http://localhost:<port> while developing locally. Remember to remove this when your application goes into production.
3. Under Authorized redirect URIs add your Supabase project's callback URL.
   • Access it from the Google provider page on the Dashboard.
   • For local development, use http://localhost:3000/auth/v1/callback.
4. Click Create and make sure you save the Client ID and Client Secret.
   • Add these values to the Google provider page on the Dashboard.

Application code#

To use your own application code for the signin button, call the signInWithOAuth method (or the equivalent for your language).

1
2
3
supabase.auth.signInWithOAuth({  provider: 'google',})

For an implicit flow, that's all you need to do. The user will be taken to Google's consent screen, and finally redirected to your app with an access and refresh token pair representing their session.

For a PKCE flow, for example in Server-Side Auth, you need an extra step to handle the code exchange. When calling signInWithOAuth, provide a redirectTo URL which points to a callback route. This redirect URL should be added to your redirect allow list.

1
2
3
4
5
6
await supabase.auth.signInWithOAuth({  provider,  options: {    redirectTo: `http://example.com/auth/callback`,  },})

At the callback endpoint, handle the code exchange to save the user session.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { NextResponse } from 'next/server'// The client you created from the Server-Side Auth instructionsimport { createClient } from '@/utils/supabase/server'export async function GET(request: Request) {  const { searchParams, origin } = new URL(request.url)  const code = searchParams.get('code')  // if "next" is in param, use it as the redirect URL  let next = searchParams.get('next') ?? '/'  if (!next.startsWith('/')) {    // if "next" is not a relative URL, use the default    next = '/'  }  if (code) {    const supabase = await createClient()    const { error } = await supabase.auth.exchangeCodeForSession(code)    if (!error) {      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer      const isLocalEnv = process.env.NODE_ENV === 'development'      if (isLocalEnv) {        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host        return NextResponse.redirect(`${origin}${next}`)      } else if (forwardedHost) {        return NextResponse.redirect(`https://${forwardedHost}${next}`)      } else {        return NextResponse.redirect(`${origin}${next}`)      }    }  }  // return the user to an error page with instructions  return NextResponse.redirect(`${origin}/auth/auth-code-error`)}

After a successful code exchange, the user's session will be saved to cookies.

Saving Google tokens#

The tokens saved by your application are the Supabase Auth tokens. Your app might additionally need the Google OAuth 2.0 tokens to access Google services on the user's behalf.

On initial login, you can extract the provider_token from the session and store it in a secure storage medium. The session is available in the returned data from signInWithOAuth (implicit flow) and exchangeCodeForSession (PKCE flow).

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:

1
2
3
4
5
6
7
8
9
const { data, error } = await supabase.auth.signInWithOAuth({  provider: 'google',  options: {    queryParams: {      access_type: 'offline',      prompt: 'consent',    },  },})

Google pre-built #

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

1. Load the Google client library in your app by including the third-party script:

   1
   <script src="https://accounts.google.com/gsi/client" async></script>

2. Use the HTML Code Generator to customize the look, feel, features and behavior of the Sign in with Google button.

3. Pick the Swap to JavaScript callback option, and input the name of your callback function. This function will receive a CredentialResponse when sign in completes.

   To make your app compatible with Chrome's third-party-cookie phase-out, make sure to set data-use_fedcm_for_prompt to true.

   Your final HTML code might look something like this:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   <div  id="g_id_onload"  data-client_id="<client ID>"  data-context="signin"  data-ux_mode="popup"  data-callback="handleSignInWithGoogle"  data-nonce=""  data-auto_select="true"  data-itp_support="true"  data-use_fedcm_for_prompt="true"></div><div  class="g_id_signin"  data-type="standard"  data-shape="pill"  data-theme="outline"  data-text="signin_with"  data-size="large"  data-logo_alignment="left"></div>

4. Create a handleSignInWithGoogle function that takes the CredentialResponse and passes the included token to Supabase. The function needs to be available in the global scope for Google's code to find it.

   1
   2
   3
   4
   5
   6
   async function handleSignInWithGoogle(response) {  const { data, error } = await supabase.auth.signInWithIdToken({    provider: 'google',    token: response.credential,  })}

5. (Optional) Configure a nonce. The use of a nonce is recommended for extra security, but optional. The nonce should be generated randomly each time, and it must be provided in both the data-nonce attribute of the HTML code and the options of the callback function.

   1
   2
   3
   4
   5
   6
   7
   async function handleSignInWithGoogle(response) {  const { data, error } = await supabase.auth.signInWithIdToken({    provider: 'google',    token: response.credential,    nonce: '<NONCE>',  })}

   Note that the nonce should be the same in both places, but because Supabase Auth expects the provider to hash it (SHA-256, hexadecimal representation), you need to provide a hashed version to Google and a non-hashed version to signInWithIdToken.

   You can get both versions by using the in-built crypto library:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   // Adapted from https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_stringconst nonce = btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(32))))const encoder = new TextEncoder()const encodedNonce = encoder.encode(nonce)crypto.subtle.digest('SHA-256', encodedNonce).then((hashBuffer) => {  const hashArray = Array.from(new Uint8Array(hashBuffer))  const hashedNonce = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')})// Use 'hashedNonce' when making the authentication request to Google// Use 'nonce' when invoking the supabase.auth.signInWithIdToken() method

One-tap with Next.js#

If you're integrating Google One-Tap with your Next.js application, you can refer to the example below to get started:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
'use client'import Script from 'next/script'import { createClient } from '@/utils/supabase/client'import type { accounts, CredentialResponse } from 'google-one-tap'import { useRouter } from 'next/navigation'declare const google: { accounts: accounts }// generate nonce to use for google id token sign-inconst generateNonce = async (): Promise<string[]> => {  const nonce = btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(32))))  const encoder = new TextEncoder()  const encodedNonce = encoder.encode(nonce)  const hashBuffer = await crypto.subtle.digest('SHA-256', encodedNonce)  const hashArray = Array.from(new Uint8Array(hashBuffer))  const hashedNonce = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')  return [nonce, hashedNonce]}const OneTapComponent = () => {  const supabase = createClient()  const router = useRouter()  const initializeGoogleOneTap = async () => {    console.log('Initializing Google One Tap')    const [nonce, hashedNonce] = await generateNonce()    console.log('Nonce: ', nonce, hashedNonce)    // check if there's already an existing session before initializing the one-tap UI    const { data, error } = await supabase.auth.getSession()    if (error) {      console.error('Error getting session', error)    }    if (data.session) {      router.push('/')      return    }    /* global google */    google.accounts.id.initialize({      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,      callback: async (response: CredentialResponse) => {        try {          // send id token returned in response.credential to supabase          const { data, error } = await supabase.auth.signInWithIdToken({            provider: 'google',            token: response.credential,            nonce,          })          if (error) throw error          console.log('Session data: ', data)          console.log('Successfully logged in with Google One Tap')          // redirect to protected page          router.push('/')        } catch (error) {          console.error('Error logging in with Google One Tap', error)        }      },      nonce: hashedNonce,      // with chrome's removal of third-party cookies, we need to use FedCM instead (https://developers.google.com/identity/gsi/web/guides/fedcm-migration)      use_fedcm_for_prompt: true,    })    google.accounts.id.prompt() // Display the One Tap UI  }  return <Script onReady={initializeGoogleOneTap} src="https://accounts.google.com/gsi/client" />}export default OneTapComponent