oauth providers/google

42 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Google OAuth supported platforms

Supabase Auth supports Sign in with Google for: web applications, native Android and iOS apps, macOS, and Chrome extensions.

Google sign-in implementation methods

Google sign-in can be implemented in two ways: (1) by writing application code with the signInWithOAuth method, and (2) by using Google's pre-built solutions such as personalized sign-in buttons, One Tap, or automatic sign-in.

Google OAuth prerequisites and scopes

To set up Google sign-in, you need to: (1) prepare a Google Cloud project, (2) configure Audience settings to specify which users are allowed, (3) configure Data Access (Scopes) including openid, .../auth/userinfo.email, and .../auth/userinfo.profile. Additional scopes on sensitive or restricted lists may require verification which can take a long time.

Google consent screen branding recommendations

It is strongly recommended to set up a custom domain and optionally verify your brand information with Google. Custom domains like auth.example.com or api.example.com improve user trust compared to seeing <project-id>.supabase.co in the consent screen. Brand verification is not automatic and may take a few business days.

Google web client setup requirements

For web applications, create an OAuth client ID as Web application type and configure: (1) Authorized JavaScript origins - add your app's URL (e.g., https://example.com for an app at https://example.com/app), and http://localhost:<port> for local development (remove before production), (2) Authorized redirect URIs - add Supabase project's callback URL (access from Google provider page on Dashboard; use http://127.0.0.1:54321/auth/v1/callback for local development).

Google native app client setup

For native Android apps, create an OAuth client ID as Android type and provide the SHA-1 certificate fingerprint used to sign the app. Different SHA-1 fingerprints are needed for testing locally and production - add both to Google Cloud Console and all Client IDs to Supabase dashboard. For iOS apps, provide the app Bundle ID, and App Store ID and Team ID if already published.

Multiple Google client IDs configuration

When using multiple Client IDs (for Web, iOS, and Android), concatenate all Client IDs with a comma, ensuring the web Client ID is first in the list.

Google local development configuration

For local development with Google provider, set environment variable SUPABASE_AUTH_EXTERNAL_GOOGLE_CLIENT_SECRET="<client-secret>" and configure in supabase/config.toml with [auth.external.google] section: enabled = true, client_id = "<client-id>", secret = "env(SUPABASE_AUTH_EXTERNAL_GOOGLE_CLIENT_SECRET)", skip_nonce_check = false.

Google provider configuration via Management API

Use the PATCH /v1/projects/{ref}/config/auth Management API endpoint with JSON payload: {"external_google_enabled": true, "external_google_client_id": "your-google-client-id", "external_google_secret": "your-google-client-secret"} to configure Google provider programmatically.

Web signInWithOAuth for Google

Example code showing basic Google OAuth sign-in on web: ```js import { createClient } from '@supabase/supabase-js' const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...') supabase.auth.signInWithOAuth({ provider: 'google', }) ``` For implicit flow, this redirects users to Google's consent screen and back to the app with access and refresh tokens. For PKCE flow, tokens are exchanged for a code and saved to cookies.

Google refresh token extraction

To obtain Google's refresh token (which Google does not send by default), pass access_type and prompt parameters to signInWithOAuth: options.queryParams should include access_type: 'offline' and prompt: 'consent'. Extract provider_refresh_token from session data returned by signInWithOAuth (implicit flow) or exchangeCodeForSession (PKCE flow).

Google refresh token extraction example

Example code: ```js import { createClient } from '@supabase/supabase-js' const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...') const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'google', options: { queryParams: { access_type: 'offline', prompt: 'consent', }, }, }) ```

Google pre-built button implementation steps

To use Google's pre-built sign-in buttons: (1) load Google client library by including script src="https://accounts.google.com/gsi/client" async, (2) use Google's HTML Code Generator to customize button appearance, (3) pick 'Swap to JavaScript callback' option and provide callback function name, (4) set data-use_fedcm_for_prompt="true" for Chrome's third-party-cookie phase-out compatibility, (5) create callback function to receive CredentialResponse.

Google pre-built button HTML example

Example HTML for Google sign-in button: ```html <script src="https://accounts.google.com/gsi/client" async></script> <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> ```

Google signInWithIdToken callback

Callback function receives CredentialResponse and passes the credential token to Supabase: ```ts async function handleSignInWithGoogle(response) { const { data, error } = await supabase.auth.signInWithIdToken({ provider: 'google', token: response.credential, }) } ```

Google nonce configuration

Using a nonce is recommended for extra security but optional. The nonce must be generated randomly each time and provided in both the HTML data-nonce attribute and the signInWithIdToken options. Supabase Auth expects the provider to hash the nonce (SHA-256, hexadecimal), so provide hashed version to Google and non-hashed version to signInWithIdToken.

Google nonce generation example

Example code for generating nonce and hashed version: ```js const 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 authenticating to Google // Use 'nonce' when invoking signInWithIdToken() ```

Google nonce in signInWithIdToken

Include the nonce parameter when calling signInWithIdToken: ```ts async function handleSignInWithGoogle(response) { const { data, error } = await supabase.auth.signInWithIdToken({ provider: 'google', token: response.credential, nonce: '<NONCE>', }) } ```

Google One Tap with Next.js implementation

Full Next.js implementation example: ```tsx 'use client' import type { accounts, CredentialResponse } from 'google-one-tap' import { useRouter } from 'next/navigation' import Script from 'next/script' import { createClient } from '@/utils/supabase/client' declare const google: { accounts: accounts } const 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) const { data: { claims }, error, } = await supabase.auth.getClaims() if (error) { console.error('Error getting claims', error) } if (claims) { router.push('/') return } google.accounts.id.initialize({ client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID, callback: async (response: CredentialResponse) => { try { 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') router.push('/') } catch (error) { console.error('Error logging in with Google One Tap', error) } }, nonce: hashedNonce, use_fedcm_for_prompt: true, }) google.accounts.id.prompt() } return <Script onReady={initializeGoogleOneTap} src="https://accounts.google.com/gsi/client" /> } export default OneTapComponent ```

React Native Google sign-in with Expo

React Native uses the Credential Manager library (Android) to prompt for consent. When user consents, Google issues an ID token sent to Supabase Auth. By default, Supabase validates nonce during authentication - disable in Dashboard under Authentication > Providers > Google > Skip Nonce Check or locally via auth.external.<provider>.skip_nonce_check if client libraries cannot handle nonce verification.

React Native Google sign-in example with Expo

Example code using @react-native-google-signin/google-signin library: ```tsx import { GoogleSignin, GoogleSigninButton, statusCodes, } from '@react-native-google-signin/google-signin' import { supabase } from '../utils/supabase' export default function () { GoogleSignin.configure({ webClientId: 'YOUR CLIENT ID FROM GOOGLE CONSOLE', }) return ( <GoogleSigninButton size={GoogleSigninButton.Size.Wide} color={GoogleSigninButton.Color.Dark} onPress={async () => { try { await GoogleSignin.hasPlayServices() const response = await GoogleSignin.signIn() if (isSuccessResponse(response)) { const { data, error } = await supabase.auth.signInWithIdToken({ provider: 'google', token: response.data.idToken, }) console.log(error, data) } } catch (error: any) { if (error.code === statusCodes.IN_PROGRESS) { // operation in progress } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { // play services not available } else { // other error } } }} /> ) } ```

Flutter iOS Google sign-in Info.plist configuration

For Flutter iOS apps, add CFBundleURLTypes key to <project>/ios/Runner/Info.plist: ```xml <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLSchemes</key> <array> <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string> </array> </dict> </array> ``` Replace the value with the REVERSED_CLIENT_ID from GoogleService-Info.plist.

Flutter iOS Google sign-in Skip nonce check

For Flutter iOS apps, enable the Skip nonce check option when registering the Client ID in the Google provider page on the Dashboard.

Flutter mobile Google sign-in example

Example code for Flutter iOS and Android using google_sign_in package: ```dart import 'package:google_sign_in/google_sign_in.dart'; import 'package:supabase_flutter/supabase_flutter.dart'; Future<void> _nativeGoogleSignIn() async { const webClientId = 'my-web.apps.googleusercontent.com'; const iosClientId = 'my-ios.apps.googleusercontent.com'; final scopes = ['email', 'profile']; final googleSignIn = GoogleSignIn.instance; await googleSignIn.initialize( serverClientId: webClientId, clientId: iosClientId, ); final googleUser = await googleSignIn.attemptLightweightAuthentication(); if (googleUser == null) { throw AuthException('Failed to sign in with Google.'); } final authorization = await googleUser.authorizationClient.authorizationForScopes(scopes) ?? await googleUser.authorizationClient.authorizeScopes(scopes); final idToken = googleUser.authentication.idToken; if (idToken == null) { throw AuthException('No ID Token found.'); } await supabase.auth.signInWithIdToken( provider: OAuthProvider.google, idToken: idToken, accessToken: authorization.accessToken, ); } ```

Swift Google sign-in with Supabase

Google sign-in with Supabase on iOS uses GoogleSignIn-iOS package. When user provides consent, Google issues an ID token sent to Supabase Auth server. When valid, Supabase issues access and refresh tokens for session.

Swift Google sign-in example

Example code for native Google sign-in in Swift: ```swift import GoogleSignIn class GoogleSignInViewController: UIViewController { func googleSignIn() async throws { let result = try await GIDSignIn.sharedInstance.signIn(withPresenting: self) guard let idToken = result.user.idToken?.tokenString else { print("No idToken found.") return } let accessToken = result.user.accessToken.tokenString try await supabase.auth.signInWithIdToken( credentials: OpenIDConnectCredentials( provider: .google, idToken: idToken, accessToken: accessToken ) ) } } ```

Swift iOS Google sign-in configuration

For Swift iOS apps: (1) Follow integration instructions on get started with Google Sign-In iOS guide, (2) Configure OAuth Consent Screen with privacy policy and terms of service links, (3) Add web and iOS client IDs from Step 1 to Google provider on Supabase Dashboard under Client IDs separated by comma, (4) Enable Skip nonce check option.

Flutter desktop Google sign-in

For Flutter web, macOS, Windows, and Linux platforms, use signInWithOAuth method instead of native flows. This opens a browser window for the sign in. For non-web platforms, users are brought back via deep linking.

Flutter desktop Google sign-in example

Example code for Flutter web/desktop: ```dart await supabase.auth.signInWithOAuth( OAuthProvider.google, redirectTo: kIsWeb ? null : 'my.scheme://my-host', authScreenLaunchMode: kIsWeb ? LaunchMode.platformDefault : LaunchMode.externalApplication, ); ```

Android Kotlin Google sign-in requirements

For Android Kotlin apps: (1) Create OAuth client IDs for both Web and Android applications - the Web client ID is used in the Android app, (2) Provide SHA-1 certificate fingerprint used to sign the Android app in Google Cloud Console, (3) Add different fingerprints for testing and production, (4) Add all Client IDs to Supabase dashboard.

Android Kotlin Google sign-in dependencies

Add these dependencies to Android app for Google sign-in: ```kotlin implementation("androidx.credentials:credentials:<latest version>") implementation ("com.google.android.libraries.identity.googleid:googleid:<latest version>") // optional - needed for credentials support on Android 13 and below implementation("androidx.credentials:credentials-play-services-auth:<latest version>") ``` Add to proguard-rules.pro: ```proguard -if class androidx.credentials.CredentialManager -keep class androidx.credentials.playservices.** { *; } ```

Android Kotlin Google sign-in example

Example code for Google sign-in with Credential Manager on Android: ```kotlin @Composable fun GoogleSignInButton() { val coroutineScope = rememberCoroutineScope() val context = LocalContext.current val onClick: () -> Unit = { val credentialManager = CredentialManager.create(context) val rawNonce = UUID.randomUUID().toString() val bytes = rawNonce.toString().toByteArray() val md = MessageDigest.getInstance("SHA-256") val digest = md.digest(bytes) val hashedNonce = digest.fold("") { str, it -> str + "%02x".format(it) } val googleIdOption: GetGoogleIdOption = GetGoogleIdOption.Builder() .setFilterByAuthorizedAccounts(false) .setServerClientId("WEB_GOOGLE_CLIENT_ID") .setNonce(hashedNonce) .build() val request: GetCredentialRequest = GetCredentialRequest.Builder() .addCredentialOption(googleIdOption) .build() coroutineScope.launch { try { val result = credentialManager.getCredential( request = request, context = context, ) val googleIdTokenCredential = GoogleIdTokenCredential .createFrom(result.credential.data) val googleIdToken = googleIdTokenCredential.idToken supabase.auth.signInWith(IDToken) { idToken = googleIdToken provider = Google nonce = rawNonce } } catch (e: GetCredentialException) { // Handle exception } catch (e: GoogleIdTokenParsingException) { // Handle exception } catch (e: RestException) { // Handle exception } catch (e: Exception) { // Handle exception } } } Button(onClick = onClick) { Text("Sign in with Google") } } ```

Kotlin Multiplatform Google sign-in

With Compose Multiplatform, use the compose-auth plugin: On Android it uses Credential Manager, on iOS it uses GoogleSignIn-iOS library, on other platforms it uses normal OAuth via signInWith(Google).

Kotlin Multiplatform Google sign-in client setup

Must create OAuth credentials for both Web and Android applications. Use the Web Client ID in the Kotlin Multiplatform client, not the Android one.

Kotlin Multiplatform Google sign-in example

Example code for Kotlin Multiplatform with Compose Auth: ```kotlin val supabaseClient = createSupabaseClient( supabaseUrl = "SUPABASE_URL", supabaseKey = "SUPABASE_KEY" ) { install(Auth) install(ComposeAuth) { googleNativeLogin("WEB_GOOGLE_CLIENT_ID") } } val authState = supabaseClient.composeAuth.rememberSignInWithGoogle( onResult = { when(it) { NativeSignInResult.ClosedByUser -> TODO() is NativeSignInResult.Error -> TODO() is NativeSignInResult.NetworkError -> TODO() is NativeSignInResult.Success -> { val credential = it.data.google.credential credential.displayName credential.phoneNumber } } } ) Button(onClick = { authState.startFlow() }) { Text("Sign in with Google") } ```

Chrome extension Google sign-in setup

For Chrome extensions, create OAuth client ID as Chrome Extension type. Enter extension Item ID and optionally verify app ownership. Register Client ID in Google provider page on Dashboard under Client IDs.

Chrome extension manifest.json configuration

Add to manifest.json: ```json { "permissions": ["identity"], "oauth2": { "client_id": "<client ID>", "scopes": ["openid", "email", "profile"] } } ```

Chrome extension Google sign-in implementation

Use chrome.identity.launchWebAuthFlow() to trigger sign in flow. On success, call supabase.auth.signInWithIdToken(): ```ts const manifest = chrome.runtime.getManifest() const url = new URL('https://accounts.google.com/o/oauth2/auth') url.searchParams.set('client_id', manifest.oauth2.client_id) url.searchParams.set('response_type', 'id_token') url.searchParams.set('access_type', 'offline') url.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org`) url.searchParams.set('scope', manifest.oauth2.scopes.join(' ')) chrome.identity.launchWebAuthFlow( { url: url.href, interactive: true, }, async (redirectedTo) => { if (chrome.runtime.lastError) { // auth failed } else { const url = new URL(redirectedTo) const params = new URLSearchParams(url.hash) const { data, error } = await supabase.auth.signInWithIdToken({ provider: 'google', token: params.get('id_token'), }) } } ) ```

How to set up Google OAuth with Supabase

To set up Google OAuth for Supabase: First, go to the Google Console at console.developers.google.com/apis/library, create a new project, and add OAuth2 credentials. Then go to your Supabase Auth settings at app.supabase.com/project/_/auth/providers, enable Google as a provider, and set the required credentials according to the auth documentation for social login with Google.

Google OAuth credentials creation location

Google OAuth2 credentials are created in the Google Console at console.developers.google.com/apis/library.

PKCE flow OAuth requires redirectTo callback URL

When calling signInWithOAuth for PKCE flow, you must provide a redirectTo URL option that points to a callback route. This redirect URL must be added to your application's redirect allow list in Supabase Auth settings.

Supabase Auth provides Social Auth providers

Supabase Auth works with many popular Social Auth providers for authentication. The specific list of supported social providers is detailed in the Social Auth section.

Give your agent this brain