Añadir el inicio de sesión con GitHub

Guía paso a paso para principiantes

Prerrequisitos: la app web corriendo en local y una base de datos migrada para cuentas reales. Necesitas una cuenta de GitHub — la misma que posee el repositorio vale. Gratis, unos 5 minutos por entorno.

Términos rápidos: una OAuth App de GitHub es el registro que permite a GitHub iniciar la sesión de los usuarios por ti. A diferencia de la mayoría de proveedores, una OAuth App permite exactamente una Authorization callback URL — así que local (http://localhost:3000/…) y producción (https://yourdomain.com/…) necesitan cada una su propia app. Reutilizar una app editando su callback de un lado a otro rompe un lado cada vez.

1. Crea una OAuth App local en los Developer settings de tu cuenta. 2. Copia su Client ID y genera un Client Secret. 3. Define los tres valores de entorno y reinicia. 4. Repite una vez con tu dominio real antes de salir en vivo.

• Lanza la app web en 5 minutos
• Configurar la base de datos

Crear la OAuth App local

1. Abre github.com e inicia sesión. Haz clic en tu foto de perfil arriba a la derecha → Settings.

2. Baja al final de la barra lateral izquierda y abre Developer settings → OAuth Apps → New OAuth App.

3. Application name: algo como supastack local — los usuarios ven este nombre en la página de autorización de GitHub. Homepage URL: http://localhost:3000. Authorization callback URL: http://localhost:3000/api/auth/callback/github. Haz clic en Register application.

4. En la página de la app copia el Client ID, haz clic en Generate a new client secret y copia el secreto inmediatamente — GitHub solo lo muestra una vez, aunque siempre puedes generar otro.

Crear la OAuth App de producción

Repite los mismos pasos de New OAuth App con el nombre de tu producto, Homepage URL https://yourdomain.com y Authorization callback URL https://yourdomain.com/api/auth/callback/github.

Guarda las credenciales de cada app en su propio entorno: el par de la app local vive en apps/web/.env.local, el par de la app de producción en el almacén de secretos de tu host. El secreto local nunca debe llegar a la configuración de producción ni viceversa.

Añadir los valores a la app

Escribe las tres líneas de abajo en apps/web/.env.local usando las credenciales de la app local. AUTH_GITHUB_ENABLED=true enciende el botón; el par identifica la OAuth App.

El client secret se queda solo en el servidor — nunca en variables NEXT_PUBLIC_/EXPO_PUBLIC_ y nunca subido a Git. Reinicia el servidor de desarrollo tras editar.

No reutilices valores GITHUB_APP_* que puedas ver en otro sitio — pertenecen a una integración de GitHub App sin relación, no al inicio de sesión de usuarios. El docs/github-auth-setup.md del kit recorre todo el flujo de principio a fin si quieres una segunda referencia.

# 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

Verificar y solucionar problemas

Abre http://localhost:3000/auth y haz clic en el botón de GitHub. Autoriza la app en github.com y confirma que vuelves con la sesión iniciada.

Hasta que AUTH_GITHUB_ENABLED=true esté definido, la opción de GitHub en /auth permanece visible pero deshabilitada — revisa los nombres del archivo env y reinicia. Definir el flag sin GITHUB_CLIENT_ID y GITHUB_CLIENT_SECRET hace fallar el arranque y nombra la variable que falta.

Un callback mal configurado es el fallo habitual: la Authorization callback URL de la app debe ser exactamente {APP_URL}/api/auth/callback/github — protocolo, host, puerto y ruta. Un error redirect_uri tras desplegar suele significar que la petición tocó las credenciales de la app local mientras APP_URL dice producción, o al revés.

Reinicia el servidor de desarrollo tras cada edición de env; los valores solo se leen al arrancar.

• Configurar a continuación la base de datos
• Resumen de proveedores OAuth