> ## Documentation Index > Fetch the complete documentation index at: https://supastack.dev/llms.txt > Use this file to discover all available pages before exploring further. > For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt # 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é. [Mettre l'app web en ligne en 5 minutes](https://supastack.dev/fr/docs/web/ship-in-5-minutes.md) [Configurer la base de données](https://supastack.dev/fr/docs/web/setup-database.md) ## Créer le projet Google Cloud 1. Ouvrez [console.cloud.google.com](https://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-secret ``` ## Vé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. [Ajouter ensuite la connexion GitHub](https://supastack.dev/fr/docs/web/github-sign-in.md) [Vue d'ensemble des fournisseurs OAuth](https://supastack.dev/fr/docs/web/setup-oauth.md) Pour poursuivre la configuration, consultez [Ajouter la connexion GitHub](https://supastack.dev/fr/docs/web/github-sign-in.md). ## Suivant [Ajouter la connexion GitHub](https://supastack.dev/fr/docs/web/github-sign-in.md)