GitHub-inloggen toevoegen

Walkthrough voor beginners

Vereisten: de webapp lokaal draaiend en een gemigreerde database voor echte accounts. U heeft een GitHub-account nodig — hetzelfde dat de repository bezit is prima. Gratis, ongeveer 5 minuten per omgeving.

Snelle begrippen: een GitHub OAuth App is de registratie waarmee GitHub gebruikers voor u aanmeldt. Anders dan de meeste providers staat één OAuth App precies één Authorization callback URL toe — dus lokaal (http://localhost:3000/…) en productie (https://yourdomain.com/…) hebben elk een eigen app nodig. Eén app hergebruiken en de callback heen en weer bewerken breekt elke keer één kant.

1. Maak een lokale OAuth App onder de Developer settings van uw account. 2. Kopieer de Client ID en genereer een Client Secret. 3. Stel de drie omgevingswaarden in en herstart. 4. Herhaal dit eenmaal met uw echte domein voordat u live gaat.

• De webapp in 5 minuten shippen
• De database instellen

De lokale OAuth App aanmaken

1. Open github.com en meld u aan. Klik op uw profielfoto rechtsboven → Settings.

2. Scroll naar de onderkant van de linkerzijbalk en open Developer settings → OAuth Apps → New OAuth App.

3. Application name: iets als supastack local — gebruikers zien deze naam op GitHub's autorisatiepagina. Homepage URL: http://localhost:3000. Authorization callback URL: http://localhost:3000/api/auth/callback/github. Klik op Register application.

4. Kopieer op de pagina van de app de Client ID, klik op Generate a new client secret en kopieer het geheim onmiddellijk — GitHub toont het maar één keer, hoewel u altijd een nieuwe kunt genereren.

De productie-OAuth App aanmaken

Herhaal dezelfde New OAuth App-stappen met de naam van uw product, Homepage URL https://yourdomain.com en Authorization callback URL https://yourdomain.com/api/auth/callback/github.

Houd de inloggegevens van elke app in de eigen omgeving: het paar van de lokale app leeft in apps/web/.env.local, het paar van de productie-app in de geheimenopslag van uw host. Het lokale geheim mag productieconfiguratie nooit bereiken en vice versa.

De waarden aan de app toevoegen

Stel de drie regels hieronder in apps/web/.env.local in met de inloggegevens van de lokale app. AUTH_GITHUB_ENABLED=true zet de knop aan; het paar identificeert de OAuth App.

Het clientgeheim blijft alleen op de server — nooit in NEXT_PUBLIC_/EXPO_PUBLIC_-variabelen en nooit gecommit. Herstart de devserver na het bewerken.

Hergebruik geen GITHUB_APP_*-waarden die u elders tegenkomt — die horen bij een ongerelateerde GitHub App-integratie, niet bij gebruikerslogin. De docs/github-auth-setup.md van de kit loopt deze hele flow van begin tot eind door als u een tweede referentie wilt.

# apps/web/.env.local — from the LOCAL OAuth App
AUTH_GITHUB_ENABLED=true
GITHUB_CLIENT_ID=your-oauth-app-client-id
GITHUB_CLIENT_SECRET=your-oauth-app-secret

Verifiëren en problemen oplossen

Open http://localhost:3000/auth en klik op de GitHub-knop. Autoriseer de app op github.com en controleer dat u aangemeld terugkeert.

Totdat AUTH_GITHUB_ENABLED=true is ingesteld, blijft de GitHub-optie op /auth zichtbaar maar uitgeschakeld — controleer de namen in het env-bestand en herstart dan. De vlag instellen zonder zowel GITHUB_CLIENT_ID als GITHUB_CLIENT_SECRET laat het opstarten mislukken en noemt de ontbrekende variabele.

Een callback-mismatch is de gebruikelijke fout: de Authorization callback URL van de app moet exact gelijk zijn aan {APP_URL}/api/auth/callback/github — protocol, host, poort en pad. Een redirect_uri-fout na deployment betekent meestal dat het verzoek de inloggegevens van de lokale app raakte terwijl APP_URL productie aangeeft, of andersom.

Herstart de devserver na elke env-bewerking; waarden worden alleen bij het opstarten gelezen.

• Stel daarna de database in
• OAuth-provideroverzicht