diff --git a/apps/docs/content/_partials/quickstart_db_setup.mdx b/apps/docs/content/_partials/quickstart_db_setup.mdx index 161ea8b7f5edb..b8193923efca6 100644 --- a/apps/docs/content/_partials/quickstart_db_setup.mdx +++ b/apps/docs/content/_partials/quickstart_db_setup.mdx @@ -20,7 +20,7 @@ curl -X POST https://api.supabase.com/v1/projects \ "organization_id": "", "name": "My Project", "region": "us-east-1", - "password": "" + "db_pass": "" }' ``` diff --git a/apps/docs/content/guides/auth/social-login/auth-google.mdx b/apps/docs/content/guides/auth/social-login/auth-google.mdx index aa82bd3dcaf18..bb15372b26bb7 100644 --- a/apps/docs/content/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/content/guides/auth/social-login/auth-google.mdx @@ -376,82 +376,72 @@ If you're integrating Google One-Tap with your Next.js application, you can refe import Script from 'next/script' import { createClient } from '@/utils/supabase/client' -import { CredentialResponse } from 'google-one-tap' +import type { accounts, CredentialResponse } from 'google-one-tap' import { useRouter } from 'next/navigation' -import { useEffect } from 'react' + +declare const google: { accounts: accounts } + +// generate nonce to use for google id token sign-in +const generateNonce = async (): Promise => { + 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() - // generate nonce to use for google id token sign-in - const generateNonce = async (): Promise => { - 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('') + const initializeGoogleOneTap = () => { + console.log('Initializing Google One Tap') + const [nonce, hashedNonce] = await generateNonce() + console.log('Nonce: ', nonce, hashedNonce) - return [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 + } - useEffect(() => { - const initializeGoogleOneTap = () => { - console.log('Initializing Google One Tap') - window.addEventListener('load', async () => { - 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) { + /* 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('/') - return + } 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 + } - /* 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 - }) - } - initializeGoogleOneTap() - return () => window.removeEventListener('load', initializeGoogleOneTap) - }, []) - - return ( - <> -