Ajouter la connexion GitHub

Parcours pas à pas pour débuter

Prérequis : l'app web qui tourne en local et une base de données migrée pour de vrais comptes. Il vous faut un compte GitHub — celui qui possède le dépôt convient. Gratuit, environ 5 minutes par environnement.

Quelques termes : une OAuth App GitHub est l'enregistrement qui permet à GitHub de connecter les utilisateurs pour vous. Contrairement à la plupart des fournisseurs, une OAuth App n'autorise qu'une seule Authorization callback URL — le local (http://localhost:3000/…) et la production (https://yourdomain.com/…) ont donc chacun besoin de leur propre app. Réutiliser une app en modifiant son callback dans les deux sens casse un côté à chaque fois.

1. Créez une OAuth App locale dans les Developer settings de votre compte. 2. Copiez son ID client et générez un secret client. 3. Renseignez les trois valeurs d'environnement et redémarrez. 4. Répétez une fois avec votre vrai domaine avant la mise en ligne.

• Mettre l'app web en ligne en 5 minutes
• Configurer la base de données

Créer l'OAuth App locale

1. Ouvrez github.com et connectez-vous. Cliquez sur votre photo de profil en haut à droite → Settings.

2. Descendez en bas de la barre latérale gauche et ouvrez Developer settings → OAuth Apps → New OAuth App.

3. Application name : par exemple supastack local — les utilisateurs voient ce nom sur la page d'autorisation de GitHub. Homepage URL : http://localhost:3000. Authorization callback URL : http://localhost:3000/api/auth/callback/github. Cliquez sur Register application.

4. Sur la page de l'app, copiez l'ID client, cliquez sur Generate a new client secret et copiez le secret immédiatement — GitHub ne le montre qu'une fois, même si vous pouvez toujours en générer un autre.

Créer l'OAuth App de production

Répétez les mêmes étapes New OAuth App avec le nom de votre produit, Homepage URL https://yourdomain.com et Authorization callback URL https://yourdomain.com/api/auth/callback/github.

Gardez les identifiants de chaque app dans leur propre environnement : la paire de l'app locale vit dans apps/web/.env.local, celle de l'app de production dans le magasin de secrets de votre hébergeur. Le secret local ne doit jamais atteindre la configuration de production et inversement.

Ajouter les valeurs à l'app

Renseignez les trois lignes ci-dessous dans apps/web/.env.local avec les identifiants de l'app locale. AUTH_GITHUB_ENABLED=true active le bouton ; la paire identifie l'OAuth App.

Le secret client reste côté serveur — jamais dans des variables NEXT_PUBLIC_/EXPO_PUBLIC_ et jamais committé. Redémarrez le serveur de dev après modification.

Ne réutilisez aucune valeur GITHUB_APP_* que vous pourriez voir ailleurs — elles appartiennent à une intégration GitHub App sans rapport, pas à la connexion utilisateur. Le docs/github-auth-setup.md du kit parcourt tout le flux de bout en bout si vous voulez une seconde référence.

# 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

Vérifier et dépanner

Ouvrez http://localhost:3000/auth et cliquez sur le bouton GitHub. Autorisez l'app sur github.com et confirmez que vous revenez connecté.

Tant que AUTH_GITHUB_ENABLED=true n'est pas défini, l'option GitHub sur /auth reste visible mais désactivée — vérifiez les noms dans le fichier env, puis redémarrez. Activer le flag sans GITHUB_CLIENT_ID et GITHUB_CLIENT_SECRET fait échouer le démarrage et nomme la variable manquante.

Un mismatch de callback est l'échec habituel : l'Authorization callback URL de l'app doit égaler {APP_URL}/api/auth/callback/github exactement — protocole, hôte, port et chemin. Une erreur redirect_uri après le déploiement signifie généralement que la requête a frappé les identifiants de l'app locale alors que APP_URL dit production, ou l'inverse.

Redémarrez le serveur de dev après chaque modification d'env ; les valeurs ne sont lues qu'au démarrage.

• Configurer ensuite la base de données
• Vue d'ensemble des fournisseurs OAuth