> ## 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

# 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.

[De webapp in 5 minuten shippen](https://supastack.dev/nl/docs/web/ship-in-5-minutes.md)

[De database instellen](https://supastack.dev/nl/docs/web/setup-database.md)


## Het Google Cloud-project aanmaken

1. Open [console.cloud.google.com](https://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-secret
```


## Verifië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.

[Voeg daarna GitHub-inloggen toe](https://supastack.dev/nl/docs/web/github-sign-in.md)

[OAuth-provideroverzicht](https://supastack.dev/nl/docs/web/setup-oauth.md)


Wil je verdergaan met de configuratie? Lees [GitHub-inloggen toevoegen](https://supastack.dev/nl/docs/web/github-sign-in.md).


## Volgende

[GitHub-inloggen toevoegen](https://supastack.dev/nl/docs/web/github-sign-in.md)