De 0 a Autenticación en una hora con ReactJS

Rate this content
Bookmark

La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.


Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:

- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización

- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones

- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend


Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.

56 min
15 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este es un masterclass de React Node.js que cubre la implementación de autenticación de Dscope en un proyecto de React. Explica cómo configurar una cuenta de Dscope y personalizar los flujos de autenticación utilizando la consola de Dscope. El masterclass también cubre el uso de React Hooks y el proveedor de Dscope, agregando funcionalidad de inicio y cierre de sesión dinámica, protegiendo datos con tokens de sesión y validando sesiones con middleware de Node.js. Además, demuestra cómo personalizar los flujos de autenticación en la consola de Dscope.

Available in English

1. Introducción al taller de autenticación de Dscope

Short description:

Este es un taller de React Node.js que realizamos bimensualmente o una vez al mes. Hoy, vamos a mostrarles lo fácil que es implementar la autenticación de Dscope en su proyecto de React. Cubriremos conceptos básicos de autenticación y luego nos adentraremos en la codificación de nuestra aplicación de muestra. Los requisitos previos incluyen un conocimiento básico de React, Node.js, Express y tener una cuenta de GitHub. La autenticación consiste en verificar la identidad de un dispositivo de usuario que intenta acceder a una aplicación o sistema, mientras que la autorización consiste en verificar los derechos de acceso de una persona. Proporcionaremos una descripción general de cómo funciona la autenticación, incluido el uso de tokens de acceso. Dscope funciona como un servicio de autenticación, encargándose del proceso de autenticación para sus proyectos. Les mostraremos cómo usar Dscope, configurar su cuenta y crear su primer flujo.

Pero mi nombre es Kevin. Trabajo en Dscope y hoy estoy aquí para presentar nuestro taller de cero a una hora. Este es un taller de React Node.js que realizamos bimensualmente o una vez al mes. Y esta es la tercera edición de esto. Vamos a mostrarles lo fácil que es implementar la autenticación de Dscope en su proyecto de React. Así que hoy tenemos una agenda. Llegaré a eso en un segundo. Primero, un poco sobre mí para presentarme. Así que mi nombre es Kevin. Trabajo en Dscope. Vivo en San Francisco. Fuera del trabajo, me encanta conducir, trabajar en autos, viajar a diferentes países. Me apasiona mucho dar tutorías y ayudar a los niños con matemáticas. Pero sí, para nuestra agenda de hoy, vamos a cubrir dos cosas. Primero, vamos a repasar algunos conceptos básicos de autenticación. Solo para aclarar y asegurarnos de que todos estén en la misma página sobre lo que es la autenticación y así sucesivamente. Y luego vamos a pasar a la codificación de nuestra aplicación de muestra que hemos preparado para el taller de hoy. Así que tenemos una aplicación de muestra con React en el frontend y Node.js en el backend que les voy a mostrar. Para poder seguir esto, hay algunos requisitos previos que debo mencionar. Primero, creo que es útil tener un conocimiento básico de React, Node.js y Express, así como tener una cuenta de GitHub. De hecho, vamos a proporcionar un enlace donde pueden clonar el repositorio que tenemos si aún no lo han hecho. Eso será útil. Y luego un IDE de su elección, yo voy a usar VS Code para la sección de codificación, y Node 18 o superior para ejecutar la aplicación de muestra. Pero yendo al grano, quiero asegurarme de que todos estén en la misma página con lo que realmente es la autenticación. Estoy seguro de que muchos de ustedes, especialmente los ingenieros, ya están familiarizados con esto. Pero la autenticación es una palabra que se usa libremente por mucha gente y a veces se usa indistintamente con la autorización. Entonces, la autenticación, en pocas palabras, es básicamente verificar que eres quien dices ser. La definición que tengo aquí es verificar la identidad de un dispositivo de usuario que intenta acceder a una aplicación o sistema en particular. Y si te imaginas en un aeropuerto y estás pasando por seguridad al principio y muestras tu pasaporte o licencia de conducir, eso es como el primer paso para subir al avión. Y luego la autorización, que generalmente se utiliza junto con la autenticación después, es verificar los derechos de acceso de una persona. Entonces, después de que el usuario ha sido verificado, que dice que es quien dice ser, entonces necesitas verificar si tiene los derechos para hacer o ver una aplicación en particular. Volviendo a la analogía del aeropuerto, eso sería como estar en la puerta y proporcionar tu pase de abordar para subir al avión, porque tal vez eres quien dices ser, pero tal vez no tienes permitido estar en ese avión específico. Solo quiero asegurarme de que entendamos la diferencia entre la autenticación y la autorización. Verán ambas cosas en este taller. Pero si desean obtener más información sobre conceptos específicos de autenticación, pueden visitar nuestro centro de aprendizaje en cscope.com/learn. Tenemos muchos artículos excelentes allí sobre detalles más específicos de cómo funciona, como la estructura de los tokens de acceso JSON, cómo funcionan los servidores de autenticación y autorización en el backend y cosas así. Recomiendo encarecidamente que si están interesados en aprender más sobre la autenticación fuera del alcance de este taller, definitivamente lo revisen.

Ahora que entendemos, ya saben, qué es realmente la autenticación, esta es una descripción general de cómo puede funcionar en un sentido muy básico. Entonces, si están, por ejemplo, intentando iniciar sesión en su cuenta de Gmail o algo así, el navegador, por lo general, el usuario proporcionará credenciales y estas se pasarán del navegador al servidor. El servidor validará esas credenciales. Puede ser una contraseña, puede ser un inicio de sesión de OAuth, algo así. Y luego, una vez que el usuario se haya verificado correctamente, se devolverá alguna forma de token de acceso, generalmente como una cookie, pero también se puede almacenar en el almacenamiento local del navegador. Y luego, en el lado del navegador, todo eso se manejará para que en cada solicitud posterior, si están iniciando sesión en Gmail y luego quieren ver correos electrónicos específicos o cambiar alguna configuración de su bandeja de entrada o algo así, todas esas solicitudes son, ya saben, solicitudes autenticadas o solicitudes que deben ser autenticadas, y ese token de acceso se utiliza para validar que eres quien dices ser y poder hacer eso. Así que, en resumen, los componentes clave de la autenticación son, ustedes saben, yo, el usuario, que está iniciando sesión en Gmail, el dispositivo de escritorio o móvil que estoy usando, mis solicitudes generalmente se enviarán a algún tipo de servidor de aplicaciones, que luego pasará mis credenciales, mi nombre de usuario y contraseña o algo así, a un servicio de autenticación. Eso es lo que hace Dscope. Operamos como un servicio de autenticación, nos encargamos de todo para que, y luego eso se devuelve al dispositivo de escritorio o móvil que está utilizando el usuario, para que no tengan que preocuparse por eso. De hecho, les voy a mostrar cómo usar Dscope, cómo configurar su cuenta, cómo crear su primer flujo y mostrarles lo fácil que es personalizarlo eventualmente. Así que hagamos Dscope a nuestro proyecto. Dscope es nuestra idea de que queremos eliminar la responsabilidad de tener que preocuparse por el aspecto de la autenticación en sus proyectos y nosotros podemos encargarnos de eso y ustedes pueden preocuparse por el resto.

2. Configuración de la cuenta de Dscope y flujo de autenticación

Short description:

Esta sección explica cómo configurar su cuenta de Dscope y utilizar la consola de Dscope para crear un flujo de autenticación. Cubre el registro con DCO, el acceso a la consola y el uso del asistente de inicio para personalizar sus métodos de autenticación. El asistente le permite elegir entre aplicaciones empresariales y de consumidor, seleccionar métodos de autenticación y, opcionalmente, habilitar la autenticación de múltiples factores. La versión resumida incluye los pasos clave y conceptos sin entrar en exceso de detalle.

Este enlace aquí abajo, que espero que Chris o Asaf puedan poner en el chat, los llevará a nuestro repositorio que pueden clonar y con el que trabajaremos durante el resto de esta masterclass.

Antes de comenzar con la codificación, la razón por la que dice '¿Qué es Dscope?' es porque realmente queremos mostrarles cómo configurar su cuenta de Dscope, porque necesitaremos hacer eso. Así que empecemos.

Si pueden abrir un navegador web y dirigirse a www.dscope.com para registrarse. Alguien también puede pegar eso en el chat. Esto los llevará a nuestro sitio web principal, que se verá algo así para ustedes. Tengo una ventana de incógnito abierta. Así que no he iniciado sesión. Y luego podrán registrarse con su correo electrónico o con Google o Microsoft, según su preferencia. Y vamos a registrarnos en DCO. Esto nos llevará a nuestra consola donde podemos crear nuestro flujo. Voy a registrarme con correo electrónico, al igual que ustedes. Regístrense para obtener una nueva cuenta allí.

De acuerdo. Y luego tomen esto. Y luego pongan mi nombre. Ahora crear mi cuenta. Aquí simplemente se envía un enlace mágico a su correo electrónico y luego deberían poder ver eso. Gracias por registrarse. La consola de Dscope es una forma rápida. Háganoslo saber a mí, a un miembro del personal o a Chris si tienen algún problema con eso. Pero sí, una vez que se hayan registrado, es un proceso muy sencillo, hagan clic en 'Vamos'. Se abrirá la consola de Dscope. Y como tenemos un proyecto completamente nuevo, los llevará directamente a 'Hola'. En solo unos sencillos pasos, pueden crear recorridos de usuario sin contraseña en menos de 10 minutos. Esta es nuestra guía de inicio. Aquí les haremos dos preguntas sencillas. En realidad, creará una página de inicio de sesión que pueden agregar a sus aplicaciones react o WebJS. Y les proporcionará el fragmento de código para eso. También creará un flujo que luego pueden editar y cambiar para personalizar su autenticación. Solo presionen 'Comenzar'. Y voy a expandir esto. Dirá '¿Quién utiliza su aplicación?'. Empresas o consumidores. Esta es una pregunta sencilla, dependiendo de si desean utilizar inquilinos o no, para el alcance de nuestra aplicación de muestra en particular, creo que los consumidores están bien, no necesitamos preocuparnos demasiado por la autenticación empresarial B2B. Luego les preguntará qué métodos de autenticación desean utilizar. Aquí dice B2C porque seleccionamos consumidores, y pueden elegir hasta dos métodos que aparecerán en la pantalla de inicio de sesión. Voy a seleccionar inicio de sesión social y contraseña de un solo uso. Creo que el inicio de sesión social, como iniciar sesión con Google, es utilizado por muchos sitios web. Es muy fácil de usar, muy simple. Y especialmente si están utilizando Chrome o un navegador donde tienen inicio de sesión de Microsoft o Google, esto sería muy fácil de usar. Y luego la contraseña de un solo uso, porque también es muy sencillo y fácil de enviar una contraseña a su correo electrónico o número de teléfono, y luego les permite iniciar sesión. Luego les preguntará si desean utilizar MFA. MFA es autenticación de múltiples factores. Es una segunda capa de seguridad. Si desean agregar eso, pueden agregar algo como biometría. Pueden agregar un enlace mágico, algo así. Por ahora, nuevamente, para el alcance de nuestra aplicación en particular, no vamos a utilizar esto. También debo mencionar que en nuestra aplicación real, he preparado un flujo diferente. Así que voy a guiarlos a través de esto y mostrarles cómo crearlo.

3. Configuración de la cuenta de Dscope y flujo de autenticación

Short description:

En esta sección, exploraremos diferentes opciones para la pantalla de inicio de sesión y la estructura de extremo a extremo de los flujos de autenticación. Nos centraremos en el flujo de registro o inicio de sesión, que combina ambas funcionalidades. Además, discutiremos los componentes de React necesarios y el código del lado del servidor para validar sesiones y construir middleware de autenticación. También examinaremos un flujo personalizado en la consola de Dscope y el identificador único del proyecto asociado. Por último, revisaremos el flujo de autenticación, que incluye la pantalla de bienvenida, la autenticación con Google o Microsoft y el registro o inicio de sesión con correo electrónico. El flujo concluye con la generación de tokens JWT de sesión y de actualización.

Pueden usar esto para sus propios proyectos, pero para nuestros proyectos, les mostraré que vamos a usar otro flujo que ya he creado, y les mostraré cómo hacerlo. Es muy sencillo. Pero sigamos adelante con ese MFA por ahora, porque es un flujo bastante sencillo que estamos construyendo aquí.

Luego nos dará varias opciones diferentes para una pantalla de inicio de sesión, y esto se basa en las selecciones que hicimos anteriormente. Podemos seleccionar esta opción. Simplemente dice 'Bienvenido' con el botón continuo de Google y Microsoft. Todo esto es totalmente personalizable. Les mostraré cómo personalizar todo hacia el final. Pero podemos seleccionar esta opción, se ve bien, hagan clic en siguiente.

Y aquí es donde entramos en el meollo del asistente. Después de todas esas preguntas que les hace sobre cómo quieren configurarlo, este es nuestro paquete de resultados finales. Esta es nuestra página de inicio de sesión, que tiene una autenticación completa detrás de ella. Y creará estos cuatro flujos basados en la información que proporcionaron anteriormente. Pueden pensar en un flujo como la estructura de extremo a extremo de cómo funciona su autenticación. Quieren que la primera cosa sea una pantalla de bienvenida como esta, y luego cuando hagan clic en Google, ¿quieren que use OAuth para iniciar sesión? Y luego, a partir de ahí, ¿quieren hacer algo si es un usuario nuevo, hacer algo si es un usuario existente? Esa es la idea de un flujo. Y les mostraré cómo se ve eso en un segundo.

Pero nos vamos a centrar en el registro o inicio de sesión ahora, porque es un solo flujo que combina la funcionalidad de registro e inicio de sesión. Estos otros son obviamente buenos para casos de uso específicos, pero creo que para una aplicación de muestra de servidor, queremos tener todo en un solo flujo. Y luego, cuando hago clic en siguiente, en realidad va a construir todos esos flujos y puedo mostrarles en la pantalla de flujos cómo se ve eso. Al final del asistente de inicio, les dará la página de inicio de sesión real. Este es el componente de React real que van a usar y que está asociado con este proyecto. Este es el que vimos antes. Y este es en realidad un componente de React completo aquí que pueden usar para iniciar sesión y ver la respuesta. Les mostraré eso en el flujo que vamos a usar.

Pero, como pueden ver aquí, estos son los componentes de React que van a necesitar. Este es el envoltorio del proveedor de autor que vamos a poner en nuestro proyecto. Y luego, para nuestro backend, para nuestro servidor, como estamos utilizando un servidor Node.js, este es básicamente el código que vamos a usar para validar la sesión y construir el middleware de autenticación. Permítanme mostrarles rápidamente. Esto es, está bien, sí, lo que queremos hacer es que no podrán ver esto, porque ya he preparado un flujo, pero voy a hacer clic fuera de esto y volver a mi cuenta para mostrarles con qué vamos a trabajar y cómo se ve eso. Pueden seguirlo en su propia pantalla, pero básicamente, aquí es donde dejamos el asistente, y pueden ver que se ve un poco diferente porque lo he personalizado yo mismo. Tengo inicio de sesión con correo electrónico y tengo Google y Microsoft, y pueden ver que no dice esas palabras, y está formateado de manera un poco diferente, aún relativamente simple. Nuevamente, repasaremos el estilo más adelante, pero pueden ver que la única diferencia entre esto y lo que tenían antes es solo este proyecto aquí, y este es el identificador único. No es un secreto, por lo que se puede incrustar en su frontend, pero esto es lo que identifica el proyecto. Esto es lo que asocia sus componentes de Descope de React y todos esos componentes del SDK con este proyecto específico y cómo han configurado su flujo, y el flujo en sí se ve así.

Entonces, espero que puedan ver que no es demasiado pequeño, pero, esencialmente, esto es el inicio hasta el final de cómo funciona su autenticación. Al principio, tenemos una pantalla de bienvenida. Tenemos un botón de continuar con correo electrónico y un botón de Google o Microsoft aquí, y luego, si hacen clic en uno de esos botones de Google o Microsoft, en realidad realiza mucha autenticación, les proporciona la solicitud para iniciar sesión con Google o Microsoft, hace todo eso en la ventana emergente y luego, después de eso, finaliza el flujo y han sido autenticados. De lo contrario, si quieren continuar con correo electrónico y ponen una dirección de correo electrónico y hacen clic en ese botón, entonces simplemente los registrará o iniciarán sesión con correo electrónico. Enviarán un OTP a su correo electrónico. Si son un usuario nuevo, en realidad creará un nuevo usuario en la gestión de usuarios aquí, que les mostraré en un momento. Si son un usuario existente, también proporciona un OTP, pero simplemente finaliza el flujo después. No actualiza su usuario. Y luego puedo mostrarles aquí. Estos son varios usuarios diferentes, pero pueden ver aquí, este es mi usuario específico, y este es el ID de inicio de sesión, que está asociado con nuestro inicio de sesión de OAuth. Entonces, si voy a comenzar y hago clic en iniciar sesión con Google, como no estoy en modo incógnito, y ya he iniciado sesión con Google aquí, si hago clic en eso, verán que me llevará a iniciar sesión con Google. Y esto es lo que realmente va a ir en nuestra aplicación. Y luego vemos el JWT de sesión, el JWT de actualización. Este es el JWT que en realidad es el token de sesión que valida que tenemos una sesión y que estamos autenticados. Esto aquí es solo el JWT de sesión decodificado en base 64.

4. Uso de React Hooks y Dscope Provider

Short description:

En esta sección, aprenderemos cómo usar nuestros React Hooks e implementar el código en una aplicación. Clonaremos el repositorio y exploraremos las carpetas del cliente y del servidor. El archivo app.jsx no debe contener ninguna referencia a Dscope. Instalaremos los paquetes requeridos y obtendremos el ID del proyecto. Luego, envolveremos toda la aplicación con el proveedor de Dscope utilizando el ID del proyecto. Esto asociará nuestra página de inicio de sesión con el producto de Dscope que estamos utilizando.

Así que muestra las reclamaciones y los encabezados. Y luego lo que vamos a hacer es usar todo este código. Y en realidad lo vamos a poner todo en una aplicación. Y les mostraré cómo usar nuestros Hooks de React y todo.

Así que empecemos ahora. Si van a este sitio web, si aún no lo han hecho, vayan a la rama en la que vamos a trabajar, que está sin terminar. Y querrán clonar este repositorio aquí. Luego iré a VS code y les mostraré cómo se ve eso. Una vez que lo hayan clonado, pueden ver aquí, hay una carpeta de cliente. Hay una carpeta de servidor. Y aquí es donde va el archivo readme y todo eso. Si quieren, en casa, si quieren revisar esto, tal vez revisar la grabación y seguirme más tarde, pueden usar el flujo de registro o inicio de sesión que proporcioné. Y les mostraré al final cómo pueden cargarlo en su propia cuenta de VSCO y jugar con él ustedes mismos.

Pero aquí, tenemos el servidor del cliente que funciona en primer lugar. Entonces, una vez que se haya clonado, deberían estar en el directorio raíz aquí con el cliente del servidor. Y en realidad he proporcionado algunos scripts en el archivo package.json que les permitirán ejecutar el servidor y el cliente muy fácilmente. No tendrán que configurar nada. Pero por ahora, pueden ver aquí en el cliente lo que deben hacer es abrir el archivo app.jsx y esto es cómo debería verse. Debería verse como un simple app.jsx sin ninguna mención de Dscope. Dscope debe ser completamente eliminado de esta aplicación. Así que haremos todo nosotros mismos y les mostraré lo fácil que es usar nuestro SDK. Aquí tenemos el terminal, esto es solo una ventana de terminal. Lo que queremos hacer es, antes de copiar el código de la guía de inicio, queremos usar npm install. Esto instalará todos los paquetes que hemos especificado en nuestro archivo package.json y package-lock.json. Así que dejemos que termine y luego. Y luego, una cosa más, quiero proporcionarles el ID del proyecto que vamos a usar. Así que voy a pegarlo aquí, lo enviaré a todos en la reunión. Este es el ID del proyecto, guárdenlo por ahora. Lo usaremos muy pronto. Pero esto inicializará nuestro proveedor de autenticación. Entonces, en el archivo app.jsx principal, esperemos a que termine esto y volvamos a la guía de inicio. La forma en que hemos configurado esta aplicación de React es que queremos tener el proveedor, pero queremos envolver toda la aplicación con este proveedor. Este es el envoltorio de React, pueden colocarlo aquí después de esto. Vamos a colocarlo en nuestro archivo app.jsx justo aquí y envolver toda la aplicación. Y luego tengo, o pueden indentar esto, o tengo el autoindentado con Prettier.

5. Ejecución de la Aplicación y Descripción General

Short description:

Importamos el proveedor de autenticación y envolvemos toda nuestra aplicación con él. Después de instalar todo, ejecutamos el servidor y el cliente. La aplicación es un panel de ingresos con datos codificados en el lado del servidor. Incluye rutas específicas en Express y un botón de inicio de sesión.

Um, así que lo hará automáticamente. Es solo en mi editor. Um, veamos si está bien. No estoy seguro de qué. Está pasando allí. Um, pero de todos modos, este es nuestro, este es nuestro proveedor de autenticación, uh, este es nuestro envoltorio de proveedor de autenticación. También queremos importarlo aquí para que no obtengamos ningún error del proveedor de. En DSCOPE react SDK. Por lo tanto, este react SDK debe instalarse a través de nuestro NPMI. Forma parte de nuestro archivo package.json. Y luego nuestro proveedor de autenticación aquí. Um, si, si realmente ejecutamos la aplicación, no debería dar ningún error. Uh, si, si lo hemos importado aquí, pero déjame, déjame iniciar esto rápidamente. Disculpen lo que está pasando allí. Sí. De acuerdo. Ahora está funcionando. Uh, tal vez mi editor está un poco extraño hoy. Um, pero de todos modos, así que tenemos, sí, ahora dice que todos los paquetes se han instalado y todo. Espero que eso haya sido un poco más, uh, sin problemas para ustedes. Um, pero, uh, básicamente, todo lo que he hecho hasta ahora en cuanto a agregar algo a esta clase, este proyecto, es importar el proveedor de autenticación. Y, um, y envolver toda nuestra aplicación con este proveedor de autenticación. Um, uh, espero que un lanzamiento suave o Chris pueda ayudarte si estás, si estás confundido al respecto. Y pegué esto en el, uh, en el chat. Entonces, um, lo que quiero hacer es en realidad, quiero ejecutar esta aplicación. Quiero mostrarles cómo se ve. Um, lo primero que quiero hacer es, lo primero que voy a hacer es después de haber instalado todo. Es abrir una segunda ventana de terminal. Ya lo han hecho aquí. Y la razón por la que es porque quiero ejecutar el cliente y ejecutar el servidor. Entonces, lo primero que quieres hacer es ejecutar el servidor y puedes hacer eso ejecutando NPM run server. Entonces puedes ver aquí, tengo este script CD server. No tiene DSM index. Sí. Entonces, el servidor se ejecutará por nosotros. El servidor se encuentra aquí. Y luego, um, luego voy a ir a la segunda ventana de terminal. Y voy a hacer NPM run. Entonces eso servirá el cliente que ya se está ejecutando. Uh, y luego echa un vistazo. Perfecto. De acuerdo. Esta es nuestra aplicación. Esto es, uh, esto es un, uh, esto es, uh, un panel de ingresos. Entonces muestra información de ingresos aquí. Um, te mostraré de dónde se obtienen todos estos data. Lo tenemos codificado en el lado del servidor. Um, pero básicamente tenemos, uh, esto es, hacemos clic en cada uno de estos, estos son rutas específicas en Express. Um, estas son rutas específicas en Express que nos proporcionarán esta información, la devolverán en la respuesta. Aquí tenemos, um, un botón de inicio de sesión.

6. Integración de la página de inicio de sesión dinámica

Short description:

Vamos a hacer que el inicio de sesión sea dinámico y cambiarlo a cerrar sesión basado en la autenticación del usuario. Te mostraremos cómo hacer esto y cómo se puede aplicar a varias aplicaciones. Cuando hacemos clic en iniciar sesión, se redirige a la página de inicio de sesión, que actualmente no está disponible. Sin embargo, utilizando el proveedor de autenticación, podemos agregar la página de inicio de sesión sin afectar la autenticación o la protección de datos. La página de inicio de sesión es un componente de React que se puede integrar fácilmente. Simplemente copia y pega el ID de DSCOPE, que está asociado con el proyecto, en la página de inicio de sesión. Este ID se puede obtener desde el asistente de inicio o el repositorio. Después de agregar la página de inicio de sesión, podemos verla en el cliente y la consola mostrará el nombre y el correo electrónico del usuario. Para redirigir de nuevo a la página de inicio, eliminamos la función de devolución de llamada de éxito y la reemplazamos por una función de flecha que navega hacia el panel de control.

También vamos a cambiar esto. También vamos a hacer esto dinámico eventualmente y usar nuestro isAuthenticated de React para cambiarlo de inicio de sesión a cerrar sesión, dependiendo de si estás autenticado o no. Te mostraré cómo hacerlo y obviamente hay una amplia variedad de aplicaciones con eso en tus propias aplicaciones, tus propios proyectos.

Pero si hacemos clic en iniciar sesión, me redirige a iniciar sesión. Y no tenemos una página de inicio de sesión. Así que, y lo que quiero hacer es la razón por la que empezamos con el proveedor de autenticación es que ahora que este es nuestro proveedor de toda la aplicación, podemos agregar la página de inicio de sesión de manera muy fluida. No va a hacer nada en términos de autenticar al usuario o crear un trabajo, pero no va a afectar nuestra capacidad de ver ninguna información o proteger ningún dato porque todavía tenemos que desarrollar el middleware o el lado del backend. Pero en la página de inicio de sesión, si vamos a iniciar sesión en JSX, que se encuentra en off sign in, puedes ver aquí, este es nuestro estilo. Y tenemos una fila aquí. He definido esto aquí. Así que entre estos días, todo lo que tenemos que hacer es importar disco de '@dscope/react-sdk'. Lo haré rápidamente. Creo que en el repositorio con el que estás trabajando, necesitarás hacer esto. Ahí está. Este es nuestro componente de React para la página de inicio de sesión. Y lo que puedes hacer es verlo aquí. Esto es lo que vamos a pegar. Así que puedes ver, vas y luego el ID de disco, que es solo este ID en particular, que se vincula al flujo que he construido aquí para que todos lo usen. Recuerda que ya tenemos asociado nuestro ID de proyecto con el proyecto. Así que todo lo que tenemos que hacer es copiar esto aquí, tomar eso. Y luego lo pegamos aquí para que puedas hacer esto, debería ser lo mismo para cualquier proyecto, si tienes el asistente de inicio configurado, puedes copiar y pegar esto. Porque tenemos nuestros diferentes proyectos. ¿Ya lo tienes ahí? Así que está bien hacer esto. También, en caso de que cierres el asistente de inicio, pegaré esto en el chat también. Pero esta es solo nuestra página de inicio de sesión. Y, como puedes ver, porque ya estoy ejecutando el cliente, si vuelvo aquí, nuestra página de inicio de sesión está aquí y es la misma página de inicio de sesión que estábamos viendo en el asistente de inicio al final, o al menos en mi asistente de inicio.

Y, por lo tanto, si abrimos la consola aquí, inicio de sesión. Oh, mira, dice Kevin Gal, Kevin. Él tiene.com. Ahora el problema es que no se redirige de vuelta a la página de inicio y solo muestra en la consola mi nombre y mi correo electrónico. Y la razón es porque tenemos este on success aquí que simplemente muestra en la consola el nombre y el correo electrónico del detalle del usuario. Así que lo que queremos hacer es, ya he tomado la libertad de eliminar esta función de devolución de llamada que es on success, que navegará de vuelta al panel de control, donde está todo ese genial panel de ingresos. Así que todo lo que tenemos que hacer es simplemente, vamos a eliminar este on success. Y luego lo que vamos a hacer es simplemente, um, simplemente decir on success. Oh, lo siento. Espera un segundo más. Necesitamos una función de flecha porque ya la estamos definiendo aquí. Simplemente decimos perfecto. Así que ahora, si inicio sesión de nuevo, actualizo la página, voy a iniciar sesión y luego digo, está bien, registrarse con Google. Vamos a discou.com vuelve a eso.

7. Agregando Funcionalidad de Cierre de Sesión y Actualizando el Popover

Short description:

Hemos completado el flujo de autenticación y obtenido tokens de sesión actualizados. Aún no hemos implementado el envío de los tokens con las solicitudes. Hemos agregado una página de inicio de sesión que se puede acceder en localhost:3000/sign-in. El panel de control todavía muestra 'iniciar sesión' porque no hemos utilizado el gancho 'isAuthenticated' de React para verificar si el usuario está autenticado. Queremos permitir al usuario cerrar sesión, así que agregaremos funcionalidad para eso. Utilizaremos la función 'useDisco' de 'he's go react to stk' para implementar la función de cierre de sesión. La función de cierre de sesión invalidará la sesión del usuario. Crearemos una constante 'logout' y la inicializaremos con 'useDisco'. Cuando el usuario haga clic en el botón de cierre de sesión, se llamará a la función para invalidar la sesión. También actualizaremos el popover de inicio de sesión/cierre de sesión para mostrar el contenido apropiado según el estado de autenticación del usuario. Para hacer esto, utilizaremos el gancho 'isAuthenticated' de React y mostraremos el popover de inicio de sesión o cierre de sesión según corresponda. Importaremos 'newSession' para asociar y recuperar la información de sesión actual.

Genial. Así que sabemos que el flujo está completo. Aquí puedes ver, um, aquí tenemos nuestros, uh, DS y DSR. Estos son nuestros tokens de sesión actualizados aquí. Ya tenemos autenticación. Um, y, um, y, uh, aún no estamos enviando esto con ninguna de las solicitudes ni nada por el estilo. Todavía vamos a codificar todo eso. Pero, uh, bastante sencillo. Pero quiero decir, podrías ver en tal vez, ya sabes, unos minutos agregamos, uh, agregamos una página de inicio de sesión y puedes ver eso simplemente yendo a, uh, localhost:3000/sign-in, puedes ver esa página de inicio de sesión. Ahora, si volvemos al panel de control aquí, verás que todavía dice 'iniciar sesión'. La razón es porque no hemos utilizado el gancho 'isAuthenticated' de React que puede determinar, y puedes incrustar esto en cualquier lugar, en cualquier parte de tu aplicación de React para verificar si quieres realizar alguna lógica para verificar si el usuario está autenticado o no. Entonces, el primer paso que queremos hacer es, uh, permitir al usuario cerrar sesión. Queremos que suceda. No solo queremos decir 'cerrar sesión', queremos tener esa funcionalidad. Así que vamos a ir a la barra de navegación, que está en components/editor/nav-bar.jsx. Y como puedes ver aquí, ya tengo algunas cosas codificadas que no se están utilizando. Tenemos una función de devolución de llamada para cerrar sesión y una función de devolución de llamada para iniciar sesión. Tenemos un popover de cierre de sesión y un popover de inicio de sesión, la única diferencia entre estos dos es el color. Uno dice 'cerrar sesión' y el otro dice 'iniciar sesión'. Verás cómo funcionan en un minuto. Y luego, al hacer clic, apunta a una función diferente. Ahora, la razón de esto es porque cuando iniciamos sesión, lo único que queremos hacer es volver a la página de inicio de sesión. Pero cuando cerramos sesión, también queremos volver a la página de inicio de sesión, pero primero queremos cerrar sesión y lo hacemos con el 'useDisco'. Entonces lo que quieres hacer es importar 'useDisco' de 'he's go react to stk'. Espero que esto les esté quedando claro. Solo voy a importarlo. Y luego así es como lo vamos a hacer, esto es, uh, esto, nuestro inicio de sesión, ahí está, nuestro, lo siento, nuestra función de cierre de sesión está integrada como parte de esto, nuestro 'useDisco'. Entonces, si vamos a crear una constante 'logout' e inicializarla con 'useDisco'. Ahora tenemos una función de cierre de sesión, que podemos usar dentro de un 'await' para cerrar sesión del usuario e invalidar sus segundos. Puedo explicar un poco más después si tenemos tiempo sobre cómo funciona esto y cómo la tecnología puede funcionar con los puntos, pero por ahora, solo voy a mostrarles, así que debajo de 'logout', es lo mismo que 'login'. El usuario, en lugar de ser exactamente lo mismo, simplemente vamos a tener un 'try catch' y el 'try catch' va a cerrar sesión del usuario. Entonces, ya sabes, vamos a, podemos simplemente decir 'console.log(error)' si hay un error, pero si no hay error, todo lo que tengo que hacer es decir, 'Oh, espera, cerrar sesión'. Así que ahora, cuando el usuario, ya sabes, cuando el usuario haga clic en el botón de cierre de sesión, que aún no hemos incrustado, pero cuando el usuario cierre sesión y haga clic en el botón de cierre de sesión, se ejecutará esto rápidamente y simplemente asegurará de invalidar la sesión. Puedes ver que es una función asíncrona aquí que se asegurará de que la sesión se haya invalidado. Y así, uh, ahora puedes ver aquí tenemos un popover de cierre de sesión e inicio de sesión. Estos dos los creé aquí. Lo que queremos hacer ahora es que, en este momento, si te desplazas hacia abajo donde se define el popover aquí, popover de inicio de sesión, verás el contenido. Siempre muestra 'iniciar sesión', ¿verdad? Incluso si estoy conectado o desconectado, no importa, y no hay lógica detrás de eso. Entonces, la forma en que vamos a hacer esto es debajo de aquí. Quieres, en realidad, antes de eso, queremos importar algo llamado 'newSession'. Así es como vamos a asociar y obtener información de sesión actual,.

8. Manejo de Autenticación de Usuario y Protección de Datos

Short description:

Podemos determinar si el usuario está autenticado y mostrar diferentes popovers en consecuencia. Si el usuario no está autenticado, mostramos el popover de inicio de sesión. Si el usuario ya está autenticado, mostramos el popover de cierre de sesión. Al hacer clic en el botón de cierre de sesión, se invalida la sesión del usuario. Necesitamos proteger los datos cambiando la forma en que enviamos las solicitudes e incluyendo el token de sesión en el encabezado de autorización. También debemos actualizar el servidor backend para validar la sesión. En el archivo dashboard.jsx, nos aseguramos de que el servidor solo devuelva datos si el usuario está autenticado, incluyendo el encabezado de autorización en la solicitud GET de Axios.

Entonces esto nos mostraría si el usuario está autenticado, por ejemplo, y luego podemos decir debajo de cerrar sesión, podemos decir, um, cons, uh, podemos decir, uh, en realidad antes de hacer eso, hagamos. Sí. Es un con. Sí. Perfecto. Entonces, um, por lo tanto, esta autenticación es parte del SDK de disco react, pero esto se inicializa con una nueva sesión. Esto determinará la información de sesión actual del usuario, si están conectados o no. Um, y lo que podemos hacer es si volvemos al popover aquí, todo lo que necesito hacer es decir, uh, si no están autenticados este año, debajo del popover. Puedes ver que si no están autenticados, se mostrará este popover de inicio de sesión y, um, lo cual tiene sentido, ¿verdad? Si no están, si no han iniciado sesión, queremos darles la opción de iniciar sesión y mostrar este botón de inicio de sesión verde. Sin embargo, si ya están autenticados. Entonces, si decimos que está autenticado como verdadero, básicamente. Luego copia este código. Puedes copiar este código. Um, y lo único que vamos a cambiar es en lugar del concepto de inicio de sesión para el popover, podemos decir que es el popover de cierre de sesión. Entonces ahora, si volvemos a nuestra aplicación, espero que esto les haya quedado claro. Bueno, estamos haciendo, um, pero básicamente ahora mostrará dos pop overs diferentes, dependiendo de lo que estemos. Y ves, porque ya hemos iniciado sesión, ¿verdad? Iniciamos sesión antes. Ahora muestra cerrar sesión en lugar de iniciar sesión. Y si hago clic en esto, en realidad cerrará la sesión del usuario. Entonces ahora la sesión está invalidada. Y si vuelvo al panel y hago clic aquí, verás que dice iniciar sesión, ¿verdad?, porque ya hemos cerrado la sesión del usuario y la sesión está invalidada. Entonces podemos, por lo tanto, usar la sesión que devuelve su autenticación falsa. Um, y puedes ver aquí, todavía estamos viendo estos data. Entonces esto es un problema, ¿verdad? No queremos mostrar estos data. El objetivo de hacer esto es eventualmente proteger estos data. Um, uh, y hay dos componentes de esto. Primero debemos cambiar la forma en que enviamos la solicitud. Debemos incluir en el encabezado HTTP, uh, en el encabezado de autorización, uh, bear, y luego el token de sesión, que vamos a obtener del SDK de react. Y luego también tenemos que cambiar el backend del servidor de node JS. Uh, que estamos ejecutando para asegurarnos de que la sesión sea válida. Um, así que vamos a hacer ambas cosas. Terminemos rápidamente con el frontend. Entonces, si vas a dashboard.jsx, que está en el componente del panel de control o en realidad, lo siento, solo panel de control y luego dashboard.jsx. Um, puedes ver aquí, este es el panel de control. Este es el, este es el panel principal que estás viendo aquí, y luego, um, ya he codificado mucho, uh, he puesto algunas cosas ya, específicamente si te fijas en este icono de notificación abierta, no te preocupes demasiado por lo que es, básicamente. Um, solo lo tengo para que, uh, si el usuario, uh, si el usuario intenta hacer una solicitud, mostrará un mensaje de error y luego los redirigirá automáticamente de nuevo a, uh, a la página de inicio de sesión. Um, pero aquí puedes ver, ya sabes, navegar con iniciar sesión. Esa es la función de devolución de llamada que estamos usando. Eso no es muy importante. Lo que es importante es esto. Así que cada vez que te muestro, cada vez que hago clic en uno de estos. Abramos la red rápidamente. Estoy obteniendo un 200 y luego envía una solicitud a local host 80. Ahí es donde se encuentra el servicio de gráficos de barras y está devolviendo, está obteniendo toda esta información que luego react procesa y muestra en esa presentación elegante. Entonces lo que queremos hacer es asegurarnos de que esto no vuelva del servidor a menos que el usuario esté autenticado. Por supuesto. Entonces, um, puedes ver aquí, uh, actualmente no hay. Encabezados de autorización. Um, así que queremos incluir eso en nuestras solicitudes GET de Axios, uh, uh, aquí mismo.

9. Configuración de Encabezado HTTP y Token de Sesión

Short description:

En Axios, configuramos el encabezado HTTP para incluir el encabezado de autorización con el token de sesión bearer. Para obtener el token de sesión, utilizamos la función de obtener token de sesión del SDK de Dscope React. Definimos el token de sesión dentro de un bloque try e lo incluimos en cada solicitud GET con el token bearer en el encabezado HTTP. Cuando cerramos sesión, el token bearer está vacío, pero cuando iniciamos sesión, contiene el token de sesión. Esto permite que el backend verifique y procese la solicitud.

Entonces, debajo de esto, si estás familiarizado con Axios, en realidad tenemos, les mostraré, tenemos una segunda sección de validación en nuestra documentación que muestra cómo se usa con fetch, pero si estás familiarizado con Axios, aquí es donde realmente configurarías el encabezado HTTP. Entonces lo que podemos hacer es decir headers. Y luego otra cosa aquí, y si decimos autorización, porque queremos incluir encabezados de autorización y luego el token de sesión bearer. Entonces lo que estoy haciendo aquí es incluir en cada respuesta. Un encabezado de autorización en nuestro encabezado HTTP. Eso es bearer y luego el token de sesión. La cosa es que tengo que definir el token de sesión, ¿verdad? ¿Cómo obtengo el token de sesión después de que el usuario haya iniciado sesión? Lo hacemos con el SDK de Dscope React. Así que aquí arriba, importemos, creo que es obtener token de sesión. Una función simple que podemos llamar y devolverá cualquiera que sea el token de sesión actual, si es válido y si hay una sesión válida. Entonces devolverá el token de sesión aquí. Y luego debajo, podemos debajo de este try, cuando en realidad está llamando y haciendo esa solicitud. Podemos definir aquí session token equals obtener token de sesión. Ahora, puedes ver aquí, está obteniendo el token de sesión si existe. Desde, y está en el bloque try. Entonces está obteniendo el token de sesión si existe y luego en cada solicitud GET que realiza para el permiso, envía el token de sesión con bearer en el encabezado HTTP. Y podemos ver eso si vamos aquí y simplemente actualizamos esta página. Entonces, si hago clic en esto, puedes ver que dice bearer y nada. Ahora, la razón por la que estamos cerrados de sesión, si recuerdas, y no tenemos un token de sesión válido, pero si inicio sesión, Todo esto. Pero cuando ves esto bearer y luego esto es el trabajo real que estamos enviando. Entonces esto es genial, esto es lo que permitirá que esto es lo que esto es lo que Node.js y nuestro backend tomarán, procesarán y utilizarán y realmente utilizarán para verificar la segunda y devolver información.

10. Node.js Middleware and Session Validation

Short description:

He mostrado cómo usar dinámicamente isAuthenticated, agregar la página de inicio de sesión e incluir el encabezado HTTP con el token de sesión. Ahora trabajemos en el middleware de Node.js, el middleware de autenticación en nuestro servidor. Necesitamos diseñar un middleware que valide la sesión antes de devolver los datos de respuesta. Construiremos este middleware y explicaremos el concepto en Express.

Así que casi hemos terminado. Les he mostrado cómo usar dinámicamente isAuthenticated y diferentes partes de la aplicación. Les he mostrado cómo agregar la página de inicio de sesión. También les he mostrado cómo agregar el encabezado HTTP con el token de sesión y cómo usar el SDK de React para hacerlo. Ahora terminemos trabajando en el middleware de Node.js. El middleware de autenticación en nuestro servidor. Así que esto es genial. Ahora lo que queremos hacer es hacer clic en un cliente y ir al índice del servidor. Sí, este es nuestro servidor Express real y ya lo hemos repasado antes. Pero si estás familiarizado con Express, aquí es donde se inicializa. Y luego este es el puerto real en el que se está ejecutando, el 8080.

Y aquí, app.listen es donde el servidor realmente comienza y donde escucha las solicitudes en ese puerto específico. Y aquí están todas las rutas que están definidas, estamos usando un enrutador de preparación. Y luego todas estas, como el gráfico de barras, por ejemplo, que les mostré antes, aquí es donde se envía la información en la respuesta. Esta información aquí está definida en un archivo TypeScript bajo la carpeta de datos. Esta es la información que estás viendo en la respuesta de la API. Y otra cosa a tener en cuenta es este Auth Helper que también he creado. Esto es relativamente simple y voy a explicar cómo funciona, pero esto es lo que vamos a usar para ver la solicitud del encabezado de autorización en cada una de nuestras rutas. Entonces, si vamos a hacer eso, queremos importar algunas cosas. Lo primero que queremos importar es el cliente vScope, que es. Eso es lo que vamos a usar para, este es nuestro objeto que vamos a usar para hacer todo lo relacionado con Dscope en nuestro servidor backend. Una de las cosas que vamos a hacer, la cosa más importante es validar la sesión. El cliente vScope tiene funciones incorporadas a las que puedes pasar, validateSession que pasará un segundo token y devolverá una promesa si está validado o no, o si es una sesión válida. Lo otro que queremos hacer es importar la función getToken, lo siento, getToken de vScopeNode SDK. Lo siento, no de vScopeNode SDK, lo siento, de authhelpers.ts. Sí, perfecto.

11. Construyendo el Middleware de Validación de Sesión

Short description:

Esta función recibe una solicitud, verifica los encabezados de autorización y devuelve el token si está disponible. Necesitamos diseñar un middleware para validar la sesión entre la solicitud y la respuesta. Instanciamos los clientes de G-scope con el ID del proyecto y definimos el off-middleware. Ejecutamos un bloque try-catch, esperamos la función validateSession y devolvemos una respuesta 401 No autorizada si la sesión no es válida. Obtenemos el token de sesión de la solicitud utilizando la función getToken de Auth Helpers.

Entonces, esta es la función que les mostré antes. Esto es lo que realmente va a, pueden ver esto, va a recibir una solicitud. Verificar si hay encabezados de autorización disponibles. Si no los hay, simplemente devolverá una cadena vacía. Y luego la sesión validará y, de lo contrario, devolverá el token real después de 'bear'. Eso es lo que se divide y por qué se divide en función de la cadena vacía.

Entonces, lo primero que tenemos que hacer es si queremos validar la sesión, queremos diseñar un middleware que se encuentre entre nuestra solicitud y nuestra respuesta. Entonces, cuando llegue la solicitud para cada una de estas rutas, queremos usar algo como el middleware aquí, queremos decirle al enrutador que use algún middleware. Y eso se asegurará de que el middleware valide la sesión antes de devolver los datos de respuesta. Eso es solo un concepto en Express. Y básicamente vendrá aquí y luego llamará a la función siguiente. Entonces, en realidad, necesitamos construir este middleware. Este middleware, tenemos fragmentos de código disponibles en nuestra documentación, pero les mostraré una forma sencilla de construirlo ahora mismo. Lo primero que tenemos que hacer, sin embargo, es instanciar nuestros clientes de G-scope. Y lo hacemos con nuestro ID de proyecto. Así que les di esto. Vamos a usar el ID de proyecto que les di. Entonces, si vuelven a su archivo after.jsx, pueden copiarlo desde aquí y fuera del proveedor. Nuevamente, así es como se configura su proyecto y G-scope, cómo se configuran sus flujos asociados con su proyecto Node.js y su proyecto React localmente y en producción. Entonces, nuevamente, esto no es un secreto. No tienes que preocuparte de que esto se exponga. No se puede obtener ninguna información de esto ni información segura. Pero básicamente, lo estoy definiendo aquí para que luego podamos usar la función validateSession, que es una función como parte del cliente de G-scope que nos permitirá simplemente pasar ese token de sesión y devolver una promesa verdadera, básicamente, si funciona o no. Y así, voy a definir este off-middleware aquí. Eso es lo que realmente va a hacer eso. Y luego, como estoy usando TypeScript, tengo que definir los tipos. Pero lo que voy a hacer es simplemente decir solicitud, solicitud, responder, responder, y luego la función siguiente, boom. Y luego, aquí, pasamos la solicitud, respondemos, y la función siguiente. Y en realidad vamos a ejecutar un bloque try catch. Nuevamente, como lo estábamos haciendo con el cierre de sesión. Entonces, vamos a decir try catch, y luego decir E. Y luego lo único que vamos a hacer es simplemente esperar a que ClientsAuth.validateSession. Y luego, la sesión realmente vendrá. El token de sesión se pasará allí, y luego dirá si está bien, es una sesión válida o no. Entonces, si no es una sesión válida, lo que queremos hacer es probablemente devolver algún tipo de código de estado de respuesta HTTP. Así que haremos res.status 401, no autorizado. Y luego, podemos decir aquí, JSON, podemos decir error, nuevo error. Y luego podemos decir. Oh, lo siento, no aquí, no aquí. Una cosa a tener en cuenta aquí es, oh, porque estamos usando un await, también hagamos que esta función sea asíncrona aquí. Así que nos deshacemos de este error aquí. Y luego client auth.validate session, en realidad necesitamos pasar el token de sesión, ¿verdad? Necesitamos obtener ese token de sesión. Y cómo vamos a obtener ese token de sesión es, si recuerdas, se pasó a través de cada una de las solicitudes aquí. Bearer token de sesión. Entonces, cómo vamos a tomar eso es, vamos a llamar a nuestra función get token, que estaba en los Auth Helpers, eso es lo que importamos antes. Y, recuerda, puedes ver que recibe una solicitud. Y simplemente vamos a pasar la solicitud. Entonces, si pasamos la solicitud, irá aquí, en realidad obtendrá el encabezado de autorización, y luego simplemente validará la sesión y verá si funciona. Ahora, si devuelve un 401 No autorizado, simplemente lo haremos devolver. No voy a hacer nada.

12. Pruebas de Validación de Sesión y Conclusión

Short description:

Ahora, si funciona, porque estamos usando Express, simplemente podemos decir next, y luego llamará a cada uno de estos y devolverá la información que queremos. Probemos esto. Cuando llamo a uno de estos, dice 'cerrar sesión', lo que significa que hay una sesión válida. Obtengo un 200. Si cierro sesión y vuelvo al panel, dice 'no autorizado, redirigir a la página de inicio de sesión'. Si iniciamos sesión ahora, tenemos un nuevo token de sesión. Eso es básicamente todo. Para obtener más información sobre la validación de sesiones, puedes visitar el sitio web proporcionado. Gracias a todos por unirse.

Ahora, si funciona, porque estamos usando Express, simplemente podemos decir next, y luego llamará a cada uno de estos y devolverá la información que queremos. Entonces, probemos esto. Ya estamos, sí. Ya estamos usando esto aquí en Auth Middleware, donde comenzamos antes. Ahora, cuando realmente llamo a uno de estos, actualicemos la página. Puedes ver que dice 'cerrar sesión', lo que significa que hay una sesión válida. Puedo ver la información. Obtengo un 200. Ahora, si cierro sesión, y vuelvo al panel, oh espera, espera, lo siento. Sí, puedo iniciar sesión. Oh, lo siento. Tengo que reiniciar mi servidor. Porque no es como React. De acuerdo, mi error. Así que reiniciemos el servidor, porque ahora tenemos que aplicar todos estos cambios que hicimos en el servidor. Y ahora, si vamos aquí, dice 'no autorizado, redirigir a la página de inicio de sesión'. Entonces, y luego debería redirigirnos automáticamente a la página de inicio de sesión. Así que puedes ver aquí, redirige automáticamente. Volvamos y verifiquemos una vez más. Entonces, si vamos a desglose del mercado, puedes ver que no aparece nada, y nos lleva de vuelta a la página de inicio de sesión. Ahora, si inicias sesión. Entonces, si iniciamos sesión ahora, tenemos un nuevo, vamos a la red, tenemos un nuevo token de sesión. Entonces, si hago clic en esto, puedes ver que ahora aparece, y eso es porque tenemos nuestro token de sesión válido aquí. Y puedes ver el cierre de sesión allí. Si volvemos atrás y hacemos otra solicitud aquí, puedo mostrarte cómo se ve porque debería devolver solo una cadena, pero puedes ver aquí, nuestro 401 no autorizado aquí, simplemente devuelve una cadena vacía. Porque en nuestros ayudantes ELF, simplemente devuelve una cadena vacía después de 'bear'. Genial. Muy bien, eso es básicamente todo. Eso es básicamente todo. Permíteme mostrarte rápidamente cómo se ven, cómo tenemos nuestra documentación aquí para hacer la validación de sesión. Entonces, si puedes ver aquí, así es como realmente enviamos un token de sesión al servidor de la aplicación. Aquí se usa Axios, pero es el mismo tipo de idea. Estamos haciendo 'bear' más el token de sesión. Así que hicimos eso. Cuando hicimos la validación de sesión con el backend, en realidad usamos, instanciamos un cliente de Dscope aquí con un ID de proyecto. Y luego validamos la sesión haciendo .validateSession. Olvidé mencionar que en realidad, si vas aquí, podrías haber, podríamos haber copiado esto también directamente desde el asistente de inicio. Así que esa es otra forma fácil de hacerlo. Pero si quieres obtener más información sobre cómo validar la sesión, las diferentes formas en que puedes hacerlo con diferentes frameworks y lenguajes, puedes ir a este sitio web aquí. Te mostrará, lo publicaré en el chat. Sí. Y finalmente hay más información sobre middleware específico. Si quieres usar cookies en lugar de lo que estaba haciendo, puedes buscar middleware aquí u otras funciones de validación de sesión. Todas las funciones que forman parte del objeto cliente de Dscope, el objeto cliente de Dscope que inicializamos con nuestro ID de proyecto aquí, todas las funciones integradas se enumeran en el archivo readme. Así que también lo proporciono aquí. Bueno, supongo que abriré. Solo nos quedan cuatro minutos, pero si tienen alguna pregunta sin respuesta, estaré encantado de responder. Pueden hacerlo en el chat o pueden hablar. Sí.

13. Personalización de Flujos en la Consola de Dscope

Short description:

Te mostraré cómo personalizar los flujos en la consola de Dscope. Puedes agregar diferentes elementos como un número de teléfono o correo electrónico. Arrastrando y soltando componentes, puedes crear fácilmente un flujo de autenticación por correo electrónico. El componente de React se actualizará automáticamente en tu aplicación. También puedes personalizar la apariencia de tu aplicación, incluyendo colores y logotipo.

Muy bien, bueno, gracias a todos por unirse. Espero que haya sido informativo. Y espero que puedan ver lo fácil que es utilizar muchos de estos SDK que tenemos y personalizar sus flujos.

Oh, una cosa más. En realidad, les mostraré, les mostraré rápidamente cómo pueden personalizar esto. Aquí, por ejemplo, si van a los flujos y realmente quieren, para aquellos de ustedes que se quedaron hasta tarde, pueden, pueden ver esto. En realidad, podemos, pueden agregar lo que quieran. Si quieren agregar algo, si quieren agregar, digamos, un número de teléfono o algo así, pueden agregarlo aquí. Y luego, y luego pueden ver si quieren, podemos hacer algo como esto. En realidad, antes, en realidad, no quiero modificar este flujo. Vamos a, vamos a ir a Spinoff, por ejemplo.

Genial. Entonces, si quisieran agregar correo electrónico, por ejemplo, pueden pegar el correo electrónico y luego pueden poner un botón aquí y luego pueden ver, haré esto un poco más grande, pueden ver en realidad hay un nuevo Haz clic aquí. Y luego lo que pueden hacer es ir a Acción, pueden agregar no TP registro de correo electrónico o aquí, arrastrarlo allí y luego arrastrarlo, probablemente sea un poco difícil de ver para ustedes, pero pueden simplemente arrastrarlo al final después de que se haya verificado el OTP, así que ahora tienen, ahora básicamente en solo 10 segundos, agregaron un correo electrónico, autenticación de correo electrónico TP a su aplicación y esto se actualizará automáticamente, porque están utilizando nuestro componente React, se actualizará automáticamente en su aplicación React e incluso pueden cambiar, pueden cambiar la apariencia de todo, pueden cambiar los colores, pueden ir a estilos aquí y cambiar su logotipo y los colores primarios y secundarios y cómo se muestran los errores y todo eso, así que, bastante genial. Pero sí, gracias por unirse y espero verlos nuevamente pronto. Gracias.

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

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 Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
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.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.