En este artículo muestro múltiples características del navegador muy importantes al crear un proyecto para un cliente, es continuación del anterior:
Contexto
Estoy volviendo al proyecto base (un NextJS) en donde ya tenía listo el flujo de autorización y autenticación (es Authorization code grant flow) con un simple botón y verificación del token.
Pero hay un tema por ver, tengo que iniciar sesión con el SDK de Firebase y me tengo que preocupar por obtener el token de Twitch, que no es más que la autorización del cliente. Siguiendo un poco el flujo de Authorization code grant flow, el token me quedo del lado del server (o en un lambda function).
Al tratarse de NextJS, no es como que tenga forma de comunicar endpoints uno con otros en runtime, justo porque son serverless functions realmente; ejecuta una operación y ya, no es para mantenerse escuchando.
Primer problema
Si tengo el token generado desde un lambda function tengo 2 opciones:
- Retorno ese token en la respuesta al cliente
- Lo envió por una cookie
Como mi objetivo es aprovechar el servidor, tratar de hacer las llamadas como GET Clips desde el servidor y solo dar la info en la pantalla; utilizaré cookies.
Cookies
Bueno primero configuro las cookies gracias a cookies-next, ya el resto es bastante sencillo:
La parte de 'token' es el key y la variable access_token es el value, ya con esto el servidor podrá dejarlo en el browser; pero esto es super inseguro.
Explicando un poco los valores:
- Max Age: El tiempo que vivirá la cookie, las cookies tienen la ventaja de borrarse en un tiempo determinado. Hay otro de expires similar, pero ya no se recomienda.
- Http Only: El javascript no podrá leer esta cookie
- Same Site: Es para controlar si la cookie se va a enviar entre sitios, hay varios valores.
- Secure: Si solo se permite leer la cookie si es https
Para entender la parte de req y res, mejor leánlo de la librería oficial, es para que funcione desde el lado del servidor. Más detalle:
Ya luego en el getServerSideProps, que es justo antes de mostrar la pantalla, obtengo esas cookies (sigue siendo el lado del server).
El posible problema es saber si se inició sesión previamente, para eso debo verificar por 2 puntos:
- Firebase y su flujo
- La cookie con el token de twitch
Debo pensar una forma de asegurar una correcta sincronización con ambas llaves.
Cache Control
Es un simple header que puede librarte de muchiiiiisimos problemas, simplemente se lo agregas a los headers del sitio y el navegador lo guarda.
Aunque con cuidado que el navegador del cliente lo guardará y no hay forma de revertir en producción. Seguí el ejemplo que me da NextJS:
- La data se considera fresca por unos 10 segundos
- En los siguiente 59 segundos la data queda obsoleta, pero se sigue usando; además se realiza una llamada en segundo plano para validar y refrescar la caché
- Si se vuelve a consultar después de los 60 segundos, no se usa la data en caché; se realiza la llamada y se rellena de nuevo la caché.
En mi caso quiero que todo mi sitio tenga este control; sí me espero a gente queriendo actualizar mucho, puede que después suba un poco más los valores de max age.
Referencias
Jeff Posnick
Peter Coles
