Autenticación de usuarios de React para la identidad soberana con Magic

Rate this content
Bookmark

En esta charla, veremos cómo construir un sistema de autenticación de usuarios en React utilizando Magic, donde Magic proporciona una solución de identidad basada en claves construida sobre el estándar de Identidad Descentralizada (DID), donde las identidades de los usuarios son soberanas y aprovechan pares de claves públicas y privadas de blockchain. Estos pares de claves se utilizan para generar pruebas de conocimiento cero para autenticar a los usuarios en lugar de tener que depender de que los usuarios proporcionen contraseñas a Magic o a cualquier proveedor de identidad.

18 min
14 May, 2021

Video Summary and Transcription

Bienvenido a esta charla sobre la autenticación de usuarios de React para la identidad soberana con Magic Labs. Aprenda cómo el modelo de confianza de los usuarios en Internet está roto y una solución novedosa para solucionarlo. Comprenda el concepto de prueba de conocimiento cero y el modelo basado en claves para la identidad de usuario. Magic mejora la confianza aprovechando la Infraestructura como Servicio, claves de usuario seguras y proporcionando autenticación sin contraseña. Explore la identidad descentralizada y cómo resuelve el problema de autenticación, incluido el uso de tokens de identidad descentralizados (DIDT) para gestionar permisos y autenticación.

Available in English

1. Introducción a la autenticación de usuarios en React

Short description:

Bienvenido a esta charla sobre la autenticación de usuarios en React para la identidad soberana con Magic Labs. Aprende cómo el modelo de confianza del usuario en Internet está roto y una solución novedosa para solucionarlo. Comprende el concepto de prueba de conocimiento cero y el modelo basado en claves para la identidad del usuario.

Hola, bienvenido a esta charla, donde hablaré sobre la autenticación de usuarios en React para la identidad soberana con Magic Labs. Soy Muhammad Shahbaz Alam, uno de los defensores del desarrollo en Magic Labs, y en esta charla aprenderemos cómo el modelo de confianza del usuario en Internet está roto, una solución novedosa para solucionarlo y cómo lograr la identidad soberana en React. Aprenderemos qué es DID, DIDT y también cómo construir el tuyo propio. Así que entendamos cómo está roto el modelo de confianza de Internet. Los usuarios piensan en contraseñas o secretos específicos para ellos para verificar su identidad y los entregan a aplicaciones propiedad de diversas empresas. El 59% de todos los usuarios reutilizan su contraseña en diferentes aplicaciones. Los usuarios confían en que las empresas almacenarán los secretos de forma segura y responsable, pero muchas empresas no tienen una autenticación adecuada y conocimiento previo de seguridad, lo que lleva a violaciones de seguridad. Los usuarios acceden a los servicios de la empresa mostrando el secreto cada vez que inician sesión, y cada vez que se muestra el secreto, existe el riesgo de exponerlo a los hackers. Las empresas pueden ser hackeadas y perder los secretos de los usuarios, junto con su confianza. El 48% de los clientes nunca regresan después de una violación de seguridad. La violación de seguridad de Equifax les ha costado al menos $4.1 mil millones. Los hackers utilizan los secretos robados para suplantar a los usuarios y acceder a sus servicios en línea vitales. Este problema se agrava hasta el punto en que la identidad del usuario ya no está en sus manos, sino controlada por grandes corporaciones. Construir tu propia autenticación es muy costoso. Requiere experiencia en seguridad e infraestructura. Requiere cumplimiento de seguridad y privacidad. Asegurar la disponibilidad global a gran escala. Mantenerse actualizado con las últimas tendencias de seguridad. Asegurar la entrega de correo electrónico y SMS. Implementar la internacionalización para permitir el acceso de una audiencia global. Además, defenderse contra ataques de denegación de servicio distribuido (DDoS) y spam.

Estoy aquí para presentar una solución novedosa para solucionar todos los problemas. En esta parte, vamos a entender qué es la prueba de conocimiento cero. En la prueba de conocimiento cero, el propietario de una clave privada no necesita revelar su clave privada para demostrar que es dueño de la clave. Lo que las personas intentaron antes de Magic es un modelo basado en claves. En lugar de que los usuarios piensen en sus propios secretos, utilizan pares de claves públicas y privadas basadas en blockchain generadas al azar para acceder a aplicaciones. Tiene sus pros y sus contras. Los pros son que los usuarios tienen un control completo de su identidad. Las empresas ya no pueden ver los secretos del usuario. Y el usuario utiliza el mismo secreto para acceder a las aplicaciones, lo cual es un modelo de confianza más limpio.

2. Autenticación de usuarios en React con Magic Labs

Short description:

Las desventajas de usar claves en Internet son el riesgo de perderlas y la falta de familiaridad con el concepto para los usuarios comunes. Magic mejora la confianza aprovechando la Infraestructura como Servicio, claves de usuario seguras y proporcionando autenticación sin contraseña. También garantiza la optimización de la confianza no custodial a través de la gestión delegada de claves. Magic descentraliza la identidad, permitiendo la identidad soberana. La solución novedosa recapitula la prueba de conocimiento cero, la gestión delegada de claves y la no custodia. Para implementar esto en una aplicación de React, utiliza el NPX make magic scaffolding con la plantilla Hello World React.

Las desventajas son que los usuarios tienen más probabilidades de perder sus claves, lo que los desconectará, así como perder su identidad en línea, o peor aún, que les roben. El concepto de usar una clave en Internet es demasiado desconocido para la mayoría de los usuarios comunes, principalmente debido a una mala experiencia de usuario. En la autenticación de conocimiento cero, un usuario firma un fragmento de datos utilizando su clave privada y lo envía al servidor como prueba. El servidor recibe la prueba, ejecuta métodos criptográficos estándar sin estado para recuperarla. Esto significa que el usuario ya no necesita enviar un secreto al servidor para validar su identidad, y el servidor ya no necesita almacenar esta clase de información. Mejor experiencia de inicio de sesión. Aprendamos cómo Magic mejora la confianza hasta ahora, utilizando un modelo delegado. Magic aprovecha la gran Infraestructura como Servicio y claves de usuario seguras con módulos de seguridad de hardware, con tecnología que oculta y protege la clave privada del usuario de las empresas e incluso de Magic. Añade ventajas adicionales, como proporcionar una experiencia de autenticación sin contraseña familiar. Para que los usuarios recuperen sus claves, es una mejor experiencia de usuario y ya no pueden perder sus claves. Magic no almacena contraseñas y no puede conocer las claves o secretos del usuario, lo que permite una mayor confianza y seguridad, y tiene soporte nativo para múltiples blockchains.

Una desventaja es que depende de una única infraestructura como servicio. Y en la serie de soluciones novedosas, debemos tener una optimización de confianza no custodial. Por lo tanto, el DKM de Magic, que es la arquitectura de gestión delegada de claves, delega operaciones críticas de cifrado y descifrado a un AWS KMS y AWS Cognito de confianza, evitando por completo el backend de Magic. De esta manera, Magic se mantiene no custodial, ya que Magic nunca ve las claves privadas del usuario y, por lo tanto, ofrece una mejor seguridad y confianza tanto para los desarrolladores como para los usuarios finales. Esto nos permite tener una identidad soberana.

El primer obstáculo para un Internet más auténtico es la identidad. La identidad ha sido predominantemente controlada por proveedores de identidad centralizados. Los desarrolladores dependen completamente de estos proveedores para el acceso de los usuarios. Crear autenticación y seguridad desde cero es extremadamente desafiante para mantenerla segura, escalable y confiable, lo que está llevando a una gran cantidad de violaciones de datos y credenciales de usuario. Magic resuelve esto descentralizando la identidad. En lugar de que el proveedor de identidad centralizado firme tokens de autenticación, los usuarios son quienes firman los tokens de autenticación con su propia clave privada, lo que permite la identidad soberana.

Entonces, comprendamos la recapitulación de la solución novedosa, que consiste en lograr la identidad soberana utilizando la prueba de conocimiento cero, la gestión delegada de claves y la no custodia. Aprendamos cómo podríamos lograr esto en un ejemplo de aplicación de React. Este es un enlace de demostración. Cualquiera en el chat puede ver cómo se ve la demostración, lo que voy a mostrar visitando react-submit-magic.purrsel.app. Comenzaremos utilizando el NPX make magic scaffolding con una plantilla que hemos preparado para ti, que es Hello World React. Ejecútalo en tu terminal. Se te dará la bienvenida con esto. Solo necesitas crear un nombre de proyecto y te pedirá una clave de API publicable de Magic. Puedes obtener la tuya visitando magic.link y registrarte de forma gratuita.

3. Usando Magic y React

Short description:

Visita el panel de control, crea una aplicación y copia la clave publicable de prueba. Pega la clave, elige tu cliente de NPM y espera a que tu aplicación esté lista. Ingresa tu ID de correo electrónico y recibe un correo electrónico de Magic con el nombre de tu aplicación y un botón de inicio de sesión. Una vez iniciada la sesión, verás tu estado de usuario y un botón de cierre de sesión. El andamiaje de Magic CLI proporciona una estructura de código con componentes como apps, callback, loading, login, profile, index y archivos magic.js. Importa el SDK de Magic, úsalo en el archivo app.js y explora los ejemplos de código para inicio de sesión, callback y perfil. Implementa Magic en tu aplicación existente de React instalando el SDK de Magic a través de npm o yarn.

Y visita el panel de control y crea una aplicación y copia la clave publicable de prueba. Luego pega esa clave aquí y elige tu cliente de NPM. Con el tiempo, tu aplicación estará lista y serás recibido con esta pantalla. Esto es lo que ves en la aplicación de demostración que es react-summit-magic.vercel.app.

Luego, simplemente ingresa tu ID de correo electrónico, lo cual habilitará una ventana emergente que dirá que revises tu correo electrónico, te enviará un enlace mágico a tu correo electrónico. En este momento, no cierres esta pestaña. Recibirás un correo electrónico de Magic con el nombre de tu aplicación y un botón para iniciar sesión. Y una vez que hayas terminado, serás recibido con tu estado de usuario actual que muestra tu ID de correo electrónico y un botón de cierre de sesión. Permíteme mostrarte cómo se ve en un React. En tu terminal, solo necesitas ejecutar eso, crear una aplicación, pegar aquí, elegir tu paquete de NPM. Y en cuestión de segundos, tu aplicación estará lista. Gracias a Mary-Chris por hacer este video rápido. También es una colega en Magic Labs. Y luego veamos qué nos ofrece el andamiaje de Magic CLI. Te brinda esta estructura de código en particular que tiene componentes como apps, callback, loading, login, profile y un archivo index y un archivo magic.js. También hay un archivo .env.

Todo sucede aquí. Puedes crear así o puedes tener un enfoque diferente que mostraré más adelante. Solo importa el SDK de Magic y pasa la clave publicable de Magic. Luego úsalo en el archivo app.js. Así es como lo usamos. Ejemplo usando inicio de sesión, callback y perfil. Puedes tener una mejor comprensión del código visitando este enlace. El archivo callback.js y aquí es donde intentamos iniciar sesión con las credenciales mágicas en la consulta de URL. Y esto es simplemente un estado de carga cuando esperamos que ocurra el inicio de sesión. Y aquí es donde ocurre todo, el archivo login.js que realiza acciones de inicio de sesión a través del flujo sin contraseña de Magic. Al completar con éxito el flujo de inicio de sesión, el usuario es redirigido a la página de inicio mediante history.push. Y luego hay una página de perfil que muestra los metadatos del usuario. Puedes tener una mejor comprensión del código visitando este enlace en GitHub.

Eso fue el inicio rápido de cómo podrías usar Magic y React, pero ¿qué tal implementar Magic en tu aplicación existente de React? Puedes hacerlo a través de la instalación del SDK de Magic mediante npm install Magic SDK o yarn add Magic SDK.

4. Manejo de Autenticación de Usuario con Magic

Short description:

Aprende cómo usar claves de entorno en el archivo .env o en el archivo Magic.js para manejar la autenticación de usuario. Pasa la clave publicable y usa Magic.auth.login para iniciar sesión con un enlace mágico. El correo electrónico recibido después de hacer clic en el botón te iniciará sesión.

Ya sea, siempre se recomienda usar tus claves de entorno en el archivo .env, pero depende de ti cómo vas a usarlo. Una forma es usar el archivo Magic.js y tener todo ahí. La otra forma es tener todo en un solo archivo, algo como esto, que importa el SDK de Magic, pasa la clave publicable, y luego llama a Magic.auth.login con el enlace mágico y pasa el ID de correo electrónico. El correo electrónico que inicia sesión con el enlace mágico tiene varios parámetros, por ejemplo, correo electrónico, mostrar interfaz de usuario o redirigir interfaz de usuario. Así que depende de ti cómo vas a usar eso, pero la demostración tiene una URI de redirección. Así que una vez que hagas clic en el botón, lo que recibas en tu correo electrónico, iniciarás sesión desde ahí mismo.

5. Identidad Descentralizada y Tokens DID

Short description:

Aprende sobre la identidad descentralizada y cómo resuelve el problema de autenticación. Comprende el formato DID, incluyendo el esquema, el método y el ID único. Explora los tokens de identidad descentralizada (DIDT) y su uso en la gestión de permisos y autenticación. Descubre la estructura de un código DID típico, incluyendo la prueba y la afirmación. Genera un token DID utilizando pseudocódigo y aprende sobre sus claves y codificación. Magic se encarga de la gestión de claves y ofrece recursos para aprender más. Conéctate conmigo si tienes alguna pregunta y explora el espacio de la identidad descentralizada.

Entonces, ¿cómo podrías usar DID y resolver el problema de autenticación sin usar el SDK de Magic? Entendamos qué es la identidad descentralizada. Una identidad descentralizada es un nuevo tipo de identificador que es globalmente único, resoluble y tiene disponibilidad y verificación criptográfica. Los tokens DID se utilizan como pruebas generadas criptográficamente que se utilizan para gestionar el acceso del usuario al servidor de recursos de tus aplicaciones.

Para la identidad soberana, que se puede definir como una identidad digital portátil de por vida que no depende de ninguna autoridad centralizada. Así es como se ve el formato DID, que tiene un esquema. Incluye DID y también tiene un método DID, que depende de leer, escribir, actualizar y eliminar según lo que desees realizar. También incluye, por ejemplo, UUID, que es el ID único. Y por último, tiene una cadena específica del método DID. Depende de los métodos DID que utilices. Visita este enlace para entender más sobre el formato DID.

Entendamos sobre los DIDT, que son los tokens de identidad descentralizada. Adaptando el protocolo DID del W3C, el token DID creado por el SDK cliente de Magic aprovecha la cadena de bloques de Ethereum y la criptografía elíptica para generar una prueba verificable de identidad y autorización. Las pruebas se codifican en una firma digital ligera. Esta firma digital ligera se puede compartir entre el cliente y el servidor para gestionar permisos, rutas protegidas y recursos o autenticar usuarios.

Así es como se vería la estructura típica de un código DID, que consta de una prueba y una afirmación. La prueba es una firma digital que demuestra la validez de una afirmación dada. Y la afirmación no es más que un dato que representa el acceso del usuario. Y la prueba está firmada con el método de firma personal de Ethereum. Visita este enlace para entender cómo funciona el enlace de firma personal de Ethereum. Y luego está la codificación de binario a ASCII desde la prueba y la afirmación. La especificación del token DID tiene sus claves, por ejemplo, fecha de emisión, marca de tiempo de caducidad, marca de tiempo no válida antes, emisor, sujeto, audiencia, y agrega una firma cifrada de datos serializados arbitrarios y luego un identificador de token único, que es algo como esto. Así es como generas un token DID, que es un pseudocódigo, que tiene IAT en este formato, tiempo de caducidad con la duración de vida, emisor, que es tu emisor, que utiliza el formato DID, que utiliza el DID y el método DID y la cadena especificada, luego el sujeto sería, qué sería el sujeto, y luego la audiencia y NF, NBF, que utiliza este formato y luego un identificador de token. Esto firma la afirmación con la clave privada del usuario, de esta manera la afirmación es verificable e imposible de falsificar. Y todo se codifica utilizando binario a ASCII.

Así es como generas un token DID. Espero que hayas aprendido mucho sobre cómo gestionar la identidad descentralizada. No se trata solo de construir tu DID y cómo lo construyes. Magic hace muchas cosas bajo el capó. Gestiona la clave de una manera muy única. Todos pueden generar un token DID, pero depende de cómo vayas a gestionarlo. Para aprender más sobre cómo Magic maneja su gestión de claves delegada, visita estos enlaces, así como aprende sobre Magic en la documentación de Magic y las guías de Magic. Estas son las formas en las que puedes conectarte conmigo. No dudes en contactarme si tienes alguna pregunta sobre cualquier tema, y compartiré el enlace de las diapositivas después de esta charla. Espero que hayas tenido un día maravilloso y que esta charla te haya dado una visión para pensar en el espacio de la identidad descentralizada. Adiós, que tengas un buen día. Adiós.

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 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
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.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
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
Top Content
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