Ajoute la connexion Google à n’importe quel site web avec Supabase

Authentification Supabase existante

Ce guide ajoute Google comme option de connexion à un site web où l’authentification Supabase fonctionne déjà — inscription, connexion et sessions. Si ton site ne l’a pas encore, mets-la en place d’abord, puis reviens ici.

Ajoute l’authentification des utilisateurs à n’importe quel site web avec Supabase

Met en place l’inscription, la connexion, les sessions et les espaces protégés avec Supabase.

/video/add-user-authentication-supabase

Copie la Callback URL de Supabase

Ouvrir Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Copie la Callback URL (for OAuth). Elle va dans Google Cloud, pas dans le code de ton site web.

Configure Google Auth Platform

Ouvrir Google Cloud Console

https://console.cloud.google.com/auth/branding

Your project Google Auth Platform

Ajoute les informations de ton app dans Branding — choisis « External » comme Audience Publie l’app dans Audience — ou laisse-la en « Testing » et ajoute-toi comme utilisateur test Confirme les scopes de base dans Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

Crée le client OAuth

Google Auth Platform Clients Create client

Choisis « Web application » Ajoute ton site web sous Authorized JavaScript origins Colle la Callback URL de Supabase sous Authorized redirect URIs Clique sur « Create » Copie le Client ID et le Client Secret — Google n’affiche le secret qu’une seule fois

URL de ton site → Authorized JavaScript origins

Callback URL de Supabase → Authorized redirect URIs

Ajoute le client Google à Supabase

De retour dans le fournisseur Google de Supabase — le même onglet qu’à l’étape 1.

Your project Authentication Sign In / Providers Google

Active Google

Colle le Client ID de Google

Colle le Client Secret de Google

Enregistre

Garde le Client Secret privé

Le Client Secret ne doit se trouver que dans Supabase. Ne l’expose jamais dans le code frontend ni dans une variable d’environnement publique.

Ajoute le bouton de connexion avec Google

Ton IA ajoute Google à la connexion que tu as déjà, sans la reconstruire.

Ajoute « Continue with Google »

Ajoute la connexion avec Google à ton authentification Supabase existante en gardant ton parcours de connexion actuel intact, puis indique les Redirect URLs dont tu as besoin dans Supabase.

Add "Continue with Google" to this project's existing Supabase Authentication. Google is already enabled as a provider in my Supabase project, and the Google Client ID and Client Secret are already saved there. Nothing about Google needs to be configured in code. Before changing anything, inspect the current project: - the existing Supabase client(s) and how they are configured - the sign-in page, and the sign-up page if there is one - any existing auth callback route - how protected pages are guarded - how the session is read, kept in sync, and signed out - whether a profile row is created for new users - whether any signed-in user has private data of their own (for example rows protected by Row Level Security) Preserve this project's existing authentication architecture. Make the smallest focused change that adds Google — do not refactor, rename or restyle unrelated code. WHAT TO DO - Add one "Continue with Google" button to the existing sign-in page, and to the sign-up page if there is one. Match the existing design and components. - Start sign-in with the project's existing Supabase client: supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo } }). - Follow this project's own architecture instead of forcing one: - Browser-only app: make sure the page the user returns to picks up the new session through the existing session handling. - PKCE or server-rendered auth (for example @supabase/ssr or Next.js): return through a callback route that exchanges the code for a session with the existing server-side client. Reuse an existing callback route; add one only if none exists, following the project's routing conventions. - redirectTo is a page on THIS website. Build it at runtime from the current site origin, or from the project's existing site URL setting. Never hard-code localhost or a domain. - Never use the Supabase Callback URL (the one ending in /auth/v1/callback) as redirectTo — that URL belongs only in Google Cloud, not in this project's code. - After sign-in, send the user where email/password sign-in already sends them, and keep any existing "return to the page I came from" behavior. - Show a loading state while sign-in starts, and prevent repeated clicks. - If sign-in fails or is cancelled, show an error in the existing style and keep the page usable. - Returning users: the same Google account must reuse the same Supabase user, never create a duplicate. Make any profile creation safe to run more than once. - If a profile row is created for new users, make sure it works for Google users too — they have no password and no sign-up form fields; Google provides their name and picture in the user metadata. - If any signed-in user has private data of their own, preserve the existing data isolation exactly as it is (Row Level Security, policies, user id ownership, server-side checks) for a Google user too. Do not loosen, bypass or duplicate it. - Do not build custom account linking — Supabase already links a Google sign-in to an existing user with the same verified email. KEEP AS IT IS - the existing authentication UI and architecture - email/password sign-in and sign-up, if the project has them - protected routes and their guards - session handling and sign-out - Row Level Security and database policies - environment variables and the existing Supabase client configuration - unrelated pages and design NEVER - rebuild or replace the existing authentication - create a second Supabase client or a second authentication system - add a Google sign-in library or call Google APIs directly - put the Google Client Secret, a Supabase secret key or a service-role key in frontend code - deploy anything Run the production build and fix any errors you introduced. Finish with exactly this summary: GOOGLE LOGIN ADDED - Files changed: <each file, with what changed> - Sign-in flow: <browser / callback route at path> - Return URL: <the exact redirectTo path this code uses> - Supabase Redirect URLs to allow: <each full URL this code uses, one per line — the live site and local development; if the live domain is unknown, the path to add after it> - Private user data: <preserved / not applicable> - Still to do: <nothing, or a short list>

Ajoute les URL de retour

Ajoute uniquement les Redirect URLs que ton IA a listées ci-dessus.

Your project Authentication URL Configuration Redirect URLs

Il ne s’agit pas de la Callback URL de l’étape 1 — celle-ci va uniquement dans Google Cloud.

La connexion avec Google fonctionne

Ouvre ton site web, clique sur « Continue with Google » et choisis un compte Google. Vérifie que tu reviens sur le site en étant connecté.

Tu peux aussi vérifier le compte dans :

Your project Authentication Users

La reconnexion fonctionne

Déconnecte-toi, puis reconnecte-toi avec Google. Vérifie que Supabase réutilise ton compte existant au lieu d’en créer un doublon.

L’authentification existante fonctionne toujours

Vérifie que l’ajout de Google n’a rien changé à ce qui fonctionnait déjà.

Tu restes connecté après avoir actualisé la page

Les pages protégées exigent toujours une connexion

La connexion par e-mail et mot de passe fonctionne toujours, si ton app en a une

Chaque utilisateur ne voit toujours que ses propres données privées

La connexion Google fonctionne

La dernière étape fait vérifier le nom et le logo de ton app pour que les utilisateurs reconnaissent ta marque. Remplacer une adresse d’authentification supabase.co visible est une démarche distincte, qui nécessite un domaine personnalisé Supabase.

Recommandé pour la production

La connexion Google fonctionne déjà. Cette étape affiche le nom et le logo vérifiés de ton app quand les utilisateurs se connectent.

Complète l’image de marque de ton app Google

Ouvrir Google Auth Platform

https://console.cloud.google.com/auth/branding

Google Auth Platform Branding

App name

App logo

Application home page

Application privacy policy link

Application terms of service link, si tu en as un

Authorized domain

Developer contact information

Ajoute des pages de politique de confidentialité et de conditions d’utilisation à n’importe quel site web créé par IA

Pas encore de politique de confidentialité ni de page de conditions ? Crée-les d’abord.

/video/add-privacy-policy-and-terms-pages-to-any-ai-built-website

Vérifie ton domaine et ton image de marque

Ouvre Google Search Console

https://search.google.com/search-console

Vérifie ton domaine dans Google Search Console, si ce n’est pas déjà fait Reviens sur la page Branding dans Google Auth Platform Clique sur « Verify Branding »

Google peut approuver automatiquement ou demander un examen.

Publie et reteste

Quand Google affiche « Ready to publish », clique sur « Publish branding » Ouvre ton site web dans une fenêtre de navigation privée Clique sur « Continue with Google » Vérifie que le nom et le logo de ton app s’affichent

Facultatif : utilise un domaine d’authentification personnalisé

Fonctionnalité payante de Supabase — non requise pour la connexion Google. Utilise-la pour une URL d’authentification à ton image, ou si la vérification Google exige un domaine d’authentification que tu contrôles.

La vérification de la marque change le nom et le logo que Google affiche. Un domaine personnalisé Supabase remplace l’adresse d’authentification par défaut project-ref.supabase.co par la tienne, comme auth.example.com.

Après l’avoir activé, ajoute sa callback URL (https://auth.example.com/auth/v1/callback) aux Authorized redirect URIs de ton client Google.

Domaines personnalisés Supabase

https://supabase.com/docs/guides/platform/custom-domains