Flujos OAuth 2.0: ¿Cuál Necesitas?

OAuth 2.0: Deja que los Usuarios Inicien Sesión Sin Almacenar Contraseñas

OAuth 2.0 es un protocolo de delegación. En vez de que tu app recolecte y almacene contraseñas, redireccionas a los usuarios a Google/GitHub/etc., se autentican allí, y vuelven con un token. Tu app nunca ve la contraseña.

Términos Clave

Término	Significado
Resource Owner	El usuario
Client	Tu aplicación
Authorization Server	Google, GitHub, Auth0 — quién autentica al usuario
Resource Server	La API que tiene los datos del usuario
Access Token	Token de corta duración para acceder APIs
Refresh Token	Token de larga duración para obtener nuevos access tokens
Scope	Qué permisos otorga el token (ej: `read:email`)

Flujo 1: Authorization Code + PKCE (Recomendado)

Para web apps, SPAs, apps móviles. El flujo más seguro para aplicaciones orientadas al usuario.

1. Tu app redirige al usuario al authorization server:
   GET https://auth.example.com/authorize?
     response_type=code&
     client_id=TU_CLIENT_ID&
     redirect_uri=https://tuapp.com/callback&
     scope=openid email profile&
     state=token_csrf_aleatorio&
     code_challenge=SHA256(code_verifier)&
     code_challenge_method=S256

2. Usuario inicia sesión y consiente

3. Auth server redirige de vuelta con un código:
   https://tuapp.com/callback?code=AUTH_CODE&state=token_csrf_aleatorio

4. Tu servidor intercambia el código por tokens:
   POST https://auth.example.com/token
   grant_type=authorization_code&
   code=AUTH_CODE&
   redirect_uri=https://tuapp.com/callback&
   client_id=TU_CLIENT_ID&
   code_verifier=CODE_VERIFIER_ORIGINAL

5. Respuesta:
   {
     "access_token": "eyJ...",
     "token_type": "Bearer",
     "expires_in": 3600,
     "refresh_token": "abc..."
   }

Flujo 2: Client Credentials

Para comunicación server-to-server. Sin usuario involucrado.

POST https://auth.example.com/token
grant_type=client_credentials&
client_id=TU_CLIENT_ID&
client_secret=TU_CLIENT_SECRET&
scope=read:data

Cuál Flujo Usar

Tipo de Aplicación	Flujo	Notas
Web app (server-rendered)	Authorization Code + PKCE	Servidor puede guardar client_secret
SPA (React, Vue)	Authorization Code + PKCE	Sin client_secret (cliente público)
App móvil	Authorization Code + PKCE	Usa deep links para redirect
Server-to-server	Client Credentials	Sin interacción del usuario
Herramienta CLI	Device Code	Usuario autoriza en otro dispositivo

Flujos Deprecados (No Uses)

Implicit Flow: Tokens en el fragmento de la URL. Deprecado — usa Authorization Code + PKCE.
Resource Owner Password Credentials: App recolecta username/password directamente. Derrota el propósito de OAuth.

Implementación Común (Next.js + NextAuth)

import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';

export const { handlers, auth } = NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
});

Decodifica tus tokens: Decodificador JWT — inspecciona access tokens e ID tokens OAuth.