Autenticación del lado del servidor con Remix, Prisma y la plataforma web

Rate this content
Bookmark

En esta charla, veremos una demostración en vivo de cómo construir una autenticación personalizada. Cuando tienes las herramientas adecuadas (y las tenemos), la autenticación puede ser bastante simple y segura. Esto es más (y mejor) que simplemente: "Instala esta biblioteca y estás listo para empezar". Cuando terminemos, tendremos nuestro propio código de autenticación que puede evolucionar con nuestros requisitos en constante cambio sin necesidad de aprender APIs específicas de alguna biblioteca. Aprovecharemos la plataforma web de la forma en que se supone que debe hacerse para brindarnos una autenticación simple y segura del lado del servidor para la web.


Puedes consultar las diapositivas de la charla de Kent aquí así como el código de demostración.

34 min
18 Feb, 2022

Video Summary and Transcription

Esta charla trata sobre la autenticación del lado del servidor con Remix, Prisma y la plataforma web. Cubre cómo agregar autenticación a una aplicación de Remix, solución de problemas y configuración de inicio de sesión, manejo de inicio de sesión de usuario y creación de sesiones, creación de sesiones y redirecciones de usuario, manejo de recuperación y validación de ID de usuario, y trabajo con cookies en Remix. El orador enfatiza que Remix está listo para producción y es adecuado para aplicaciones empresariales. Remix simplifica el modelo mental y mejora el rendimiento al cerrar la brecha de red entre el front-end y el back-end.

Available in English

1. Introducción a la autenticación del lado del servidor con Remix

Short description:

Hola Node Congress, mi nombre es Kent C. Dodds y estoy muy emocionado de dar esta charla sobre autenticación del lado del servidor con Remix, Prisma y la plataforma web. Estamos trabajando en Node porque Node es increíble y Remix se ejecuta en Node y me encanta Remix. Esta charla es una demostración de código en vivo de cómo agregar autenticación a una aplicación existente basada en el tutorial de Remix. Es una versión condensada, pero debería darte una buena idea de cómo Remix aborda la autenticación.

Hola Node Congress, mi nombre es Kent C. Dodds y estoy muy emocionado de dar esta charla sobre autenticación del lado del servidor con Remix, Prisma y la plataforma web. Estamos trabajando en Node porque Node es increíble y Remix se ejecuta en Node y me encanta Remix.

Entonces, si no estás familiarizado conmigo, trabajo en Remix como director de experiencia de desarrollo, así que si has probado Remix y tu experiencia de desarrollo no fue buena, es mi culpa, lo siento. Estoy trabajando en mejorar todo eso. También soy el creador de epicreact.dev y testingjavascript.com y puedes visitar mi sitio web kentcdodds.com porque es bastante legítimo.

Lo que esta charla es una demostración de código en vivo de cómo agregar autenticación a una aplicación existente y en realidad nos estamos basando en parte del tutorial de Remix. Así que si has seguido el tutorial de chistes en Remix, es más o menos lo que estamos haciendo aquí. Esto no está completo. Solo tengo unos 20 minutos contigo, por lo que no tendrá todo, pero debería darte una idea correcta de cómo Remix aborda la autenticación, y creo que lo hace de una manera realmente buena.

2. Agregando Autenticación a la Aplicación Remix

Short description:

Comencemos agregando autenticación a nuestra aplicación Remix. Actualmente, cualquiera puede agregar chistes sin autenticación, y queremos evitar eso. Comenzaremos agregando un modelo de usuario en el archivo schema.prisma y asociaremos los chistes con usuarios específicos. Almacenaremos contraseñas encriptadas para mayor seguridad. Después de actualizar Prisma, crearemos un usuario llamado Cody y usaremos su ID para asociar los chistes con él. Finalmente, enviaremos los cambios a la base de datos y resolveremos cualquier error de tipo causado por la creación de chistes sin jokesters asociados.

Comencemos agregando autenticación a nuestra aplicación Remix. Actualmente, cualquiera puede agregar chistes sin autenticación, y queremos evitar eso. Comenzaremos agregando un modelo de usuario en el archivo schema.prisma y asociaremos los chistes con usuarios específicos. Almacenaremos contraseñas encriptadas para mayor seguridad. Después de actualizar Prisma, crearemos un usuario llamado Cody y usaremos su ID para asociar los chistes con él. Finalmente, enviaremos los cambios a la base de datos y resolveremos cualquier error de tipo causado por la creación de chistes sin jokesters asociados.

Entonces, vamos a comenzar porque no tenemos mucho tiempo, vamos a meternos directamente en la codificación. Aquí vamos a quitar la pantalla completa, deshacernos de esto, Remix lo puedes encontrar en Remix.run y puedes leer todo al respecto y desplazarte por esto, en realidad es una experiencia de desplazamiento bastante genial para ver qué es Remix.

Esta es la aplicación en la que vamos a trabajar, Remix, es genial y divertida. Es una aplicación de chistes donde puedes obtener chistes aleatorios y tendrá un montón de chistes diferentes para ti. Es bastante divertido y luego tienes enlaces permanentes y cosas así, y en el tutorial agregamos la capacidad de eliminar los chistes, puedes agregar los tuyos propios, y esto funciona en este momento, pero el problema es que no hay autenticación aquí, por lo que cualquier persona en el mundo podría agregar sus propios chistes, nunca sabríamos quién lo hizo y las personas que agregan chistes no pueden eliminar esos chistes y no queremos agregar esa capacidad hasta que puedan iniciar sesión porque no queremos que las personas eliminen los chistes de otras personas.

Entonces eso es lo que vamos a agregar a nuestra aplicación, simplemente la capacidad de autenticarse. Comenzaremos en nuestro archivo schema.prisma, así que ya tenemos Prisma funcionando y almacenando todos nuestros chistes y tenemos una semilla para poner todos estos chistes en la base de datos, pero queremos agregar autenticación de usuario y para hacer eso vamos a necesitar un modelo de usuario para poder asociar chistes a usuarios específicos. Así que vamos a decir modelo usuario y Copilot nos ayudará con esto. No todo esto es lo que queremos, así que obtenemos un ID, me gusta el UUID personalmente, gracias Copilot. Queremos la fecha de creación, queremos la fecha de actualización y luego vamos a tener un nombre de usuario, no solo un nombre y esto debe ser único. Y luego realmente no necesitamos un correo electrónico aquí, así que nos desharemos de eso, pero sí queremos una contraseña, pero no estamos almacenando contraseñas sin procesar, vamos a almacenar un hash de las contraseñas para que sea seguro. Y luego tenemos una relación con el modelo de chiste dentro de este usuario, así que tendremos chistes y eso es un array de chistes. Y parece que mi datetime, o Copilot no lo entendió del todo bien, así que esto se establecerá en now, y listo. Ahora estamos obteniendo un subrayado rojo aquí porque el modelo de chiste no está asociado al modelo de usuario y, uf, eso estuvo cerca, teníamos dos N justo ahí. Ahora queremos agregar un ID de jokester, y esto será una cadena, y luego tendremos el jokester, que en este caso será un usuario, y agregaremos una relación con los campos para esta relación, que es solo el ID del jokester, ahí vamos, gracias, y las referencias son solo el ID, y luego en la eliminación haremos cascada. Entonces, cuando eliminemos al jokester, todos sus chistes desaparecerán. Asegurémonos de escribir esto correctamente. Listo. Bien, genial, hemos actualizado Prisma, así que vamos a ejecutar un par de scripts de Prisma, así que ejecutaremos npx Prisma db push, para enviar todos estos cambios. Sí, vamos a eliminar todas las cosas, y ahora deberíamos tener algunos errores de tipo aquí mismo, porque ahora estamos sembrando la base de datos con chistes que no tienen jokesters asociados. Así que vamos a hacer nuestro primer jokester. Y este será Cody, vamos a esperar a que Prisma cree al usuario, y los datos para esto tendrán el nombre de usuario de Cody. Y el hash de la contraseña, en realidad será twixrocks. Y tengo esto pegado aquí, porque no quieres verme escribir eso. Pero básicamente es twixrocks, encriptado. Y esa será nuestra contraseña para nuestro usuario Cody. Ahora que tenemos a Cody, podemos usarlo para generar o crear todos estos chistes. Así que diremos que nuestros datos serán todas las propiedades del chiste más el ID del jokester de Cody.ID. Y eso puede ser nuestros datos. Y ahora, con suerte, nuestros problemas de TypeScript desaparecerán.

3. Solución de problemas y Configuración de inicio de sesión

Short description:

No estoy seguro de por qué no funciona, vamos a averiguar qué está pasando aquí. Sabemos que lo obtenemos del encabezado de referencia. Muchas gracias. Ahora hemos podido sembrar nuestra base de datos y ahora tenemos usuarios y todo y todo sigue funcionando. Ahora, crear un chiste no funcionará porque necesitas tener un ID de usuario para crear chistes, pero cada uno de estos chistes está asociado a nuestro usuario Cody, así que ahora lo único que tenemos que hacer es permitirnos iniciar sesión como nuestro usuario Cody para poder agregar chistes adicionales y cosas a nuestra aplicación. Vamos a ir a nuestro inicio de sesión, que ya está completamente codificado para nosotros. Vamos a /login, luego veremos que tenemos tanto el inicio de sesión como el registro aquí. No tengo mucho tiempo, así que ya he codificado todo esto y ya tenemos nuestra acción para manejar el envío del formulario.

No estoy seguro de por qué no funciona, vamos a averiguar qué está pasando aquí. ¿ID de Jokester, estoy escribiendo algo mal? ID de Jokester. Ahí vamos. Tienes que escribir las cosas correctamente en la programación, se vuelve un poco divertido si no lo haces. O más bien, de manera consistente. No tiene que estar correcto, pero tiene que ser consistente.

Sabemos que lo obtenemos del encabezado de referencia. Muchas gracias. De acuerdo. Entonces tengo este script aquí llamado npm run setup DB. Esto va a enviar y luego regenerar todo. Y por supuesto, explota porque el usuario no existe en la base de datos. Así que vamos a Prisma DB reset. Oh, maldición. No, es Prisma DB push. Pensé que ya lo había hecho. Ahora es Prisma DB migrate dev o no, es solo Prisma. Oh, hombre. Me estoy enredando todo. ¿Qué estoy haciendo? Sí. Y esto será usuarios. Genial.

De acuerdo. Ahora hemos podido sembrar nuestra base de datos y ahora tenemos usuarios y todo y todo sigue funcionando. Sí, técnicamente todavía estoy ejecutando esto. Técnicamente la aplicación todavía funciona hasta que intentemos crear un chiste. Ahora crear un chiste no funcionará porque necesitas tener un ID de usuario para crear chistes, pero cada uno de estos chistes está asociado a nuestro usuario Cody, así que ahora lo único que tenemos que hacer es permitirnos iniciar sesión como nuestro usuario Cody para poder agregar chistes adicionales y cosas a nuestra aplicación. Con eso en mente, vamos a ir a nuestro inicio de sesión, que ya está completamente codificado para nosotros. Vamos a /login, luego veremos que tenemos tanto el inicio de sesión como el registro aquí. No tengo mucho tiempo, así que ya he codificado todo esto y ya tenemos nuestra acción para manejar el envío del formulario, por lo que puedes ver el envío del formulario justo ahí.

4. Manejo de inicio de sesión de usuario y creación de sesión

Short description:

Necesitamos escribir la lógica para iniciar sesión de un usuario y obtener su información al crear una nueva broma. Crearemos un nuevo archivo llamado SessionServerTS en la carpeta utils. Contendrá una función asíncrona llamada login que acepta un nombre de usuario y una contraseña como cadenas de texto. Usando la conexión a la base de datos desde el servidor db, encontraremos al usuario basado en el nombre de usuario. Si el usuario no existe, devolveremos null. Si el usuario existe, compararemos la contraseña proporcionada con la contraseña cifrada usando bcrypt. Si las contraseñas no coinciden, devolveremos null. Si todo está bien, devolveremos al usuario.

Aquí se maneja nuestra validation para mostrar errores de validation y todas esas cosas. Eso ya está codificado para nosotros. Así que todo lo que tenemos que hacer es escribir la lógica para iniciar sesión de un usuario y luego escribiremos algo de lógica para obtener la información de los usuarios cuando creen una nueva broma.

Entonces vamos a crear un nuevo archivo para manejar todo nuestro tema de sesión. Vamos a utils y crearemos un nuevo util llamado SessionServerTS. Este es solo un archivo de servidor. Por eso se llama Session.server. Y vamos a exportar una nueva función. Es una función asíncrona llamada login. Esto aceptará un nombre de usuario y una contraseña. Ambas cosas son cadenas de texto y son requeridas.

Ahora solo necesitamos, vamos a importar la database en realidad. db vendrá de nuestro servidor db. Esta es nuestra conexión a Prisma. Y diremos user.findFirst y diremos where userName. Y ahora tendremos nuestro usuario, oh espera. Entonces, si no tenemos un usuario, entonces no hay usuario con ese nombre de usuario. Así que simplemente devolveremos null y nuestra interfaz de usuario lo manejará y dirá que tu nombre de usuario o contraseña están equivocados.

Si tenemos un usuario, necesitamos verificar que la contraseña sea correcta. Usaremos bcrypt para generar el hash. Podemos usar bcrypt para comparar el hash. Así que diremos bcrypt de bcrypt.js. Y con eso podemos decir const isCorrectPassword = bcrypt, oh vamos a esperar esto, es asíncrono, porque es lento, y esa es en realidad la característica, es lento y por eso es seguro. Qué curioso. Así que si esta no es la contraseña correcta, entonces devolveremos null y dejaremos que nuestra interfaz de usuario diga que el nombre de usuario o la contraseña están equivocados. Y ahora, si todas esas cosas están bien, podemos devolver al usuario. Eso es autenticación, eso es inicio de sesión, cuando tienes tu propia database y solo estás cifrando cosas con bcrypt. En realidad es bastante simple. Y así podemos iniciar sesión, podemos obtener un usuario, pero necesitamos crear una sesión.

5. Inicio de sesión de usuario y creación de sesión

Short description:

Obtengamos nuestro usuario llamando a la función de inicio de sesión con el nombre de usuario y la contraseña. Si no hay usuario, devolveremos una solicitud incorrecta con un mensaje de error. De lo contrario, mostraremos en la consola al usuario y procederemos a crear la sesión del usuario y redirigirlo a la página de chistes. En Remix, gestionamos las sesiones utilizando cookies y la función de almacenamiento de sesión de cookies. Configuramos la cookie estableciendo su nombre y otras propiedades.

Entonces vamos a hacer eso a continuación, pero sigamos con esto por ahora. Así que obtengamos nuestro usuario. User es await, login, lo traeremos, nombre de usuario y contraseña, y si no hay usuario, entonces devolveremos una solicitud incorrecta con un error de formulario que diga, hey, este usuario no existe, o lo que queramos decir. Así que usuario, o sí, nombre de usuario o contraseña incorrectos. Gracias, copilot, eso ayuda mucho. De lo contrario, si realmente hay un usuario, entonces podemos redirigir y todo eso. Y lo haremos más tarde. Solo asegurémonos de que podamos obtener el usuario primero. Así que mostremos en la consola al usuario, y ahora esa consola se mostrará en nuestra salida de registro aquí. Voy a despejar un poco el espacio. Diremos Cody, y Twix rocks, y aún no está implementado. En realidad no estamos redirigiendo, pero en el lado del servidor estamos obteniendo al usuario. Así que eso funciona totalmente. ¡Hurra! Eso es increíble. E incluso nuestra validation también funciona. Así que si voy a registrarme, y nos queda solo un par de cosas, vamos a obtener toda nuestra lógica de validation y todo eso. Lo construimos antes. Así que genial. Ahora lo que necesitamos hacer es crear la sesión del usuario y redirigirlo a la página de chistes. Así que hagamos eso.

En nuestro servidor de sesión, la forma en que gestionamos las sesiones en Remix es utilizando cookies, y tenemos soporte incorporado para esta API de la plataforma web. Así que vamos a importar un par de cosas de Remix. Y lo que queremos es crear el almacenamiento de sesión de cookies. Y aquí obtendremos nuestro almacenamiento de create cookie session storage. Y hay un par de propiedades que vas a configurar para esto. Y todas están en cookie. Así es como configuramos nuestra cookie. Así que hay un par de cosas que queremos hacer al configurar nuestra cookie. Primero, necesitamos darle un nombre y puedes llamarlo como quieras. Está en el espacio de nombres de tu dominio.

6. Creación de Sesiones de Usuario y Redirecciones

Short description:

Crearemos una cookie de sesión llamada la cookie de sesión de chistes de Remix y la codificaremos por motivos de seguridad. Para asegurarnos de que el secreto esté configurado, lo definiremos como una constante y lanzaremos un error si no está definido. La cookie se establecerá como solo HTTP y se aplicará solo a conexiones seguras. La duración máxima se establecerá en 30 días. Crearemos una función llamada createUserSession que tome el ID de usuario y un parámetro opcional redirectTo. La redirección predeterminada será a la ruta raíz.

Entonces lo llamaré la cookie de sesión de chistes de remix. Eso me parece lógico. Y también queremos codificar esta cookie. Así que incluso si el usuario abre sus herramientas de desarrollo y mira la cookie, no tendrá idea de qué es esto. Así que la codificaremos. Y también... Significa que incluso si intentan cambiarla o algo así, sabremos que la han estropeado. Así que tenemos un secreto. Y esto es process.env.SESSION_SECRET. Y con eso, por supuesto, TypeScript se enfada con nosotros por esto. Así que lo haremos constante y llamaremos a esto sessionSecret. Y diremos si no está definido, entonces lanzaremos un nuevo error que diga, vamos , Copilot, gracias. El secreto de sesión debe estar configurado. Genial. Así que tenemos nuestro secreto configurado.

Queremos establecer esto como solo HTTP, para que los usuarios o scripts de terceros no puedan acceder a esta cookie en el navegador. Ese es uno de los grandes problemas de usar JWT en el almacenamiento local. Así que sí, solo HTTP. También queremos que solo se aplique a conexiones seguras, para evitar ataques de intermediarios o raramente, supongo. Y luego la duración máxima. No, no siete días. Hagamos 30 días. ¿Quién quiere iniciar sesión en una aplicación de chistes cada siete días? No yo. No. De acuerdo, genial. Así que ahora hemos configurado nuestro almacenamiento, ahora podemos crear sesiones con este almacenamiento.

Vamos a crear una función llamada createUserSession con el ID de usuario como una cadena. Y también podríamos tener un redirectTo para que redirectTo sea configurable, pero simplemente siempre los redirigiremos a la barra diagonal, ¿sabes qué? Hagámoslo. Digamos, redirectTo string. Así pueden controlar a dónde quieren que vaya el usuario cuando creamos esta sesión de usuario.

7. Implementación de Gestión de Sesiones Seguras en Aplicaciones Web

Short description:

Vamos a crear nuestra sesión y crear un nuevo objeto de sesión. El ID de usuario se establece en la sesión y se devuelve una redirección a la ubicación deseada. El encabezado de configuración de la cookie se utiliza para establecer la cookie en el registro del navegador. La utilidad de creación de sesión de usuario de Remix se utiliza para crear objetos de respuesta.

Entonces vamos a capitalizar esto correctamente. Ahí vamos. De acuerdo, genial. Así que vamos a crear nuestra sesión, tenemos nuestra sesión igual a await storage, getSession. Lo que esto va a hacer es crear automáticamente una nueva sesión para nosotros. Así que no estamos obteniendo una sesión de una cookie existente. No estamos pasando una cookie existente. Así que simplemente creará un objeto de sesión para nosotros. Esto también es asíncrono. Así que necesitaremos hacerlo asíncrono.

Y ahora diremos session set user ID, user ID. Así que no tenemos que hacer ninguna búsqueda en la database ni nada por el estilo. Todo está en la cookie. Y sabemos que si está en la cookie, entonces el usuario está autenticado. Y no hay otra forma de que eso entre allí que no sea a través de nuestra sesión secreto de codificación y todas esas cosas. Así que esto es realmente muy seguro. Es genial.

Así que ahora que tenemos esto, el ID de usuario establecido en la sesión, vamos a devolver una redirección a donde sea que quisieran redirigir. Una parte importante de todo esto es que establecemos el encabezado de configuración de la cookie para que el navegador establezca la cookie en el registro de cookies del navegador o lo que sea. Así que tendremos algunos encabezados aquí con una configuración de cookie y usaremos el almacenamiento para confirmar la sesión. Y aquí está nuestra sesión. Y la sesión es asíncrona. Así que esperaremos eso. Y luego esta redirección es una utilidad de Remix que simplemente ayuda a crear objetos de respuesta. Así que eso es lo que estamos devolviendo de esta creación de sesión de usuario. Exportaremos esto. Y ahora podemos usar la creación de sesión de usuario justo aquí. Simplemente devolveremos la creación de sesión de usuario con user.id y redirect to, que viene de la interfaz de usuario. Así que según cómo llegamos a esta interfaz de usuario en primer lugar, las páginas que pueden redirigir a el inicio de sesión establecerán el redirect to. Así que el usuario puede volver directamente a donde empezó.

8. Manejo de la Recuperación y Validación del ID de Usuario

Short description:

En la página de chistes, aún no tengo un buen manejo de errores. No se está recuperando el ID del usuario, lo que causa problemas al intentar agregar un chiste. Para solucionar esto, implementaré una función require user ID en la parte superior de la acción del formulario. Esta función obtendrá el ID del usuario del objeto de solicitud, que contiene la cookie. De esta manera, podemos asegurarnos de que el usuario haya iniciado sesión antes de continuar con la validación del formulario.

De acuerdo, genial. Así que vamos a probar esto. Estamos en el inicio de sesión. Puedo decir, Cody, Twix, Rox, y boom. Ahora estoy en la página de chistes y tengo mi aplicación aquí mismo. Así que puedo ver mis cookies aquí mismo y boom, ahí está. Esa es mi sesión de RJ. Está todo codificado y demás. Como usuario, no tengo idea de qué es esto y si intento cambiarlo o algo así, no funcionaría porque mi servidor no sería capaz de decodificarlo en absoluto. Así que eso es genial.

Ahora, cuando quiero ir a la página de chistes/nuevo, quiero poder ingresar un chiste aquí y agregarlo, pero todo se desmorona. Aún no tengo un buen manejo de errores en esta página y la razón por la que se desmorona es porque aún no estamos obteniendo el ID del usuario. Así que vayamos a eso rápidamente en los últimos minutos que tenemos aquí y diremos, sí, gracias TypeScript. Me habrías salvado de un terrible destino. Lo que realmente quiero hacer es poner esto en la parte superior de mi acción para manejar este formulario, no quiero pasar por todo el proceso de validación y decir, hey, hiciste esto mal. Hiciste esto mal. Y luego finalmente lo hacen bien. Y solo entonces se dan cuenta, oh, rayos, en realidad debería haber iniciado sesión. Así que vamos a poner esto en la parte superior para obtener el ID del usuario y diremos, oh, espera, obtener ID del usuario. Y en realidad, llamémoslo require user ID para que sepamos que si no lo tienen necesitamos redirigirlos porque algunas rutas podrían ser opcionales en cuanto a tener un ID de usuario. En nuestro caso es obligatorio. Así que vamos a decir que es requerido aquí y pasaremos la solicitud. Entonces require user ID vendrá de nuestro servidor de sesión y exportaremos una función llamada require user ID que toma la solicitud y la solicitud es lo que contiene la cookie. Y esto es un objeto de solicitud. Y eso es solo, eso es un estándar web ahí, solicitud que viene del fetch de la web API, la API web. Súper genial. Así que ahí está la parte web de todo lo que estamos haciendo. También las cookies, pero sí, obtengamos nuestra sesión. Así que esperar almacenamiento, obtener sesión de los encabezados de la solicitud, obtener cookie. Así que la solicitud automáticamente tendrá la cookie porque así es como funciona el navegador.

9. Manejo del ID de Usuario y Creación de Chistes

Short description:

Si tenemos el ID de usuario, sabemos que el usuario ha iniciado sesión. Podemos redirigir a la página de inicio de sesión si el usuario no debería estar allí. Remix se encarga de estas redirecciones, lo que hace que el proceso sea simple y abstracto. Si el ID de usuario existe, lo devolvemos y lo asociamos con el ID del bromista. Luego podemos crear un chiste asociado al usuario. Agregar el registro y el cierre de sesión es sencillo, con la capacidad de destruir la sesión al cerrar sesión. En general, el proceso es simple y fácil de implementar.

Y si eso, um, si tenemos el ID de usuario o más bien, si no tenemos el ID de usuario, entonces sabemos que el usuario no ha iniciado sesión. Y en lugar de lanzar un nuevo error, en realidad podemos lanzar una redirección para decir redirigir al inicio de sesión. Entonces el usuario no debería estar aquí. Vamos a redirigirlos. Así que en lugar de eso, puedes lanzar respuestas en remix, lo que significa que esto es realmente agradable y abstracto doble. No tienes que hacer mucha lógica aquí. Como, ¿hay un ID de usuario? No lo hay. Así que déjame redirigir o lo que sea. No tienes que hacer eso en cada lugar. Necesitas el ID de usuario. Puedes hacerlo aquí mismo y remix se encargará de eso por ti. Es realmente, realmente impresionante. Y puedes hacer eso para, ¿están autorizados y muchas otras cosas también es realmente genial. Uh, okay. Entonces, si tienen el ID de usuario, simplemente devolveremos ese ID de usuario. Y vendremos aquí, lo obtendremos del servidor. Y ahora tenemos el ID de usuario justo aquí. Y ese será nuestro ID de bromista. Boom. Genial. Así que ahora puedo decir, uh, vamos a refrescar tu leche y, uh, vamos a ver, la leche, uh, la leche también es el líquido más rápido de la Tierra. Está pasteurizada antes de que siquiera la veas. Jaja. Genial. Así que ahora tenemos, uh, un chiste que pudimos crear y está asociado a nuestro usuario. Y eso es increíble. Desafortunadamente, no tengo suficiente tiempo para mostrarte, como agregar registro y cerrar sesión y cosas así, pero deberías tener una buena idea. Básicamente, cerrar sesión es simplemente, en lugar de confirmar la sesión, destruyes la sesión y uh, eso funciona. Es bastante simple. Pero lo que realmente quiero destacar aquí es que esto es realmente bastante simple.

10. Uso de las APIs de la Plataforma y Demo

Short description:

Se utilizan las APIs de la plataforma. Puedes comunicarte directamente con la base de datos. Es como si no hubiera barreras entre el cliente y el servidor. Remix te permite tener el control y realizar cambios según sea necesario. Esta es una demostración directamente de la documentación de Remix. Puedes seguir todo el proceso, desde la configuración de la base de datos Prisma hasta la autenticación. Hicimos todo esto sin JavaScript en la página. ¡Muchas gracias a todos! ¡Que tengan un tiempo increíble en el Congreso de Node!

Se utilizan las APIs de la plataforma. Puedes comunicarte directamente con la base de datos. Es como si no hubiera barreras entre el cliente y el servidor. Además, me encanta esto porque hemos implementado todo este código y en realidad, debido a su simplicidad, podemos agregar y cambiar lo que queramos. Esa es la belleza de Remix, te permite tener el control y realizar cambios según sea necesario. Realmente aprecio esa simplicidad de Remix.

Entonces, esa es la demostración. Siéntete libre de ir al repositorio para ver el código. Y como dije, esto proviene directamente de la documentación de Remix. Ups. No dos la documentación. Si vas a la aplicación de chistes deep dive, puedes seguir todo el proceso desde cero hasta la configuración de la base de datos Prisma y todo lo relacionado con mutaciones y autenticación, y todas esas cosas. Es increíble. Ah, y por cierto, también hablamos sobre la configuración de JavaScript. Probablemente no te hayas dado cuenta, pero si miras la pestaña de red aquí y ves el JavaScript que se carga en la página, no hay JavaScript en la página. Así que hicimos todo esto sin ningún JavaScript en la página, lo cual es una especie de truco divertido. Por supuesto, queremos tener JavaScript en la página para la accesibilidad y una mejor experiencia de usuario. Pero eso es solo una pequeña sorpresa divertida para ti mientras sigues el tutorial.

Eso es todo. Muchas gracias a todos. Espero que tengan un tiempo increíble en el Congreso de Node y nos vemos en el futuro. Adiós. Hola. Hola de nuevo. Qué bueno tenerte aquí. Gracias por esta increíble charla. La mayoría de las personas, el 48 por ciento, dijo azul, verde, amarillo, rosa, rojo. Danos la palabra. ¿Cuál es el orden correcto? Eso es correcto. Muy bien hecho, el 48% de ustedes.

QnA

Logo and Q&A

Short description:

No puedo recordar el orden de los colores en el logo, pero es un bonito logo. Pasemos a las preguntas del público. La primera pregunta es sobre los datos en la cookie, si están encriptados o codificados. Los datos están firmados con un secreto para evitar manipulaciones. Cuando regresan al servidor, se pueden verificar. Otra pregunta es sobre la preparación de REMIX para producción. Sí, lo está. Mi sitio web tiene miles de usuarios y un alto número de visitas y espectadores únicos al mes.

No puedo. Bueno, no puedo. Muy interesante que la gente recuerde esto. Solo recuerdo la fuente. Pero eso soy yo. Con las sombras. Es un bonito logo, pero no recuerdo el orden de los colores. Conozco los colores del logo de Coca-Cola. Ahí lo tienes. Eso es un poco más fácil.

Entonces, nuevamente, vamos a pasar a las preguntas de nuestra audiencia, si eso está bien para ti. Estoy feliz de responder tus preguntas. Estoy mirando el chat aquí. Ya tenemos un par. Me encantaría escuchar más. Sigan viniendo.

La primera ya la respondiste en el chat, pero para las personas que no han estado leyendo el chat, es de Argentyle1990. ¿Los data en la cookie están encriptados o codificados? Sí, esa es una gran pregunta. La respondí antes de darme cuenta de que debía esperar para responderla ahora. No hay problema. Pero sí, está firmado con el secreto, por lo que las personas no pueden crear el suyo propio o cambiarlo o lo que sea. Excelente. Entonces, cuando regresa al servidor, puedes verificar que realmente fue creado por el servidor. De acuerdo, genial, gracias. ¡Oh, acabas de advanced al nivel uno en el servidor de Discord! Felicidades. Oh, una pregunta muy importante de CCCChris. ¿Está REMIX listo para producción? Sí, totalmente lo está. Así que mi sitio web es un sitio web de producción, tiene cerca de 3,000 usuarios, y eso es, como, personas que han creado cuentas y todo. Recibo alrededor de medio millón de visitas al mes y más de ciento veinte a doscientos mil espectadores únicos al mes. Así que eso es bastante producción.

Remix, PayPal, and Tesla

Short description:

Cuando llegamos a la versión 1.0, eso fue una señal para el mundo de que Remix está listo para producción y que lo estamos manteniendo activamente y trabajando en él ahora también. Si Elon Musk viniera a ti y dijera: 'Estoy empezando PayPal desde cero de nuevo, ¿elegirías Remix?' Sin duda. Toda la propiedad de PayPal se adapta muy bien a Remix. Estoy en conversaciones con ingenieros de Tesla y varias otras compañías de las que no estoy seguro si puedo mencionar, pero sí, muchas personas están muy interesadas.

No es como lo que construí en PayPal, pero estaría muy feliz de tener Remix cuando trabajaba en PayPal. Así que sí, cuando llegamos a la versión 1.0, eso fue una señal para el mundo de que Remix está listo para producción y lo estamos manteniendo activamente y trabajando en él ahora también. Y luego, como seguimiento a eso, digamos que Elon Musk viene a ti y dice: 'Estoy empezando PayPal desde cero de nuevo, ¿elegirías Remix entonces?' Oh, sí. ¿Estás bromeando? Sin duda. Sí, sí, sí, me gustaría 100%, toda la propiedad de PayPal se adapta muy bien a Remix. Y luego, en realidad, en relación a eso, ya que mencionaste a Elon, él no se ha comunicado conmigo ni nada, pero estoy en conversaciones con ingenieros de Tesla. Puedo decirte eso porque nuestra conversación comenzó en Twitter. Así que sé que es público. Pero sí, estamos hablando con personas de Tesla y varias otras compañías de las que no estoy seguro si puedo mencionar, así que no lo mencionaré, pero sí, muchas personas están muy interesadas. Súper genial. Sí. Bueno, tal vez tenga que unirme al equipo de ingeniería de Tesla aquí en Ámsterdam. ¡Hazlo! La siguiente pregunta es de argentile1990 nuevamente.

Working with Cookies in Remix

Short description:

Remix proporciona una API muy útil para trabajar con cookies. Puedes decodificar los datos y extraer el ID de usuario de ellos. Si bien puedes almacenar el estado de la aplicación en cookies, no se recomienda almacenar todo el estado de tu aplicación en una cookie debido a las limitaciones de tamaño. Sin embargo, Remix te permite aprovechar las tecnologías web y hacer lo que quieras con las cookies.

Funciona como un JWT donde puedes decodificar los data, pero no hay nada que puedas hacer con él en el servidor. Quiero decir, puedes, puedes hacer cosas con él. Puedes extraer el ID de usuario de él. Podrías almacenar todo el estado de la aplicación en la cookie si quisieras. Y para algunos casos de uso, eso tiene sentido. Estás limitado al tamaño de las cookies y podrías usar múltiples cookies sin ningún problema. Solo ten en cuenta que cuando almacenas cosas en una cookie, cada solicitud tendrá esa cookie en ella. Así que probablemente no almacenes todo el estado de tu aplicación en la cookie. Pero, pero podrías hacerlo si quisieras. Y sí, las cookies como tecnología o tecnología de la plataforma web, esto tiene muy poco que ver con Remix aparte de que Remix te proporciona una API realmente útil para trabajar con cookies. Pero fuera de eso, son todas tecnologías web. Y sí, puedes hacer lo que quieras porque es una cookie.

Beneficios de Remix para aplicaciones empresariales

Short description:

Remix proporciona un modelo mental simple y una excelente experiencia de desarrollo, lo que lo convierte en un marco ideal para aplicaciones empresariales. La gestión del estado es fluida, ya que Remix garantiza que el cliente y el servidor estén sincronizados. Además, la experiencia de usuario predeterminada es excelente, lo que reduce la necesidad de personalización extensa. Si bien el enfoque de gestión del enfoque para la accesibilidad requiere consideraciones adicionales, Remix proporciona una base sólida para construir aplicaciones de gran tamaño.

Y sí, puedes hacer lo que quieras porque es una cookie.

La siguiente pregunta es de Hail to the Wood. ¿Qué es lo que más te emociona que Remix pueda proporcionar para aplicaciones de tamaño enterprise? Así que aprovechando la pregunta anterior. Sí, sí, es una pregunta genial. Creo que para cualquier enterprise, uno de los mayores problemas no es en realidad la tecnología. Es cómo logramos que esto funcione con un equipo de desarrolladores. Tienes, o incluso una docena de equipos trabajando en el mismo proyecto. Ese fue probablemente el mayor, uno de los mayores problemas que tuve cuando estaba en PayPal. Probablemente el mayor problema que tuve cuando estaba en USAA, simplemente coordinar el esfuerzo en un proyecto único con personas que ni siquiera se hablan entre sí y ni siquiera revisan el código de cada uno porque están en diferentes áreas de la aplicación.

Lo genial de Remix es que el modelo mental es el mismo en todas partes de la aplicación. Y así, la gestión del estado no es realmente una pregunta cuando estás trabajando con Remix. En mi charla, mencioné cómo no tienes que preocuparte por la gestión del estado aquí porque Remix es simplemente... Básicamente, tu tienda de Redux es la base de datos. Y así no estás pensando en cómo mantener el cliente sincronizado con el servidor. Estás construyendo tu aplicación y Remix se asegura de que esas cosas se mantengan sincronizadas simplemente por naturaleza de cómo está construido. Así que el modelo mental es básicamente un modelo mental de Web 1.0 con una experiencia de desarrollo de Web 4. No quiero decir Web 3 porque eso tiene un significado ahora. Pero sí, es una experiencia de desarrollo realmente increíble con un modelo mental muy simple. Y así, cuando estás trabajando con un equipo de desarrolladores como las aplicaciones empresariales, no puedo pensar en un marco más sencillo para usar.

Además, la experiencia de usuario es excelente. Y así, tanto la experiencia de usuario predeterminada es realmente buena. Y así estás haciendo... ¿Experiencia del usuario final o experiencia del desarrollador? Sí. Experiencia del usuario final. Sí. Entonces la experiencia del desarrollador es increíble, modelo mental simple, todo eso. Pero luego la experiencia del usuario y la experiencia del usuario es realmente impresionante también. Y así no tienes que pasar tanto tiempo tratando de hacer que la experiencia del usuario sea impresionante porque la experiencia del usuario predeterminada es realmente buena. Y así, quiero decir, por supuesto, tendrás que pensar en la gestión del enfoque y cosas así para la accesibilidad. Hay solo tanto que un marco puede hacer. No podrás construir una abstracción para la gestión del enfoque.

Compatibilidad con React y estrategias de autenticación

Short description:

Quizás de alguna manera, pero usar efectos más referencias en React es una forma muy buena de gestionar el enfoque. Y todo en React funciona perfectamente con Remix. En el futuro, es probable que otras bibliotecas de UI también funcionen con Remix. Pero las empresas amarán Remix. Las cookies son la opción predeterminada. Remix también se puede utilizar para otros tipos de aplicaciones. Si estás construyendo solo una aplicación web, lo mejor es quedarse con la plataforma. Tenemos tiempo para una pregunta más, y es de useAna Andrazin.

Quizás de alguna manera, pero usar efectos más referencias en react es una forma muy buena de gestionar el enfoque. Y todo en react funciona perfectamente con Remix. Y supongo que aprovecharé esta oportunidad para decir que en el futuro, es probable que otras bibliotecas de UI también funcionen con Remix. Y así que no es un marco de react, es un marco web. Y sí, de todos modos, esa es una respuesta larga a esa pregunta simple. Pero las empresas amarán Remix.

Genial. Bueno, esa es la respuesta. ¿Verdad? Sí, todos. Entonces, mi llamada MC está preguntando si pueden dirigir las preguntas a mi hijo, pero mantengámoslo con Kent. Kent, creo que sí, si puedes ver a mi hijo y avísame, pero creo que la gente está aquí por ti.

Donde vemos a CCC Chris está preguntando si las cookies son la opción predeterminada. Puede haber otras opciones que sean mejores para ciertos escenarios o que no sean necesarias. Sí, no puedo pensar en otras situaciones en las que quieras usar algo más para una aplicación web. Pero Remix también se puede utilizar para otros tipos de aplicaciones. Por ejemplo, podrías tomar tu servidor REST de Koa o Express y reescribirlo en Remix, reimplementar todo en Remix.

Podrías tener una API de GraphQL escrita con Remix y en realidad, el aspecto realmente genial de hacer eso es que si en algún momento decides, oye, tenemos este servidor de API REST, quiero tener algún tipo de interfaz de administración para inspeccionar algunos de los datos o lo que sea. Entonces podrías construir eso porque lo has construido con Remix sin tener que reestructurar completamente algo o ejecutar otra cosa junto a ella o hacer algo hacky para generar HTML o lo que sea. Y así, sí, en esas situaciones, si estás dando soporte y en realidad podrías tener tu aplicación construida con Remix y decir, oye, quiero que mi cliente móvil pueda interactuar con esto. Puedes tener lo que se llama una ruta de recurso que puede hacer cualquier cosa que desees para responder a cualquier solicitud con cualquier tipo de respuesta y poner un punto final de GraphQL en tu aplicación web. Y luego tienes clientes móviles. Y todo eso para decir que para esos casos de uso, otras estrategias de autenticación pueden tener más sentido. Pero si solo estás construyendo una aplicación web, si eso es todo lo que tu aplicación web está admitiendo, no puedo imaginar por qué querrías usar una estrategia de autenticación diferente. Esto es la web, y así es como lo hacemos en la web. Así que simplemente usa la plataforma. Lo mejor es quedarse con la plataforma en la mayoría de los casos.

Sí. Sí. Tenemos tiempo para una pregunta más, y es de useAna Andrazin. Tienes dos minutos para esta pregunta.

Característica única de Remix

Short description:

Remix se distingue de otros frameworks al construir una base sólida sobre el abismo de red entre el front-end y el back-end. Este puente de red simplifica el modelo mental, mejora el rendimiento y reduce la necesidad de gestión manual.

¿Cuál dirías que es la característica más única que distingue a Remix de otros frameworks? Buena pregunta. Sí. Sí. Para aquellos que se preguntan, mucha gente compara Remix con Next.js. Y no nos gusta hablar mucho de eso porque distrae, pero la gente se pregunta, así que escribimos una publicación en el blog al respecto, y compartiré un enlace al artículo en las notas más adelante, o en el servidor de Discord. Pero si simplemente buscas en Google Remix versus Next y ves la publicación en el blog de Remix, puedes ver una comparación muy detallada y objetiva de los dos. Y lo más importante para mí que distingue a estos dos, o cualquier framework de Remix, es que Remix construye una base súper, súper sólida sobre el abismo de red entre el front-end y el back-end. Y ese es uno de los mayores desafíos para todos los frameworks o para todas las aplicaciones web. Ese abismo de red es la razón por la cual la gestión del estado es difícil para las UI. Es la razón por la cual el rendimiento es un problema para las UI. Así que, con un puente de red realmente bueno, puedes simplificar drásticamente el modelo mental, mejorar el rendimiento y reducir la cantidad de cosas que tienes que gestionar tú mismo. Así que eso es lo más importante para mí. Otra característica bastante significativa es el enrutamiento anidado, donde la mayoría de los frameworks como Gatsby y Next, estoy pensando específicamente, tienen enrutamiento anidado basado en archivos donde puedes poner archivos dentro, ya sabes, anidar tus archivos y demás. Pero eso no tiene nada que ver con dónde estás solicitando datos y dónde estás renderizando la UI. Tienes que renderizar todo en todas partes, pero con Remix, tenemos un enrutamiento anidado real. Y esa es una característica realmente importante que permite una experiencia de desarrollo realmente agradable y también una buena experiencia de usuario porque podemos optimizar las cosas debido al enrutamiento anidado. Sí, recuerdo haber leído cómo funciona el enrutamiento y quedé realmente impresionado con eso. Así que muchas gracias, Kent, por esta increíble sesión. Desafortunadamente, no tenemos un chat espacial para la sala de ponentes de Kent, pero habrá una sala de discusión más adelante hoy. No puedo decir la hora porque los horarios son diferentes para todos. Pero asegúrate de unirte si quieres hablar más sobre Remix con Kent. Kent, muchas gracias por unirte a nosotros, fue realmente genial tenerte aquí. ¡Muchas gracias por tenerme, aprecio tus preguntas, y saluda a tu hijo de mi parte! ¡Saludos de su parte! Un pequeño saludo. ¡Hola!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Workshop
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate