For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /fr/docs/web/google-sign-in.md (or send Accept: text/markdown).
Ajouter la connexion Google
Créez un client OAuth Google Cloud gratuit et branchez « Continuer avec Google » dans l'app.
Parcours pas à pas pour débuter
Prérequis : l'app web qui tourne en local (En ligne en 5 minutes) et une base de données migrée pour de vrais comptes (Configurer la base de données). Il vous faut un compte Google ordinaire ; tout ici est gratuit et prend environ 10 minutes.
Quelques termes : OAuth est le standard où Google connecte l'utilisateur sur la page de Google et remet une preuve à votre app. Un projet Google Cloud est un conteneur dans la console de Google qui détient les identifiants de votre app. L'écran de consentement OAuth est la page que Google montre aux utilisateurs avant de les renvoyer. Un ID client identifie votre app auprès de Google ; le secret client est son mot de passe et reste sur le serveur.
1. Créez un projet Google Cloud. 2. Configurez l'écran de consentement. 3. Créez un client OAuth Web et copiez son ID et son secret. 4. Collez trois valeurs dans apps/web/.env.local et redémarrez le serveur de dev.
Un seul projet suffit pour tout le produit : le même projet Google Cloud hébergera plus tard votre déploiement Cloud Run, et la connexion mobile passe par le même backend web — vous ne créez pas un client séparé par plateforme ou par fonctionnalité.
Créer le projet Google Cloud
1. Ouvrez console.cloud.google.com et connectez-vous avec votre compte Google.
2. Cliquez sur la liste déroulante de projet dans la barre du haut (à côté du logo Google Cloud) et choisissez New Project.
3. Donnez-lui un nom — le nom de votre produit convient — et cliquez sur Create. Aucune organisation, carte ni compte de facturation n'est nécessaire pour des identifiants de connexion.
Attendu : la console se recharge dans le nouveau projet et son nom apparaît dans la barre du haut. Réutilisez ce projet quand vous atteindrez le guide de déploiement au lieu d'en créer un autre.
Configurer l'écran de consentement OAuth
1. Dans la navigation de gauche, ouvrez APIs & Services → OAuth consent screen et cliquez sur Get started.
2. Saisissez le nom d'app que les utilisateurs verront (le nom de votre produit), choisissez un e-mail de support utilisateur, sélectionnez External pour l'audience, renseignez l'e-mail de contact développeur et cliquez jusqu'à Create.
3. Rien d'autre n'est requis sur cet écran : l'app ne demande que les scopes par défaut openid, email et profile, qui n'exigent ni scopes supplémentaires ni vérification.
Le statut de publication reste Testing pendant que vous développez. Dans ce mode, seuls les comptes listés peuvent se connecter — ajoutez donc votre propre adresse Gmail sous Audience → Test users, sinon Google vous bloque même vous. Quand le produit est en ligne, cliquez sur Publish app ; comme aucun scope sensible n'est demandé, la publication ne déclenche pas de revue de vérification Google.
Créer le client OAuth
1. Ouvrez APIs & Services → Credentials → + Create Credentials → OAuth client ID.
2. Réglez Application type sur Web application et nommez-le par exemple supastack local.
3. Sous Authorized JavaScript origins, ajoutez http://localhost:3000. Sous Authorized redirect URIs, ajoutez http://localhost:3000/api/auth/callback/google — ce chemin de rappel appartient à Better Auth, le moteur d'authentification par défaut du kit : {APP_URL}/api/auth/callback/google.
4. Cliquez sur Create et copiez l'ID client et le secret client dans la boîte de dialogue. Vous pourrez les rouvrir sur la page du client plus tard, mais les copier maintenant économise une étape.
Pour la production, créez un deuxième client Web (recommandé) ou ajoutez à celui-ci : origine JavaScript https://yourdomain.com et URI de redirection https://yourdomain.com/api/auth/callback/google. Garder des clients séparés par environnement signifie qu'un secret local compromis ne peut pas atteindre la production.
Ajouter les valeurs à l'app
Ouvrez apps/web/.env.local — Next.js lit ce fichier, pas le .env racine — et renseignez les trois lignes ci-dessous. AUTH_GOOGLE_ENABLED=true active le bouton ; la paire client identifie votre client Google Cloud.
Le secret client reste côté serveur : il ne doit jamais apparaître dans une variable NEXT_PUBLIC_ ou EXPO_PUBLIC_ ni être committé sur Git. En production, renseignez les trois mêmes noms dans le magasin de secrets de votre hébergeur plutôt que dans un fichier env.
Redémarrez le serveur de dev après modification — les changements d'environnement ne sont lus qu'au démarrage.
# apps/web/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secretVérifier et dépanner
Ouvrez http://localhost:3000/auth, cliquez sur le bouton Google, terminez l'écran de consentement de Google et confirmez que l'app revient connectée.
redirect_uri_mismatch signifie que l'URI de redirection enregistrée chez Google ne correspond pas exactement — vérifiez le protocole (http vs https), le port et le chemin : il doit finir par /api/auth/callback/google, pas /callback/google/ ni une variante avec slash final.
Access blocked / has not completed the Google verification process signifie que l'écran de consentement est encore en Testing et que le compte qui se connecte n'est pas listé sous Test users — ajoutez-le dans la section Audience.
Si le bouton Google est absent ou si la connexion échoue encore après avoir modifié .env.local, redémarrez le serveur de dev. Si le démarrage échoue en nommant une variable, le flag est activé sans sa paire client complète.