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 /nl/docs/web/google-sign-in.md (or send Accept: text/markdown).
Google-inloggen toevoegen
Maak een gratis Google Cloud OAuth-client en verbind Doorgaan met Google met de app.
Walkthrough voor beginners
Vereisten: de webapp lokaal draaiend (Ship in 5 minuten) en een gemigreerde database voor echte accounts (Database instellen). U heeft een gewoon Google-account nodig; alles hier is gratis en duurt ongeveer 10 minuten.
Snelle begrippen: OAuth is de standaard waarbij Google de gebruiker op Google's pagina aanmeldt en uw app een bewijs overhandigt. Een Google Cloud-project is een container in Google's console die de inloggegevens van uw app bevat. Het OAuth-consentscherm is de pagina die Google gebruikers toont voordat ze worden teruggestuurd. Een client-ID identificeert uw app bij Google; het clientgeheim is het wachtwoord ervan en blijft op de server.
1. Maak een Google Cloud-project. 2. Configureer het consentscherm. 3. Maak één Web-OAuth-client en kopieer het ID en het geheim. 4. Plak drie waarden in apps/web/.env.local en herstart de devserver.
Eén project is genoeg voor het hele product: hetzelfde Google Cloud-project host later uw Cloud Run-deployment, en mobiele login loopt via dezelfde webbackend — u maakt geen aparte client per platform of functie.
Het Google Cloud-project aanmaken
1. Open console.cloud.google.com en meld u aan met uw Google-account.
2. Klik op de projectdropdown in de bovenste balk (naast het Google Cloud-logo) en kies New Project.
3. Geef het een naam — uw productnaam is prima — en klik op Create. Er is geen organisatie, kaart of factureringsaccount nodig voor inloggegevens.
Verwacht: de console herlaadt in het nieuwe project en de naam verschijnt in de bovenste balk. Hergebruik dit project wanneer u de deploymentgids bereikt in plaats van er nog een aan te maken.
Het OAuth-consentscherm configureren
1. Open in de linkernavigatie APIs & Services → OAuth consent screen en klik op Get started.
2. Voer de App name in die gebruikers zien (uw productnaam), kies een User support email, kies External als doelgroep, vul het developer contact-e-mailadres in en klik door naar Create.
3. Verder is op dit scherm niets nodig: de app vraagt alleen de standaard openid-, email- en profile-scopes, die geen extra scopes of verificatie vereisen.
De publicatiestatus blijft Testing terwijl u ontwikkelt. In die modus mogen alleen vermelde accounts inloggen, dus voeg uw eigen Gmail-adres toe onder Audience → Test users — anders blokkeert Google zelfs u. Wanneer het product live is, klikt u op Publish app; omdat er geen gevoelige scopes worden gevraagd, start publiceren geen Google-verificatiereview.
De OAuth-client aanmaken
1. Ga in de console naar APIs & Services → Credentials → + Create Credentials → OAuth client ID.
2. Zet Application type op Web application en geef het een naam als supastack local.
3. Voeg onder Authorized JavaScript origins http://localhost:3000 toe. Voeg onder Authorized redirect URIs http://localhost:3000/api/auth/callback/google toe — dat callbackpad hoort bij Better Auth, de standaard auth-engine van de kit: {APP_URL}/api/auth/callback/google.
4. Klik op Create en kopieer de Client ID en het Client Secret uit het dialoogvenster. U kunt ze later op de pagina van de client opnieuw openen, maar nu kopiëren bespaart een stap.
Maak voor productie een tweede Web-client (aanbevolen) of voeg toe aan deze: JavaScript-origin https://yourdomain.com en redirect-URI https://yourdomain.com/api/auth/callback/google. Aparte clients per omgeving betekent dat een gelekt lokaal geheim productie niet kan bereiken.
De waarden aan de app toevoegen
Open apps/web/.env.local — Next.js leest dit bestand, niet de root .env — en stel de drie regels hieronder in. AUTH_GOOGLE_ENABLED=true zet de knop aan; het clientpaar identificeert uw Google Cloud-client.
Het clientgeheim is alleen voor de server: het mag nooit in een NEXT_PUBLIC_- of EXPO_PUBLIC_-variabele voorkomen en nooit naar Git worden gecommit. Stel in productie dezelfde drie namen in de geheimenopslag van uw host in in plaats van in een env-bestand.
Herstart de devserver na het bewerken — omgevingswijzigingen worden alleen bij het opstarten gelezen.
# apps/web/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secretVerifiëren en problemen oplossen
Open http://localhost:3000/auth, klik op de Google-knop, doorloop het consentscherm van Google en controleer dat de app aangemeld terugkomt.
redirect_uri_mismatch betekent dat de in Google geregistreerde redirect-URI niet exact overeenkomt — controleer het protocol (http versus https), de poort en het pad: het moet eindigen op /api/auth/callback/google, niet /callback/google/ of een variant met slash aan het einde.
Access blocked / has not completed the Google verification process betekent dat het consentscherm nog in Testing staat en het inloggend account niet onder Test users staat — voeg het toe onder de sectie Audience.
Als de Google-knop ontbreekt of inloggen nog steeds mislukt na het bewerken van .env.local, herstart dan de devserver. Als het opstarten mislukt met de naam van een variabele, is de vlag ingeschakeld zonder het complete clientpaar.
Wil je verdergaan met de configuratie? Lees GitHub-inloggen toevoegen.