Implementación de Implicit Flow con Twitch en React

Curso de OAuth 2.0 y OpenID Connect: Flujos de Autenticación y Casos de Estudio

Contenido del curso

Introducción a OAuth 2.0 y OIDC

JSON Web Tokens

Open Authorization 2.0

Open ID Connect

OAuth y OIDC en producción

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:11

Implementación de Implicit Flow con Twitch en React

Curso de OAuth 2.0 y OpenID Connect: Flujos de Autenticación y Casos de Estudio

Clase 16 de 25

Clase 16 / 25

Recursos

Implementar autenticación OAuth en aplicaciones de una sola página requiere entender un flujo específico que sacrifica parte de la seguridad a cambio de simplicidad. El Implicit Flow es precisamente ese mecanismo: no existe intercambio de código de autorización, sino que el access token se entrega directamente en el fragmento de la URL tras la aprobación del usuario. A continuación se explica paso a paso cómo conectar una SPA de React con la API de Twitch usando este flujo.

¿Cómo se diferencia el Implicit Flow del Authorization Code Flow?

A diferencia del Authorization Code Flow, donde primero se obtiene un código y luego se intercambia por un token en el servidor, el Implicit Flow elimina ese paso intermedio [0:20]. El cliente envía un authorization request directamente al servidor de autorización y, cuando el usuario acepta el consent request, el servidor responde redirigiendo con el access token incluido en el hash fragment de la URL. Esto lo hace más sencillo de implementar, pero también más vulnerable.

Otro punto importante es que no se necesita un client secret [1:28]. Como la aplicación es una SPA que se ejecuta completamente en el navegador, no existe un lugar seguro para almacenar ese secreto. Por eso solo se requiere el client ID que se obtiene al registrar la aplicación.

¿Cómo registrar la aplicación y construir la URL de autorización?

El primer paso es ir a Twitch Developers en dev.twitch.tv, acceder a la consola y registrar una nueva aplicación [1:00]. Se asigna un nombre, se define la URL de redireccionamiento (en este caso localhost:3004/callback) y se selecciona una categoría. Una vez creada, se copia el client ID.

Para construir la URL del authorization request en la SPA de React con Vite, se utiliza un hook personalizado [2:10] que define:

La URL base de autenticación de Twitch, que termina en /authorize.
Los scopes o permisos solicitados: lectura del email del usuario y acceso a los canales que sigue [2:30].
Un estado aleatorio para protección contra ataques.
El parámetro response_type=token, que indica al servidor que debe devolver el access token directamente, sin código intermedio [3:10].

¿Por qué se usa session storage para el estado?

En una SPA no existe un servidor propio donde persistir el estado en una cookie segura [2:50]. La alternativa es almacenarlo en el session storage del navegador. Se implementa una utilidad llamada useSession que verifica si ya existe un valor de estado guardado o genera uno aleatorio nuevo. Este valor se enviará como parámetro state en la URL y luego se comparará cuando Twitch redirija de vuelta.

¿Cómo capturar el access token y protegerse contra CSRF?

Cuando el usuario aprueba los permisos en el consent request de Twitch, la aplicación es redirigida a la URL de callback con el access token en el hash fragment [3:50]. Para extraerlo, se usa un useEffect de React que, al montarse el componente, accede a window.location.hash.

Una utilidad llamada getHashParams se encarga de parsear ese fragmento [4:20]:

Remueve el carácter # inicial.
Hace un split de los parámetros.
Busca la clave específica solicitada, como access_token.

¿Cómo validar el estado para prevenir ataques cross-site request forgery?

El CSRF es un riesgo real en clientes SPA [4:35]. La protección consiste en:

Extraer el state que llega en la respuesta de Twitch.
Recuperar el state almacenado previamente en el session storage.
Comparar ambos valores: si son diferentes y además existe un access token en la respuesta, se debe rechazar la solicitud y mostrar un error [5:00].

Si la validación es exitosa, el access token se establece en el estado de React y se pueden realizar llamadas a los endpoints de la API de Twitch, como obtener información del usuario o listar los canales seguidos [5:30].

Un detalle de seguridad adicional: tras capturar el token del hash fragment, se elimina de la URL para no exponerlo visualmente al usuario [5:50].

¿Qué precauciones de seguridad tener con el Implicit Flow?

Aunque funcional, este flujo no se recomienda para aplicaciones en producción por sus retos de seguridad [6:05]. Un error común y grave es almacenar el access token en el local storage, donde queda expuesto a ataques de cross-site scripting (XSS). La recomendación es mantenerlo únicamente en memoria (estado de React) y manejarlo con extremo cuidado.

Si quieres poner en práctica lo aprendido, el reto propuesto es implementar Implicit Flow con un servicio diferente a Twitch, utilizando su propia documentación de OAuth. Comparte tu experiencia y qué servicio elegiste.

Resumen

¿Cómo se diferencia el Implicit Flow del Authorization Code Flow?

¿Cómo registrar la aplicación y construir la URL de autorización?

Para construir la URL del authorization request en la SPA de React con Vite, se utiliza un hook personalizado [2:10] que define:

La URL base de autenticación de Twitch, que termina en /authorize.
Los scopes o permisos solicitados: lectura del email del usuario y acceso a los canales que sigue [2:30].
Un estado aleatorio para protección contra ataques.
El parámetro response_type=token, que indica al servidor que debe devolver el access token directamente, sin código intermedio [3:10].

¿Por qué se usa session storage para el estado?

¿Cómo capturar el access token y protegerse contra CSRF?

Una utilidad llamada getHashParams se encarga de parsear ese fragmento [4:20]:

Remueve el carácter # inicial.
Hace un split de los parámetros.
Busca la clave específica solicitada, como access_token.

¿Cómo validar el estado para prevenir ataques cross-site request forgery?

El CSRF es un riesgo real en clientes SPA [4:35]. La protección consiste en:

Extraer el state que llega en la respuesta de Twitch.
Recuperar el state almacenado previamente en el session storage.
Comparar ambos valores: si son diferentes y además existe un access token en la respuesta, se debe rechazar la solicitud y mostrar un error [5:00].

Un detalle de seguridad adicional: tras capturar el token del hash fragment, se elimina de la URL para no exponerlo visualmente al usuario [5:50].

¿Qué precauciones de seguridad tener con el Implicit Flow?

Introducción a OAuth 2.0 y OIDC

Qué aprenderás en OAuth y OpenID Connect

¿Qué es la autenticación?

Autorización y Control de Acceso Basado en Roles

OAuth y OpenID Connect para qué sirve cada uno

Cómo proteger endpoints con tokens en Express

Flujo de Open Authorization y Open ID con Discord

JSON Web Tokens

Estructura y firma de un JSON Web Token

Sesiones vs JWT: qué cambia y cuándo usarlos

Firmado de JSON Web Tokens con Librería JWT en Node.js

Verificar JWT con HS256 y RS256 en Node.js

Open Authorization 2.0

Implementación de flujos OAuth 2.0 con APIs populares

Flujos de autorización en OAuth 2.0

Cómo elegir el flujo correcto en OAuth 2.0

Authorization Code Flow con Spotify paso a paso

PKCE con OAuth 2.0 en la API de Twitter

Implementación de Implicit Flow con Twitch en React

Implementación de Client Credentials Flow en Discord

Implementación de Resource Owner Password Flow con Auth0

Open ID Connect

OpenID Connect sobre OAuth 2.0

Implicit Flow con Form Post en Auth0

Qué es el hybrid flow en OpenID Connect

OAuth y OIDC en producción

Buenas prácticas y riesgos de los JSON Web Tokens (JWT)

Buenas prácticas de OAuth y cuándo no usarlo

Autenticación Rápida con NextAlt y GitHub en Next.js

Qué sigue después de OAuth y OpenID

Implementación de Implicit Flow con Twitch en React

Progreso del curso

Introducción a OAuth 2.0 y OIDC

JSON Web Tokens

Open Authorization 2.0

Open ID Connect

OAuth y OIDC en producción

Recursos

Recursos