Las contraseñas han sido durante mucho tiempo las llaves de nuestros reinos. Sin embargo, a menudo se convierten en los puntos débiles de nuestra armadura: olvidados, mal utilizados o explotados. Nuestras aplicaciones de Next a menudo hacen uso de contraseñas para autenticar a los usuarios, pero ¿cómo sería un mundo sin contraseñas? ¿Y cómo podemos comenzar a conducir hacia ese futuro hoy?
Esta masterclass se centra en el futuro de la autenticación, específicamente en la autenticación sin contraseñas. Explora los desafíos con las contraseñas e introduce varios métodos de autenticación sin contraseñas como los enlaces mágicos y WebOfN. Se discute el proceso de registro y autenticación para la autenticación sin contraseñas, junto con el uso de claves de paso para la autenticación. La masterclass también cubre la configuración de Auth0 y la creación de una aplicación Next.js con integración de Auth0.
Mi nombre es Juan, un defensor de los desarrolladores en Okta. He sido ingeniero de software durante más de 20 años, trabajando para grandes corporaciones como Siemens y Cal Size. Me encanta construir software y puedes encontrarme en línea en BA JC Martinez.
Entonces, hola, mi nombre es Juan. Soy un defensor de los desarrolladores en Okta. He sido ingeniero de software durante más de 20 años, trabajando en todo tipo de proyectos diferentes. Trabajo principalmente para grandes corporaciones como Siemens y Cal Size. Y ahora estoy trabajando en Okta, que es un tipo completamente diferente de organización. Y la principal razón por la que hago ingeniería de software es porque me encanta construir cosas, pero solo cosas de software. Nunca me pidas que construya un mueble de IKEA porque soy terrible en eso. Pero en lo que respecta al software, siempre encuentro mi camino alrededor de eso. Puedes encontrarme en línea en la mayoría de las plataformas de redes sociales en BA JC Martinez. Entonces, sí, puedes seguirme allí si te gusta conectarte y tener más discusiones sobre la masterclass o simplemente
2. Introducción a la Autenticación sin Contraseña
Short description:
La masterclass de hoy trata sobre el futuro de la autenticación y cómo es sin contraseña. Comenzaremos con una presentación y luego nos sumergiremos en la codificación de una aplicación Next.js para la autenticación sin contraseña. Esta será una sesión interactiva, así que no dudes en hacer preguntas y compartir tus pensamientos. Permíteme compartir una experiencia personal con las contraseñas. Mientras estaba en un tren, me di cuenta de que olvidé mi contraseña cuando necesitaba acceder a mi boleto. Las contraseñas son fáciles de olvidar, y no estoy solo en esta lucha.
temas de ingeniería de software en general, siempre estoy publicando cosas. Así que la masterclass. Así que la masterclass de hoy va a ser sobre el futuro de la authentication y cómo el futuro de la authentication es sin contraseña. Al principio, vamos a tener una breve presentación sobre la introducción del tema, pero luego vamos a poner todas las manos en el código e implementar una aplicación Next.js que va a permitir a los usuarios registrarse e iniciar sesión utilizando flujos de authentication sin contraseña. Vamos a discutir eso con mucho detalle hoy. Además, esto va a ser una sesión interactiva. Así que si tienes alguna pregunta, si tienes algún comentario o algo de lo que te gustaría hablar, por favor no dudes en usar el chat. Me encantaría hacer esto lo más interactivo posible mientras me sigues creando la aplicación y trabajando en el código. Así que no se siente solo como yo haciendo una presentación de todo, sino que somos todos nosotros construyendo en público de alguna manera. Así que empecemos un poco con nuestra presentación. Eso fue suficiente un poco sobre mí. Y oh, mira eso. Acabo de recibir una notificación aquí en mi teléfono que dice que mi tren a Berlín está aquí. Así que eso significa que tengo que subirme al tren Deutsche Bahn y disfrutar de mi viaje de cuatro horas a Berlín. Ahora, mientras estoy en el tren, veo a la persona que es responsable de revisar los boletos. Así que tomo mi teléfono, y abro la aplicación Deutsche Bahn. Sólo para descubrir que no estoy conectado, ¿verdad? Y como el tipo se está acercando, necesito ingresar mi nombre de usuario o mi correo electrónico y contraseña para acceder a mi boleto. Así que puedo presentárselo. Pero se me olvidó cuál es mi contraseña. Y ahora esto es una pesadilla total porque se está acercando y no sé cuál es mi correo electrónico que usé para registrarme, no era como mi correo electrónico regular, era como mi correo electrónico de la empresa. ¿Cuál era la contraseña que usé? Como, soy terrible en esto. Y no soy el único porque las contraseñas son fáciles de olvidar. ¿Verdad? Así que intenté el
3. Desafíos con las Contraseñas
Short description:
Las contraseñas no solo son difíciles de recordar, sino también fáciles de adivinar o descifrar. Incluso las personas con conocimientos tecnológicos pueden caer en la trampa de usar contraseñas débiles. Compartir contraseñas entre miembros de la familia o reutilizarlas en varios servicios compromete aún más la seguridad. Las contraseñas pueden ser robadas o filtradas, lo que lleva a un acceso no autorizado a todos los servicios que utilizamos. Esta es una preocupación significativa en nuestro mundo dependiente de lo digital.
olvidé el enlace que está allí. Recibo un correo electrónico. Restablezco mi contraseña. El tipo ya está de pie junto a mí, hablándome y pidiéndome mi contraseña. Intento mi mejor alemán para decirle que necesita esperar porque no estoy conectado. Y todo el mundo me está mirando. Y sí, toda esta situación es muy frustrante. Un proceso que debería ser tan fácil como usar mi teléfono, el teléfono sabe quién soy. El teléfono conoce mi cara o mi huella dactilar, ¿verdad? Así que el teléfono sabe quién soy, los teléfonos saben que soy yo. Y sin embargo, cuando abro una aplicación, siempre tengo que pasar por este complicado proceso de registro, usuario correos electrónicos, contraseñas que olvidaré, utilizando gestores de contraseñas y la cosa siempre se complica mucho. Así que las contraseñas no solo son difíciles, también son fáciles de adivinar o descifrar en la mayoría de los servicios. Y yo soy una persona con conocimientos tecnológicos. Así que no haré esto. Pero he visto esto de primera mano, por ejemplo, con mi esposa y con mis hijos, donde ponen contraseñas que son simplemente demasiado fáciles. 123456 es la contraseña favorita de mis hijos. Y luego conseguí un plan familiar para una contraseña. Así que todo el mundo conoce las contraseñas, ¿verdad? Y presenté a mi esposa a los gestores de contraseñas y a todo el personal. Y de repente, estoy en WhatsApp y recibo estos mensajes muy crípticos de mi esposa, solo un montón de caracteres y números y cosas. Y yo estoy como, ¿qué está pasando? ¿Por qué me envías estas cosas raras? ¿Está roto WhatsApp? Y ella no lo sabe. Quiero decir, tengo la aplicación One Password en mi teléfono, pero no sé cómo usarla en el ordenador. Así que simplemente copio y pego las contraseñas en WhatsApp, te las envío. Así que es seguro. Y luego uso WhatsApp en mi ordenador para copiarlas en mi navegador. Y yo estoy como, oh Dios, por favor, dime que entendí mal. Pero no, eso es lo que pasó. Y sucede con bastante frecuencia, no importa cuántas veces lo diga, todavía sucede. Y si no, está reutilizando contraseñas, ¿verdad? Y este es un escenario muy común donde nos gusta una contraseña, pensamos que es segura. Y luego la usamos en varios servicios. Pero como las contraseñas pueden ser robadas o comprometidas. Todos sabemos en la web, recibimos noticias de vez en cuando de que las contraseñas se filtran en la web. Y entonces terminamos en la mala situación de que los actores que obtienen la contraseña de un servicio pueden acceder a todos los servicios que utilizamos, lo cual es una muy mala noticia para nosotros, ahora que dependemos tanto de los servicios digitales.
4. Explorando Métodos de Autenticación sin Contraseña
Short description:
Las contraseñas son malas. Podemos agregar autenticación multifactorial, contraseñas de un solo uso, biometría o llaves de hardware. La autenticación sin contraseña es el proceso de verificar la identidad de un usuario sin una contraseña. Es más amigable para el usuario y más seguro que las contraseñas. Hay varias formas de hacerlo sin contraseña, como los enlaces mágicos y los inicios de sesión sociales. Sin embargo, los inicios de sesión sociales comprometen la privacidad. Otra opción es WebOfN, que utiliza hardware y criptografía de clave pública para una autenticación fuerte. WebOfN.me proporciona información detallada sobre cómo funciona WebOfN. Involucra un proceso de registro y autenticación en el cliente y en el servidor. Requiere un agente de usuario, una parte confiable y un dispositivo autenticador como un YubiKey.
el servicio puede acceder y todos los servicios que utilizamos, lo cual es bastante malo para nosotros, ¿verdad? Ahora que dependemos tanto de los servicios digitales. Entonces, a lo largo de los años, los ingenieros han estado pensando mucho, y estaban pensando, está bien, entonces las contraseñas son malas, ¿cómo podemos hacerlas seguras? Bueno, podemos agregar autenticación multifactorial, podemos agregar contraseñas de un solo uso, podemos agregar biometría o llaves de hardware, todo encima de las contraseñas. Así ahora, no solo necesito tener, no solo necesito conocer mis contraseñas, sino que ahora también necesito tener mi teléfono para recibir un SMS disponible o para verificar mis contraseñas de un solo uso, por ejemplo, en una aplicación Google autenticador, o necesito, encima de mis contraseñas, proporcionar mis datos biométricos. Y las cosas se saltan, se vuelven más complicadas. Y cuanto más complicadas son las cosas, es más probable que los usuarios tomen atajos. Así que cada vez que un servicio nos pide que configuremos la autenticación multifactorial, la mayoría de las veces la gente presionará el botón de recordarme más tarde, o no me preguntes de nuevo, pero solo unos pocos personas realmente pasarán por el proceso de configurar la autenticación multifactorial. Y en el caso de que lo hagan, la mayoría de las personas optarán por usar SMS porque es la opción más conveniente, aunque es la opción menos segura. Entonces, claramente, lo que estamos haciendo realmente no está funcionando. Y necesitamos una nueva solución. Entonces ¿cuál es la solución para el futuro y de qué están hablando los ingenieros de identidad? Y es sin contraseña, ¿verdad? Entonces es hora de deshacerse de las contraseñas, y necesitamos una mejor solución, necesitamos algo completamente diferente. Esta es la única forma en que vamos a avanzar. Pero ¿qué es sin contraseña, ¿verdad? Porque es solo una palabra de contraseña. Entonces, la autenticación sin contraseña es el proceso de verificar la identidad del usuario de un software con algo distinto a una contraseña. Quiero decir, sí, sin contraseña significa que no hay contraseña, ¿verdad? Creo que esa es la definición fácil. ¿Y por qué nos encanta sin contraseña? Porque es más amigable para el usuario, ¿verdad? Todas estas cosas que conté sobre las contraseñas han sido un dolor de cabeza, y también es seguro. Es más seguro que las contraseñas. Entonces deberíamos hacer sin contraseña siempre que podamos. Pero hay varias formas de hacerlo sin contraseña. Hay enlaces mágicos, eso es probablemente la opción menos segura. Esto es cuando en un servicio, por ejemplo, Slack, pones tu correo electrónico dirección, y luego recibes un enlace en tu correo electrónico y haces clic en él como un enlace, estás automáticamente registrado en ese servicio. Eso es bastante bueno, siempre que tu cuenta de correo electrónico no esté comprometida. Y sí, entonces no es la opción más segura. Luego tenemos los inicios de sesión sociales, que son geniales para la seguridad. Me encantan los inicios de sesión sociales y trato de usarlos siempre que puedo o solía hacerlo. Y llegaremos a eso en un minuto. Pero los inicios de sesión sociales nos permiten iniciar sesión con nuestra cuenta de Google, con nuestra cuenta de Apple, con nuestra cuenta de Facebook, y todos estos proveedores sociales en diferentes servicios. Entonces son geniales, porque son súper fáciles. Normalmente ya estás registrado en una de estas cuentas en tu navegador. Entonces cada vez que quieras acceder a un nuevo servicio, simplemente haces clic en iniciar sesión con Google, y luego estás automáticamente registrado. Entonces es genial, es seguro. Pero desde una perspectiva de privacidad, no es ideal, porque cada vez que te registras en uno de estos servicios, o cada vez que inicias sesión en uno de estos servicios, estás dando esa información a Google, estás dando esa información a Facebook, estás dando esa información a quien sea tu proveedor social, y luego van a usar eso información para proporcionarte anuncios y quién sabe qué más, ¿verdad? Entonces, como el mundo se está moviendo hacia un mundo más centrado en la privacidad, y estamos más preocupados por nuestra privacidad, estamos tratando de alejarnos de este inicio de sesión social, que se ha vuelto bastante popular en los últimos años. Sí, exactamente. Como tenemos aquí en los comentarios, inicio de sesión social, tus datos se comparten, ¿verdad? Y realmente no, una vez que compartes tus datos, tú realmente no sabes dónde va a terminar. Entonces, aunque es genial y mucho más seguro que MagicLink y Contraseñas, estás comprometiendo tus propios datos a estas empresas en las que tienes que confiar. Entonces, ¿qué otras opciones tenemos? Bueno, la otra opción es WebOfN. Y WebOfN es una recomendación de W3C para definir una API que vive en los navegadores para la creación de credenciales fuertes, atestiguadas, con alcance y basadas en claves públicas. Entonces es básicamente una forma de usar el hardware que tienes en tus portátiles, y la criptografía de clave pública privada para proporcionar un método fuerte de autenticación. Hay un código QR en la pantalla que apunta al sitio web WebOfN.me. Si sigues ese sitio web, si escaneas el código QR, encontrarás que hay mucha información sobre qué es WebOfN, cómo funciona, cómo se implementa en el navegador. Y lo que me encanta de ese sitio web es hay un flujo donde puedes activar el flujo de trabajo. Y puedes ver cómo el proceso desde que comienza hasta el final se refleja entre el cliente y el servidor, y cómo se comparte toda la información. Entonces es un recurso fantástico, WebOfN.me. Te recomiendo que lo revises. También lo voy a publicar aquí en el chat, si puedo. Entonces, WebOfN.me. Allá vamos. Entonces, para resumir, WebOfN es básicamente dos cosas que suceden en dos lugares diferentes. Entonces tienes un proceso para registrar un nuevo usuario, y tienes un proceso para autenticar un nuevo usuario. Y el proceso sucederá tanto en el lado del cliente como en el lado del servidor. Y ahora vamos a ver los flujos de estos dos sucediendo. Entonces, en el lado del usuario, tenemos el gráfico aquí que refleja el registro del usuario. Entonces tenemos esta API complicada que copié y pegué aquí para referencia. Y luego, en el lado derecho, tenemos el flujo, el flujo de autorización. Entonces es bastante complicado. Implica tener un usuario, un agente de usuario, que normalmente es un navegador o aplicaciones web, y una parte confiable. Una parte confiable es normalmente un servidor. Podría ser uno de los proveedores sociales como Google, Facebook, Apple, etc. Bueno, no Facebook. No apoyan esto, pero Google, Apple. Pero puede ser una parte confiable, que es un servicio como Auth0, que proporciona autenticaciones para la construcción de aplicaciones de terceros. Y también requiere un autenticador. Un autenticador es normalmente un dispositivo de hardware. Podría ser tu portátil moderno. Podría ser tu teléfono usando Face ID o Touch ID, o el equivalente en Android para el escaneo de huellas dactilares, o puede ser un YubiKey. Y tengo un YubiKey aquí solo para mostrarte cómo se ve. Pero sí, entonces este es un YubiKey, es una llave USB-C que puedes conectar a tu portátil. Y esta llave internamente tiene un generador de claves privadas. Y cada vez que presionamos el botón allí en el flujo de registro, generará una nueva clave privada, clave pública. Y luego vamos a usar eso para iniciar sesión en los sitios web. Entonces esta es la mejor manera de asegurar tu
5. Proceso de Registro y Autenticación
Short description:
El proceso de registro implica generar un desafío, crear un par de claves privada y pública, y almacenar de forma segura la clave privada en el dispositivo. La autenticación funciona de manera similar, con el desafío siendo firmado con la clave privada y la firma siendo verificada contra la clave pública registrada. Es importante nunca perder el dispositivo que contiene la clave privada y tener una llave de hardware de respaldo. También existen formas de compartir claves privadas a través de dispositivos utilizando iCloud Keychain de Apple o soluciones similares. Los gestores de contraseñas como BitWarden y 1Password también admiten la autenticación sin contraseña. La implementación de la autenticación sin contraseña se puede realizar utilizando módulos API NPM como SimpleWebAuthN, pero se recomienda utilizar proyectos establecidos que proporcionen las mejores prácticas y orientación.
cuentas, porque requiere que tengas acceso físico a la llave. Si no tienes acceso físico a la llave, entonces no puedes registrarte o iniciar sesión en ninguno de los servicios. Así que déjame conectar eso de nuevo porque lo vamos a necesitar más tarde. Pero el proceso de registro va más o menos así. Así que empiezas con un usuario pidiendo un intento de registro, eso básicamente significa usar el botón de registro que va al servidor de autorización, el partido dependiente diciendo, dame un desafío. El partido dependiente genera un mensaje encriptado, que es lo que llamamos el desafío y se envía de vuelta al navegador. Y luego el navegador usa ese desafío y envía el desafío más la solicitud de autorización al dispositivo. Y el dispositivo genera, basado en esa información, una clave privada y una clave pública que se relacionan entre sí. La clave privada se guarda en el dispositivo mientras que la clave pública se envía de vuelta al navegador. Y el navegador envía esa clave pública más el desafío de vuelta al partido dependiente. Y esto es muy importante porque la clave privada nunca sale de tu dispositivo. Eso significa que tu contraseña, la clave privada va a ser tu contraseña en este escenario, nunca, nunca sale de tu dispositivo. Solo trabajas con la clave pública. Y está perfectamente bien compartir tu clave pública porque la clave pública no te permite iniciar sesión. Solo la clave privada te permite iniciar sesión. Y como nunca sale del dispositivo, decimos que es resistente al phishing. No importa cuánto quiera un actor obtener acceso a tu sistema, o quiera obtener tu contraseña, o quiera hacer un ataque de hombre en el medio, donde básicamente interceptan tu tráfico de red, no obtendrán ninguna información que sea crítica para que puedan acceder a tus cuentas. Por lo tanto, es la opción más segura. Pero similar al proceso de registro, tenemos la authentication, que de nuevo es muy similar. Comienza en el usuario, haciendo clic en el botón de inicio de sesión, yendo al partido dependiente pidiendo un desafío. En este caso, el desafío vuelve y firmamos. Así que ahora en este tiempo, firmamos el desafío con la clave privada. Y luego enviamos esa firma de vuelta al partido dependiente. Y el partido dependiente comparará esa firma con una clave pública que previamente registramos. Y nos dirá si tienes acceso o no. Y esta es la parte donde eso es genial, ¿verdad? Así que incluso cuando estamos autenticados, el único cosa que enviamos es un desafío firmado que solo es válido por un corto período de tiempo. Y luego la validation solo se hace después de una clave pública. Así que no, no hay compromisos durante el proceso de registro. Y no hay compromisos durante el proceso de authentication en el que expondremos nuestra clave privada, nuestra contraseña, en este caso, siempre vive en el dispositivo. Y por eso es súper importante no perder nunca ese dispositivo. Así que normalmente cuando trabajamos con llaves de hardware como el Yubico que acabo de mostrar, normalmente tendrás dos de esas. Así que tengo una conmigo que siempre está conmigo en mi llavero. Y también guardo una siempre en mi computadora o siempre en casa. De esa manera, si pierdo la que siempre tengo en movimiento, siempre tengo una de respaldo. Así que en cada servicio que me permite usar este tipo de métodos de registro authentication, siempre registro las dos llaves. De lo contrario, corro el riesgo de perderlo y perder el acceso a mi cuenta. Hay otras formas que veremos más adelante donde puedes usar, por ejemplo, tu, tu computadora y tu navegador Chrome para compartir esas claves privadas de forma segura. O por ejemplo, si estás usando dispositivos Apple puedes compartir esas claves privadas usando iCloud Chain. De esa manera, todos tus dispositivos Apple tendrán acceso a esa clave privada. Así que esa es una forma de resolver el problema de siempre necesitar tener la llave de hardware. Así que hay formas de compartir tu llave a través de múltiples dispositivos en un entorno seguro, ya sea usando Apple, Apple keychain, o usando el equivalente en Google Chrome. Sí, así que los gestores de contraseñas como BitWater y OnePassword también te permiten hacer eso. Algunos de ellos todavía están en beta. Así que no recomiendo que empieces a usarlos ahora mismo, pero están mejorando. Y entonces, ¿cómo implementas esto? Así que vamos a ver dos formas. Una de ellas la vamos a repasar muy rápidamente. Y luego vamos a cubrir la mejor opción en profundidad. Así que la primera es que puedes seguir adelante y construir esto por tu cuenta, lo cual es algo que personalmente no recomiendo. Porque entonces tienes que construir el flujo típico de authentication de nombre de usuario y contraseña, tienes que construir una authentication multifactorial, y ahora necesitas construir también inicios de sesión sin contraseña, ¿verdad? Hay módulos API NPM que puedes usar como SimpleWebOutN. Tengo el código QR aquí para ese proyecto, es un proyecto de código abierto. Y en ese proyecto, tendrás que proporcionar cuatro APIs diferentes, el registro es start, que genera un desafío para el registro, y el registro verify, que verifica que ese desafío se firmó correctamente. Y luego lo mismo para el inicio de sesión, el start, genera el desafío y verify para validar ese desafío contra la clave pública que start. Ahora, SimpleWebOutN te dará los métodos básicos sobre cómo verificar y cómo empezar, pero no te dará ninguna recomendación sobre cómo generas ese desafío, no te dará ninguna recomendación sobre cómo almacenas las claves públicas. Así que te va a dar lo básico para que funcione. Pero luego depende de ti implementar esto usando las best practices. Y por eso es como que yo no recomiendo esto. Si sigues este camino, y realmente no eres un experto en esto, va a ser muy difícil mantener la seguridad. Y luego no introduces bugs más adelante, que va a implicar que vas a exponer la información de tus usuarios, ¿verdad? Eso es algo que nadie quiere correr el riesgo. Pero es bueno saber que tenemos proyectos de código abierto que están abrazando el futuro de passwordless, y ya están disponibles, así que puedes echarles un vistazo.
6. Autenticación sin contraseña en acción
Short description:
Voy a compartir un video donde inicio sesión usando una clave de paso en mi teléfono móvil. Es súper fácil y no requiere contraseñas. La nueva recomendación de W3C para la autenticación sin contraseña se basa en la autenticación de clave pública privada, lo que la hace resistente al phishing y segura incluso en caso de una filtración de la base de datos. Proporciona una mejor experiencia de usuario y se convertirá en el futuro de la autenticación.
Bueno, entonces hemos hablado un poco sobre la autenticación sin contraseña, pero ¿cómo se ve realmente? Voy a compartir un pequeño video. Espero que puedan verlo a través de Zoom. Pero esto es en mi teléfono móvil. Tengo una aplicación que creé, y hago clic en Continuar con una clave de paso. En mi caso, estoy usando OnePassword, y hago clic en Continuar, me pide que use mi rostro para iniciar sesión. Y una vez que pongo mi rostro, automáticamente estoy registrado. No tengo que ingresar ninguna contraseña, no tengo que ingresar mi correo electrónico, ni nada por el estilo, porque ya estaba registrado. Y mi clave pública ya estaba registrada con el servicio. Así que es súper fácil iniciar sesión, sucede automáticamente. Lo único que necesitas proporcionar en este caso, debido a mi gestor de contraseñas, me pidió que iniciara sesión con mi Face ID o con mi Touch ID. Así que es súper fácil iniciar sesión y no más problemas con Deutsche Bank. Esperemos. Sí, entonces, sabemos ahora dónde estamos. Entonces, esta nueva recomendación de W3C es mejor que las contraseñas, porque se basa en la autenticación de clave pública privada. Es resistente al phishing, porque la clave privada nunca sale de tu dispositivo. Al menos en el sentido de que se comparte con los servicios de terceros que estás utilizando para iniciar sesión o autenticarte. Y solo almacenas datos públicos en tu database. Así que incluso en el improbable escenario, donde implementas algo y tu database se filtra, y los malos actores obtienen acceso a tus claves públicas, está bien. Está bien. Realmente no pueden hacer nada con eso. Si no tienes la clave privada, entonces no puedes firmar los mensajes y no podrás iniciar sesión. Así que incluso en ese escenario improbable y malo, todavía estás a salvo. Y todo eso mientras se proporciona una mejor user experience, lo cual es fantástico, ¿verdad? Porque obtenemos todos los beneficios y un poco de los inconvenientes, ¿verdad? Hay, hay esta cosa en la que todavía necesitamos educar a la gente para que aprenda sobre esto. Como, si la gente empieza a ver este tipo de flujos, todavía no sabrán cómo react a ello, porque todo el mundo está tan acostumbrado a los nombres de usuario y contraseñas. Cuando veo en los próximos años como Google y Apple y todos estos gigantes siguen impulsando el web auth n, va a mejorar y la gente se va a acostumbrar más a ello. Y esto va a ser el futuro en pocos años. Así que estoy bastante emocionado acerca de el futuro de la autenticación sin contraseña.
7. Claves PaaS e Introducción a la Masterclass
Short description:
Las claves PaaS son una implementación de web auth n y son automáticamente únicas para cada servicio. Son resistentes a los ataques de puente y phishing. Puedes usar las claves PaaS en aplicaciones construidas con Auth0 de Octa, así como con Google, Apple, GitHub y más. La lista de servicios que admiten claves PaaS está en constante crecimiento. Durante la masterclass, construiremos una aplicación utilizando Next.js y Auth0 para admitir inicios de sesión sociales y claves PaaS. Si tienes alguna pregunta o pensamiento, por favor compártelo en el chat. También exploraremos las características de Auth0 y proporcionaremos instrucciones para la masterclass.
Hasta ahora, todo lo que hemos hablado es web auth n. Y cuando tomas en cuenta web auth n, más biometría, y un protocolo específico para enviar y recibir los desafíos, entonces estás hablando de claves PaaS, que es básicamente de lo que hemos estado hablando, ¿verdad? La principal diferencia entre las claves PaaS y web auth n es que las claves PaaS son automáticamente únicas para el servicio. Así que incluso aunque puedas tener una clave privada y una clave pública por servicio, web auth n no lo impone. Puedes tener el caso donde siempre usas la misma clave privada y pública para iniciar sesión en todos tus servicios. Y eso sería una mala idea. Las claves PaaS se encargan automáticamente de eso. Así que también son resistentes a los ataques de puente y phishing. Básicamente los mismos beneficios que teníamos con web auth n. De hecho, las claves PaaS son una implementación de web auth n. Entonces, ¿dónde puedes usar las claves PaaS hoy? Bueno, puedes usar las claves PaaS en cualquier aplicación que esté construida con Auth0 de Octa. Y vamos a ver cómo puedes hacer eso. Vamos a construir una aplicación usando Auth0. Y puedes hacer todo esto de forma gratuita. Así que no hay ningún costo con Auth0 hasta 7,000 usuarios activos mensuales. Eso es más que suficiente para nosotros para probar e incluso ir a producción si quisiéramos. Google también admite claves PaaS y Apple, por supuesto y GitHub y muchos más. Nuestros servicios ahora están admitiendo claves PaaS. Si quieres ver qué servicios usan claves PaaS, puedes visitar el sitio web paaS keys.directory. Ese es un sitio web creado por nuestros amigos de 1password y en paaS keys.directory, pones el nombre de tu servicio allí y te dirá si admite claves PaaS o no. Así que la lista está en constante crecimiento. Y estamos bastante emocionados de que eso esté sucediendo. Entonces, ¿cómo te sientes hasta ahora? ¿Tienes alguna pregunta? ¿Has usado claves PaaS antes? ¿Has oído hablar de ello? ¿Es algo totalmente nuevo para ti? ¿Estás emocionado por el futuro con las claves PaaS? O estás como, hombre, estoy bien con mis contraseñas? Como todo es válido, ¿verdad? Así que por favor comparte en el chat cuáles son tus pensamientos. Y vamos a empezar a construir algo, ¿verdad? Entonces, de nuevo, si quieres conectarte conmigo, voy a dejar eso en la pantalla. Durante unos minutos, puedes escanear este código QR en VHACMartinez en las redes sociales. Voy a compartir las diapositivas y todo lo relacionado con esta masterclass más tarde también en Twitter, LinkedIn, Instagram, ese tipo de cosas. No estoy en TikTok. Pero si todo el mundo lo pide, tal vez pueda crear una cuenta. Pero sí, comparte, comparte tus pensamientos. Comparte tus ideas, lo que piensas sobre las contraseñas, y empecemos a trabajar en ello. Finance está usando claves PaaS. Oh, eso es interesante. No sabía eso. Es bueno verlos implementados. Voy a compartir en el chat un enlace y una contraseña. Esto va a ser lo que vamos a seguir en la masterclass. Así que la URL es developer.auth0.com slash resources, blah, blah, blah, blah. Puedes hacer clic en ese enlace y usar la contraseña, react-based. Eso te dará acceso a este sitio web. Y vamos a seguir esta masterclass juntos. La masterclass te dará todas las instrucciones que necesitas para construir una aplicación usando Next.js y usando Auth0 para admitir tanto inicios de sesión sociales como también claves PaaS. Así que vamos a pasar por todo ese proceso juntos. Va a ser divertido. Va a ser simple. Creo que vamos a terminar antes de tiempo porque es bastante fácil de hacer. Así que si tenemos algo de tiempo al final, también podemos tener algunas rondas de preguntas. Y por supuesto, también vamos a explorar un poco más de las características que vienen de serie con Auth0. Ahora, no he trabajado con inicios de sesión temporales. Así que he trabajado con enlaces mágicos, que es similar a lo que acabas de mencionar. Normalmente duran unos pocos días. Usé Auth0 para hacer eso en el pasado. Y también tengo mi propia implementación, que no recomiendo a nadie seguir. Pero sí, sí. Así que sí, hice eso en el pasado. No lo hago más porque realmente, cuando intento iniciar sesión ahora en Slack, y me pide que haga eso, es bastante molesto, especialmente cuando intento usar mi teléfono, porque entonces necesito como detener completamente mi flujo, ir a mi aplicación de correo electrónico, hacer clic en ese enlace, que abre mi navegador, que luego abre Slack. Así que es bastante como, es bastante molesto desde la user experience. Así que he dejado eso atrás. Y normalmente ahora estoy usando proveedores sociales, nombre de usuario y contraseña para mis aplicaciones. Y solo en algunas aplicaciones, que estoy construyendo, habilito Fastkeys para ver cómo los usuarios react a ello. Pero está en un lado experimental de mi parte, porque los usuarios todavía no están muy acostumbrados a ello. Así que cuando lo ven por primera vez, están un poco confundidos. Pero está mejorando, está mejorando, especialmente en la community técnica, la gente se está volviendo mucho más consciente de esta nueva tecnología. Así que creo que veremos mucho más sucediendo. Así que sí, espero que todos hayan tenido tiempo para hacer clic en la URL que compartí con la contraseña react days. Y si todo el mundo está allí. Sí, así que la primera, la primera página es solo una introducción a la masterclass. Tiene alguna información sobre mí y cómo puedes conectarte conmigo en
8. Configuración del inquilino Auth0 y conexiones sociales
Short description:
Para comenzar la masterclass, haga clic en el botón siguiente para comenzar la autenticación de Fastkeys de Next JS. Necesitará NodeJS para ejecutar la aplicación y una cuenta de Auth0. Crear un nuevo inquilino es sencillo, y puede utilizar su cuenta de Google para iniciar sesión. WebAuthn es compatible con los principales navegadores, incluyendo Firefox, Chrome y Safari. Al crear un inquilino, elija un nombre único y seleccione la región de la UE para obtener actualizaciones más rápidas. Para el desarrollo, una cuenta gratuita de Auth0 permite hasta 7,000 usuarios activos mensuales. El siguiente paso es Social Connections 101, donde puede iniciar sesión utilizando Google, Facebook y más a través del inicio de sesión universal de Auth0.
Twitter o Github. También estoy en LinkedIn. Puedes encontrarme con el mismo en vahcmartinez. Y sí, podemos, podemos empezar haciendo clic en el siguiente botón aquí, o botón de finalizar, creo que a veces dice, y pasar a la autenticación de Fastkeys de Next JS authentication. Y lo primero que vamos a necesitar es que vamos a necesitar NodeJS, necesitamos ejecutar una aplicación React o una aplicación NodeJS. Y vas a necesitar crear una nueva cuenta en Auth0. Y cuando lo hagas, te pedirá que crees un nuevo inquilino. La pantalla de nuevo inquilino se ve algo así. Voy a hacer eso aquí junto con todos ustedes. Así que es súper fácil. Ya tengo una cuenta de Auth0. Así que simplemente voy a iniciar sesión. Y voy a continuar con mi cuenta de Google. Verás, no uso contraseñas. En este caso, confío en Auth0. Así que voy a usar mi cuenta de Google para iniciar sesión en eso. Y lo que voy a hacer, que es el mismo proceso que te guiará cuando intentes crear una cuenta, te pedirá que crees un nuevo inquilino. Las contraseñas necesitan ser soportadas por los navegadores. Sí, eso es correcto. WebAuthn, puedes buscar WebAuthn. Y puedo usar creo que es un servicio. Y te dirá cuáles son los navegadores que lo soportan. Y todos los principales navegadores lo soportan ahora. Así que Firefox, Chrome, Safari y esto es también, sí, también móvil, Chrome, Safari. Así que todos los principales navegadores lo hacen. Y en el caso de Edge aquí, funciona con el nuevo Microsoft Edge. Creo que se llama. Sí. Bueno. Así que sí, lo veo. También, una noche más. Así que si estás en las últimas versiones de tus navegadores, es probable que funcione. No he probado MetaQuest. Necesitas una forma de biometría normalmente cuando se trata del navegador. Así que sería interesante ver cómo aplicarías la biometría. En ese escenario, pero sería interesante probarlo. No sé. Tal vez debería conseguir uno y probar tal vez. Tal vez esa es la excusa que necesito para conseguir uno de esos. Bueno, entonces, cuando estás en, cuando estás obteniendo un nuevo inquilino, normalmente obtendrás una pantalla como esta, donde te pedirá que introduzcas el nombre de tu inquilino, el nombre de tu inquilino es básicamente el nombre de tu cuenta. Normalmente creas un inquilino por aplicación, puedes tener incluso dos inquilinos por aplicación, puedes tener uno para tu entorno de desarrollo y uno para tu entorno de producción. Sí, voy a, voy a crear uno, voy a usar mi cuenta personal. Tengo una cuenta corporativa, pero voy a usar mi cuenta personal gratuita, porque realmente no necesitamos pagar por Auth0 para usar todas estas características. Y luego, cuando se trata de la región, te recomiendo que elijas la UE si es ahí donde vives. Porque de esa manera será la más rápida en comparación con la otra región. Y también la UE siempre sigue las últimas actualizaciones. Fast keys se despliega en todas las regiones. Pero a veces tenemos características que se despliegan en la región de forma independiente. Pero por ahora, sí, me voy a quedar con la UE. Y voy a crear esto con react. Ellos JC, por si acaso alguien tomó mi nombre, que necesita ser único por región. Y en el entorno, voy a seleccionar desarrollo, aunque nada. No hay nada malo en seleccionar producción aquí. Cuando vayamos a crear una aplicación para producción, puedes hacerlo completamente gratis con una cuenta gratuita de Auth0 hasta 7,000 usuarios activos mensuales. Así que es más que suficiente. Pero por ahora, voy a ir a desarrollo, solo algo que quiero mostrarte. Espero que todos puedan ver bien mi pantalla aquí, tal vez haré el navegador un poco más grande y aumentaré la fuente. Así que cuando creas tu inquilino, llegarás a la primera pantalla, que es como este tutorial que te preguntará si usas Obsero antes, o si eres un nuevo usuario de Obsero. Y sí, así que espero que todos estén aquí ahora. Así que déjame ver, tenemos algunas personas. Acabo de recibir una notificación. Algunas personas están esperando unirse. Así que voy a volver ahora a nuestra masterclass. Y bien, ya hicimos el paso de crear una nueva cuenta en un nuevo inquilino. Voy a hacer clic en Siguiente para ir a Social Connections 101. Y las conexiones sociales es esto que hemos estado discutiendo que puedes iniciar sesión usando tu cuenta de Google, tu cuenta de Facebook, etc. Y por supuesto aquí en la masterclass, también explicamos algunos de los beneficios y desventajas que ya cubrimos durante la presentación. Así que vamos a seguir adelante y empezar con las conexiones sociales. Y esto es súper fácil. Una vez que te registras en Obsero, Obsero tiene un protocolo, el inicio de sesión universal. Y esta es esta pantalla de inicio de sesión característica de Obsero. Y esto es lo que tu
9. Obsero Inicio de sesión universal y proveedores sociales
Short description:
Obsero envía automáticamente la información de la sesión a su aplicación. Para tener una idea de la pantalla de inicio de sesión universal de Obsero, haga clic en el enlace Empezar en el panel de Obsero. Puede probar el cuadro de inicio de sesión, registrarse con correo electrónico y contraseña, o continuar con Google. Para usar el inicio de sesión de Google en producción, necesita registrar su aplicación con Google y configurar la pantalla de consentimiento de OAuth. Obsero importa automáticamente información de los proveedores sociales. Puede agregar conexiones adicionales desde el mercado de Auth0, incluyendo Facebook, Apple, Microsoft, LinkedIn y GitHub. Puede tener hasta dos conexiones sociales gratis en el plan gratuito de Auth0. Los proveedores sociales personalizados pueden ser creados siempre y cuando sigan el protocolo OAuth 2. ¿Alguna pregunta hasta ahora?
las aplicaciones van a usar para autenticar a sus usuarios. Y luego Obsero va a enviar la información de esa sesión de vuelta a su aplicación. Y eso sucederá automáticamente con nuestros SDKs. Lo veremos en gran detalle. Pero para tener una idea de la pantalla de inicio de sesión universal de Obsero, puede seguir adelante y hacer clic aquí, en el enlace Empezar en la parte superior izquierda de su panel de Obsero. Y eso le llevará a la pantalla Empezar. Y si se desplaza hacia abajo, hay un cuadro aquí que dice prueba tu cuadro de inicio de sesión. Ahora puede hacer clic en Probarlo. Y cuando lo haga, verá automáticamente su pantalla, su pantalla de inicio de sesión universal que decíamos bienvenida. Mostrará el nombre de su aplicación, en este caso, el nombre de su inquilino. Así que eso es lo único que hemos configurado hasta ahora. Y va a usar los flujos de trabajo típicos de dirección de correo electrónico y contraseña para registrarse o para iniciar sesión. Ahora mismo no tengo ningún usuario, así que realmente no puedo iniciar sesión, pero podría registrarme. Y también tiene la opción de continuar con Google. Esto ya viene por defecto con su instalación de Obsero, puede cambiarlo y puede personalizarlo. Y si miramos hacia arriba, hacia la esquina superior derecha, vemos que hay un signo de exclamación aquí que está en rojo y como resaltando, si hacemos clic en eso, nos está diciendo que estamos usando las claves de desarrollador. Y esto está relacionado con el botón Continuar con Google. Cuando quiera usar el botón Continuar con Google, necesita registrar su aplicación con Google, y necesita crear lo que se llama la pantalla de consentimiento de OAuth. No lo hemos hecho porque acabamos de crear nuestra cuenta de Obsero, así que Obsero no está al tanto de eso. Y por lo tanto, ofrece por defecto una aplicación de Obsero. Eso funciona, si decidiera, podría hacer clic en Continuar con Google, y me llevaría a Google para autorizar con mi cuenta. Así que eso funcionará para los entornos de desarrollo o para los entornos de dev, pero no funcionará en su entorno de producción. Así que necesita tener en cuenta eso. Si quiere usar el botón Continuar con Google en su entorno de producción, necesita solucionar eso. ¿Y cómo lo soluciona? Bueno, en Obsero, puede solucionarlo yendo al menú del lado izquierdo aquí en authentication. Y luego puede hacer clic en social. Cuando hacemos clic en social, vemos una lista de todas las conexiones sociales que tenemos actualmente. Y en el caso de Google, que es la que está actualmente habilitada, vemos que tenemos este signo de advertencia con un triángulo y un signo de exclamación que dice activo con las claves de desarrollo de Obsero. Así que para solucionar eso, puede hacer clic aquí en la conexión social, Google OAuth 2. Y cuando eso sucede, hago esto un poco más grande porque no cabe en la pantalla. Así que cuando eso sucede, se abre este formulario, donde necesita proporcionar un ID de cliente, un secreto de cliente, y los ID de cliente móvil permitidos, que es información que viene de Google. Así que esto, tendrá que tener una cuenta en Google Cloud. Y no es algo que cueste, es algo que es un servicio que es gratis, y te permite iniciar sesión con Google. Si tienes alguna pregunta sobre cómo hacer esto con tu proveedor social, siempre hay una guía de configuración aquí en la esquina superior derecha. Y si haces clic en eso, se abre este popup que explica un poco lo que es la conexión social de Google Gmail. Y luego si haces clic en la flecha de la derecha aquí, puedes ir paso a paso, te dice que te registres para una cuenta de desarrollador de Google, para crear un proyecto de Google. Y paso a paso, te guiará sobre cómo necesitas configurar tu pantalla de consentimiento de OAuth, para que funcione con tu cuenta de Auth0. Y al final de eso, tendrás toda la información que necesitas. Y luego puedes probar tu conexión de nuevo. Y cuando lo hagas, sí, va a ir al inicio de sesión con la cuenta de Google, y luego podrás continuar como normalmente lo harías. Y sí, en este caso, funciona bien y me da alguna información sobre mi cuenta de Google. ¿Cuál es mi ID? Este es un ID generado por Auth0. Pero el resto de la información viene de Google, como cuál es mi nombre dado, mi apellido, mi apodo, nombre, etc. También está el correo electrónico que viene de Google, pero no lo mostramos aquí por razones de privacidad. También hay una foto que Google seleccionó para mí, que es esta necesito actualizar. Pero eso es otra historia. Pero sí, Auth0 importará automáticamente toda la información del proveedor social y guardará esa información para la próxima vez que inicies sesión. Así es como configuras tu conexión de Google. Pero tan fácil como es configurar tu conexión de Google, puedes añadir conexiones adicionales utilizando este botón Crear Conexión. Y cuando haces eso, va a ir al mercado de Auth0, que es un lugar donde Auth0 y otros proveedores de terceros pueden añadir sus propias autenticaciones. Como por ejemplo, tenemos todas las comunes. Así que tienes tu Facebook, tu Apple, Microsoft, LinkedIn, GitHub, como hay más de 70 diferentes conexiones que ya están preestablecidas y funcionan automáticamente con Auth0. Y puedes tenerlas en tu plan gratuito. Puedes ir a Auth0.com slash pricing. Y en el plan gratuito aquí, si haces clic aquí, Comparar Planes, puedes tener hasta dos diferentes conexiones sociales gratis. Y hasta 7,000 usuarios activos mensuales. Así que puedes tener tu Google y tu GitHub, por ejemplo, o tu Google y tu Facebook, o las dos conexiones que te gustaría tener. Y de nuevo, no importa qué proveedor social elijas, como por ejemplo, podría hacer clic aquí en Facebook, automáticamente me envía a la guía y me permite continuar siempre con información sobre qué necesito hacer en esa plataforma para que funcione con Auth0, que normalmente implica, de nuevo, como la misma cantidad de pasos, como tener un ID de aplicación y un secreto al mínimo. Y en el caso, por ejemplo, de Facebook, incluso puedes decirle a Facebook, ¿qué tipo de información te gustaría tener de Facebook? Así que incluso puedes recuperar a través de Auth0, ¿cuáles son los gustos del usuario, el género, la ubicación, así que toda esa información, que va a aparecer en el diálogo de Facebook como parte de las solicitudes que hacemos. Ese típico pop up preguntando si Facebook dará acceso a la aplicación. Así que, sí, así que tienes más de 70 proveedores diferentes aquí. Normalmente todos tus proveedores sociales conocidos están aquí. Pero si resulta que trabajas con otro proveedor que no está aquí porque es nuevo o porque por cualquier razón no lo tenemos, aquí puedes crear un proveedor social personalizado. Y siempre y cuando el proveedor social siga el protocolo OAuth 2, que es muy común para este tipo de escenarios, podrás configurarlo aquí pasando toda la información manualmente como tu URL de autorización, tu URL de token, alcance, etc. Así que, sí, siempre puedes conectar Auth0 a cualquier proveedor OAuth 2 de tu elección. Es bastante fácil de hacer. Muy bien. ¿Alguna pregunta hasta ahora? Muy bien. Así que hemos visto Auth0. Hemos visto el cuadro de inicio de sesión. Hemos visto los proveedores sociales, cómo funcionan.
10. Plan gratuito de Auth0 y PassKeys
Short description:
Auth0 ofrece un plan gratuito con dos conexiones sociales y un límite de 7,500 usuarios activos mensuales. Los usuarios inactivos no cuentan para la cuota. Si se alcanza el límite, Auth0 no cerrará el servicio sino que contactará al usuario para discutir opciones. Auth0 no tiene un límite estricto y puede escalar con aplicaciones de rápido crecimiento. La página de precios proporciona información sobre los diferentes planes y características. Los dominios personalizados son una característica de pago, pero muchos casos de uso aún utilizan el dominio de Auth0. PassKeys es una nueva tecnología soportada por Auth0, y se proporcionan instrucciones sobre cómo activarlos. Auth0 almacena la información del usuario en su base de datos por defecto, pero los usuarios pueden crear múltiples conexiones de base de datos. FastKeys se pueden habilitar en la pestaña de métodos de autenticación. El flujo de inicio de sesión del identificador primero debe estar habilitado para que FastKeys funcione.
Y ahora vamos a continuar con el siguiente paso en la masterclass. Así, dentro del plan gratuito, puedes visitar Auth0.com. Obtienes dos conexiones sociales en la cuenta gratuita. Mira, ahora son 7,500 usuarios activos mensuales. Eso significa que si un usuario no inicia sesión en un período dado, no cuenta para tu cuota. Así que si no inician sesión en ese mes, no cuentan para esa cuota. Así que los usuarios inactivos no cuentan, lo cual no es suficiente. Tengo un enlace en el chat. ¿Qué sucede al final de la cuota? No cerraremos tu servicio. Entonces, ¿qué va a pasar si alcanzas el límite y no inicias sesión? Bueno, va a ser un plan gratuito. Así que no obtendrás más plan gratuito. Entonces, ¿qué va a pasar si alcanzas el límite y no inicias sesión? Y sí, el plan gratuito ha sido más que suficiente. ¿Qué sucede al final de la cuota? No cerraremos tu servicio. Entonces, ¿qué va a pasar si alcanzas el límite y en un mes dado o en dos meses, alguien de ventas te contactará. Y luego te guiará a través de las opciones. Sí, pero no hay un límite estricto. No es como si fueras a ser rico. De hecho, una historia divertida es la de JetGTP. Hay cierta controversia alrededor de eso ahora, pero JetGTP es un cliente de Auth0. Y el día que se lanzaron, excedieron su plan, inmediatamente. Y pudieron escalar a pesar de, no sé, ¿cómo fue como millones de usuarios en un día o algo así? Y Auth0 escaló con ellos sin problema. Y comenzaron con el plan gratuito. Nadie esperaba que crecieran tan rápido, ni siquiera ellos mismos. Así que, sí, no te cortarán. Alguien se pondrá en contacto contigo y te guiará a través de las opciones. Si quieres saber un poco más sobre los diferentes casos de uso y todo eso. Como esto en la página de precios, tienes esto. Es como eso donde puedes decir cuántos usuarios tienes y cuánto pagarás en los diferentes planes. Dividimos los planes entre B2B, B2C. Y luego puedes comparar todas las diferentes opciones aquí, en esta tabla. Y hay realmente muchas cosas. Vamos a repasar al final si tienes algo de tiempo para ver algunas de las otras características gratuitas. Así que una de las características de pago por las que mucha gente salta es los dominios personalizados. De forma nativa, proporcionamos algo como tu aplicación en Auth0.com. Ese es el dominio que van a usar para iniciar sesión. Si quieres tenerlo al revés, como off en tu dominio.com, eso sería una característica de pago. Pero hay muchos casos de uso donde todavía usan el dominio dado por Auth0, que es tu empresa o tu producto.auth0.com. Sí. Vale. Sí. Continuando con la masterclass. Así que trabajamos un poco con las conexiones sociales. Aprendimos cómo configurar tu Google o tu Facebook. Así que cubrimos un poco eso. Y a continuación, vamos a aprender cómo usar PassKeys porque Auth0 ahora soporta PassKeys. Los PassKeys no están habilitados por defecto porque son una nueva tecnología y sólo están en acceso temprano. Pero si te acabas de inscribir para una cuenta, tendrás las opciones de PassKeys habilitadas. Y hay instrucciones aquí sobre cómo activarlo. Así que vamos a volver al panel de Auth0. Y vamos a ir a authentication y database. Así que database son todos los lugares donde Auth0 va a almacenar tu información de usuario. Así que una cosa que necesitas saber sobre Auth0 es que por defecto, Auth0 almacenará la información del usuario en la database de Auth0. Eso significa que va a ser alojado en nuestra cloud. Y sí, y puedes crear múltiples conexiones de database y añadirlas a tu cuenta. Aunque, puedes tener una database activa por aplicación en un momento dado. Así que o usas una o la otra. Así que por defecto, Auth0 creará esta autenticación de nombre de usuario y contraseña. Y si haces clic en esa, podrás establecer diferentes configuraciones para ella. ¿Requieres un nombre de usuario o sólo quieres usar el correo electrónico? ¿Quieres tener. ¿Quieres importar usuarios a Auth0? ¿Quieres deshabilitar los registros? Quizás sólo quieres enviar invitaciones a la gente y no permitir registros generales. Y también está esta pestaña, métodos de authentication. Si tienes esta pestaña, entonces tienes FastKeys habilitados para tu cuenta. Así que por defecto, tendrás contraseñas, algo que siempre tenemos en soporte. Pero además, puedes habilitar FastKeys. Y simplemente haciendo clic aquí, activaré o le diré a Auth0 que quiero usar FastKeys para mi cuenta. Y cuando hago clic en eso, me dice que realiza una comprobación en mi cuenta para asegurarse de que todo lo que estoy haciendo es correcto y que tengo todas las configuraciones requeridas para FastKeys. Y me dice que en su mayoría, estoy bien, excepto por este flujo de inicio de sesión del identificador primero, que debe estar habilitado. Entonces, ¿qué significa esto? Bueno, puedo hacer clic aquí en el inicio de sesión del identificador primero para averiguarlo. Así que eso me lleva a la página del perfil de authentication y esto me da un bonito gráfico aquí en el lado derecho que me muestra.
11. Configuración de Identifier First y FastKeys
Short description:
En el flujo actual, los usuarios pueden ingresar su correo electrónico y contraseña o elegir la opción de identificador primero. El flujo de identificador primero es necesario para FastKeys y requiere que los usuarios proporcionen su dirección de correo electrónico primero. Este flujo es importante para FastKeys y los métodos de autenticación empresarial. Después de habilitar el flujo de identificador, podemos activar FastKeys y soportarlo en nuestra aplicación. Los usuarios verán la opción de continuar con FastKeys o sin ellos. Al crear un FastKey, los usuarios pueden iniciar sesión fácilmente sin una contraseña. Los administradores de contraseñas como OnePassword pueden guardar FastKeys, haciendo el proceso de inicio de sesión aún más suave.
Cómo se ve mi flujo actual. Entonces tenemos la pantalla típica de correo electrónico y contraseña del usuario donde ingresas toda la información y luego están los botones y luego el factor múltiple y luego estás conectado. O puedes cambiar y decir que quiero el identificador primero. Y si hago clic en eso, primero el usuario proporciona una dirección de correo electrónico. Y después de eso, proporcionan la contraseña o continúan con las otras opciones. Y se requiere tener esto configurado en el identificador primero para FastKeys. Así que tendremos que habilitar eso. Y para hacer eso, simplemente hacemos clic en él y hacemos clic en guardar. Y luego, si queremos ver, podemos hacer clic en probar. Y ahora, cuando veo la pantalla de inicio de sesión universal, solo me pide mi dirección de correo electrónico. Y después de ingresar mi dirección de correo electrónico, me pedirá que ingrese mi contraseña. Esto es muy similar a lo que Google tiene hoy en otros servicios donde dividen la pantalla en dos. Esto es particularmente importante cuando se trabaja con FastKeys o cuando se tienen otras conexiones enterprise. Pero necesitas conocer la dirección de correo electrónico para saber qué métodos de authentication tiene el usuario. Sí, lo siento por eso. Pero déjame intentar eso de nuevo. Voy a hacer clic de nuevo en probar. Entonces sí, espero que ahora puedas leer mejor. Entonces ahora el flujo que configuramos, primero nos pide que proporcionemos el nombre de usuario o la dirección de correo electrónico. Y una vez que proporcionamos la dirección de correo electrónico, nos pide que ingresamos el correo electrónico. Este flujo es particularmente importante, por ejemplo, cuando tienes FastKeys o cuando tienes métodos de authenticationenterprise. Donde necesitas saber quién es el usuario antes de ofrecerles las opciones para iniciar sesión. Como por ejemplo, puedes decir que los usuarios de mi dominio solo deben registrarse con un proveedor social, por ejemplo. Con un espacio de trabajo de Google. Y los usuarios externos pueden registrarse con nombre de usuario y contraseña. Entonces, para hacer ese tipo de configuración, necesitas tener este flujo de identificador. Porque necesitas saber quién es el usuario primero, y esto es un requisito para FastKeys también. Entonces ahora que cambiamos eso. Y estamos aquí en el perfil de authentication. Y guardamos eso. Podemos volver a nuestra database. Y podemos hacer clic en la authentication de nombre de usuario, contraseña. Y podemos volver a los métodos de authentication. Y podemos hacer clic aquí en FastKeys, y ahora podemos hacer clic en activar. Y tan fácil como eso, ahora estamos soportando FastKeys. Hay algunas configuraciones avanzadas que podemos hacer, pero no son necesarias. Podemos seguir adelante y hacer clic en probar conexión. De nuevo, ahora cuando hacemos eso, como el formulario se ve prácticamente igual. Pero ahora tengo este botón de continuar con FastKey. Aún no estoy registrado. Entonces, en lugar de continuar con el FastKey, voy a registrarme. Y voy a usar una nueva dirección de correo electrónico para registrarme. Y debería recordar este. Prueba dos, prueba dos. Y voy a hacer clic en continuar. Y ahora cuando continúo, en lugar de pedirme que ingrese una contraseña, me está diciendo que esta aplicación soporta FastKey. Y me está preguntando, ¿quieres usar FastKeys? ¿O quieres continuar sin FastKeys? Si hago clic en continuar sin FastKeys, volveré a ver. Sí, gracias. Siempre hago eso. Como si tienes una cuenta de Gmail, creo que todos los proveedores de correo electrónico proporcionan eso, el plus. Cada vez que me registro en un servicio, hago más en el nombre del servicio. Porque entonces si empiezo a recibir spam, puedo saber quién vendió mis data. Muy importante. Pero también para fines de testing, es excelente. Entonces sí, los usuarios normalmente verán la pantalla donde dicen que no necesitas recordar algo así como los beneficios y la opción de crear un FastKey. Si hago clic en crear un FastKey ahora, lo primero que aparece aquí es mi administrador de contraseñas. Entonces, OnePassword ya me está diciendo, oye, mira eso. Puedes guardar FastKeys dentro de OnePassword, ¿verdad? Y puedo guardarlos en mi cuenta, ¿verdad? Automáticamente sabe que mi correo electrónico. Puso este icono para identificar que hay un FastKey y puedo hacer clic en guardar. Y tan fácil como eso, estoy conectado. Estoy automáticamente conectado al panel de Auth0. Así que no necesito una contraseña. Nunca registré una contraseña. Entonces, la única forma de iniciar sesión ahora es a través de mi FastKey. Y ahora si hago clic en probar conexión de nuevo, en el momento en que hago clic en probar conexión, y veo la pantalla de Auth0, puedes ver aquí en la parte superior derecha, OnePassword ya lo sabe. Y esto no es una característica de OnePassword. Esta es una característica de FastKey porque FastKeys son conexiones descubribles. Eso significa que cuando estás en un sitio web, puedes preguntarle a la parte que confía si ya tienes una cuenta para ello. Y en este caso, lo hacemos. Y automáticamente activa ya sea el OnePassword o el llavero o lo que sea.
12. Registro de FastKeys y Confirmación de Correo Electrónico
Short description:
El registro de FastKeys es fácil y se puede hacer con dispositivos como UBIKEY o iCloud Keychain. También puedes usar un teléfono, tableta o llave de seguridad. La aplicación recibe información del usuario, incluido el estado de verificación del correo electrónico. Auth0 envía un correo electrónico de verificación personalizable a los usuarios. Una vez confirmado, se valida el correo electrónico del usuario. La confirmación del correo electrónico es un proceso estándar al configurar una cuenta, aunque técnicamente no se requiere para FastKeys.
Un dispositivo o servicio que estás utilizando para registrar tus FastKeys, te pedirá automáticamente que inicies sesión. Y es tan fácil como hacer clic ahora para iniciar sesión aquí con mi one password para ser automáticamente conectado. No necesito poner mi correo electrónico, no necesito hacer nada. Automáticamente sabe que tengo una cuenta y automáticamente me pide que inicie sesión. Así que es súper fácil. Es fantástico. Y de nuevo, es el mismo proceso ya sea que esté usando one password o cualquier otro dispositivo. Como, por ejemplo, puedo usar mi UBIKEY, que es esta llave de hardware que tengo. Sí, la masterclass será grabada y la compartiremos después. Gracias por unirte. Así que de nuevo, podemos probar la conexión. Y si quisiera, podría registrarme, y podría registrarme con una nueva dirección de correo electrónico. Continúas. Voy a crear un FastKey, pero no quiero usar mi one password. Así que voy a usar esto. Puedo escuchar que se activan las opciones predeterminadas. Así que en este caso, ignoré one password. Y ahora tengo estas diferentes opciones porque estoy en una Mac. Puedo crear un FastKey usando iCloud Keychain, y eso se sincronizará con todos mis dispositivos Apple. Puedo usar un teléfono, tableta o security key. Esta es una opción muy interesante. Y lo veremos más tarde. O puedo usar mi perfil de Chrome. Y en ese caso, mis data se almacenarán en mis data de Chrome y se sincronizarán con mi cuenta de Google. Voy a elegir ahora usar un teléfono, tableta o security key. Y cuando hago eso, va a tener un código QR. Sí, vamos a recibir un correo electrónico. Volveré en un minuto. Así que vemos ese código QR. Y ahora debería poder tomar mi iPhone o cualquier otra opción de Google, y puedo escanear este código QR y activar iCloud chain en mi teléfono. Y en lugar de usar la cadena iCloud, puedo usar mi iPhone. Puedo escanearlo en mi dispositivo. O por ejemplo, si estoy en una computadora con Windows, puedo usar mi teléfono para iniciar sesión en mi cuenta. De la misma manera que lo haría usando Face ID directamente en la computadora, o si estoy accediendo a este sitio web a través del teléfono, puedo pasar por esto y escanear el código QR. Pero aún más fácil, también puedo usar mi security key y acceder con mi security key. Cuando toco mi security key, tiene un botón, que es mi UBI key que mostré antes, y me pide un PIN. Esto es porque tengo un PIN configurado para esto. No solo alguien necesita tener acceso a mi llave, sino que también necesitan conocer el PIN para iniciar sesión. Así que ingreso el PIN y toco de nuevo en la llave. Y ahora estoy conectado. Y ni siquiera necesito un administrador de contraseñas, ¿verdad? Así que puedo usar todas las otras opciones que mencioné. En este caso, utilicé esta security key, que es una security key de UBI. Lo cual es algo que recomiendo. Y recomiendo, como mencioné, tener dos de ellas en caso de que pierdas una, no pierdas el acceso a tus cuentas. Entonces, lo que pasó aquí es, sí. Así que la aplicación recibió toda la información sobre el usuario. Esta no es toda la información que Auth0 proporciona. Esto es solo lo que decidimos aquí mostrar en la pantalla. Pero Auth0 también te proporcionará un campo con un estado de usuario. Eso significa que te dirá si el usuario ha sido verificado o no, si el correo electrónico ha sido verificado o no. En este caso, no hacemos nada al respecto. Pero si quieres hacer cumplir que todos los usuarios que acceden a tu aplicación estén verificados, tendrás que hacerlo por tu cuenta. Auth0 autenticará al usuario siempre que coincida con las credenciales. Así que eso es algo que puedes decidir por tu cuenta. Y todos los usuarios recibirán un correo electrónico. Y puedes personalizar ese correo electrónico. Está en la sección de branding. Plantillas de correo electrónico. Y entonces recibirán el típico correo electrónico de verificación. Que aquí, donde está este HTML puedes personalizar. Pero básicamente dice, bienvenido, y luego confirma tu cuenta. Que hay un enlace y haces clic en ese enlace y confirmas. Una vez que confirmas, la próxima vez que el usuario inicie sesión, va a tener ese campo. Creo que se llama correo electrónico validado o algo así. Es bastante obvio cuando lees al respecto. Y va a tener eso también. Entonces decides qué hacer con esa información en tu propia aplicación. Así que sí, confirmación de correo electrónico, igual que siempre. Por eso también requerimos un correo electrónico para configurar una cuenta. Usando past keys, técnicamente no necesitas un correo electrónico.
13. Uso de Passkeys para Autenticación
Short description:
Puede usar su teléfono inteligente, un YubiKey o servicios como iCloud chain y Google Chrome para autenticar sin contraseñas. Estos passkeys se almacenan de forma segura en su dispositivo y no se pueden acceder ni proporcionar a los atacantes. Los bancos pueden ser lentos para implementar passkeys, pero la comodidad y seguridad que ofrecen valen la pena. Los passkeys se pueden almacenar en dispositivos físicos, teléfonos, iCloud chain o cuentas de Google. Usted tiene control sobre la sincronización de passkeys con la nube. Usar un YubiKey con un iPhone ahora es más fácil con soporte USB-C y NFC.
Pero por ahora, requerimos un correo electrónico para todos los usuarios para autenticarse a través de este método. Sí, puedes usar tu teléfono inteligente. Si estás en tu portátil, puedes escanear ese código QR que mencioné. Y usar tu teléfono inteligente para autenticar. Y eso te autentica automáticamente de esta manera. Y eso te autentica automáticamente en el portátil. O si estás en tu teléfono y accedes a ese sitio web a través del teléfono, lo haces automáticamente porque ya tienes iCloud chain o el equivalente. Y entonces puedes usar tu teléfono inteligente, puedes usar un YubiKey. O puedes usar servicios como iCloud chain, soportan passkeys ahora, Google Chrome. Entonces, si estás usando Google Chrome, vinculado a una cuenta de Google, puedes guardar esos passkeys en tu cuenta de Google. O puedes usar un administrador de contraseñas como 1Password. ¿Y una de las cosas buenas de 1Password, verdad? Digamos que voy aquí ahora a Auth0. Y busco mi usuario que acabo de crear, que es este aquí. Podemos ver que tengo, entonces mi correo electrónico se registró en mi cuenta de 1Password. Quizás esto es pequeño para ver, pero no puedo hacer zoom. No sabía eso. Entonces tengo aquí mi, y luego guarda mi passkey. E incluso si alguien, no estoy entrenado y soy un usuario que no sabe qué es un passkey, y estoy tan confundido. Y luego alguien del soporte técnico me llama y me pregunta, Necesito tu contraseña porque necesito acceder a tu cuenta para solucionar cualquier problema que estés teniendo, ¿verdad? Ya sabes, es una estafa típica que ocurre en cómo los hackers normalmente obtienen acceso a la información. Incluso si quisiera, es imposible para mí recuperar ese passkey. No hay ninguna acción que pueda hacer para ver ese passkey, para dárselo a un atacante. Entonces no sale de tu dispositivo. Es seguro. Mi cloud chain, lo mismo. No te permitirá ver tu passkey. Y en Google, creo que es lo mismo. Entonces esto es genial, ¿verdad? Porque incluso si no sabes lo que estás haciendo y estás confundido cuando alguien te llama y trata de obtener tu información, ni siquiera puedes proporcionar eso. Ni siquiera tienes la opción de proporcionar eso a los atacantes. Es fantástico. No sé si eso es mejor. Así que ahora estoy bastante acercado. Y no sé por qué. Normalmente en Zoom, estoy bastante lejos y hay mucho espacio aquí al lado. Y hoy estoy muy cerca. Así que no estoy seguro, Zoom siendo Zoom, supongo. No lo uso tanto. Así que no estoy seguro de cómo funciona bien. Bueno, déjame ver. Oh, sí, sí, los bancos. Sí, autenticarse en los bancos es realmente doloroso. Y no espero que veamos passkeys en los bancos pronto. Porque normalmente, los que deberían ser los más seguros, suelen ser los últimos en implementar nueva tecnología. Por una razón, supongo. Pero sí, me encantaría ver eso. Como ahora mismo, necesito, como, para mi banco, uso Deutsche Bank y es tan molesto porque necesito conocer mi número de cuenta. ¿Quién recuerda ese número de cuenta? No tengo idea, ¿verdad? Necesito conocer mi número de cuenta, mi sucursal. Necesito conocer mi PIN. Y luego necesito saber, no sé, algo más. Y encima de eso, necesito algo llamado TAN, que es un mal código QR que necesito escanear en mi teléfono. Nunca inicio sesión en mi banco. Si cierro sesión allí, estoy meses sin conocer mis extractos bancarios porque es simplemente muy doloroso. Sí, los passkeys se almacenan en algún lugar. Entonces, pueden almacenarse en un dispositivo físico, como un Yubicoke key, en tu teléfono, en iCloud chain, en tu cuenta de Google. Entonces, necesitan almacenarse en algún lugar. Todavía técnicamente está usando tus datos móviles. Así que eso es si decides sincronizarlos. Entonces puedes decidir usar iCloud chain, por ejemplo, y no sincronizar iCloud chain con la cloud. Y en ese caso, no usará datos móviles. Las únicas transferencias de datos móviles van a ser entre tú y el sitio en el que estás intentando iniciar sesión. Por razones obvias, todavía necesitas transferir información. Pero no se requiere ningún dato móvil para recuperar la clave porque la clave se almacenará en tu dispositivo. Ahora, habrá un proceso de sincronización si decides sincronizar eso con la cloud, pero eso depende completamente de ti. Así que tienes el control total. Y eso es algo bueno de eso. Personalmente, ahora estoy usando 1Password para algunas de mis transacciones. Así que puedo usar mis passkeys. Pero no me gusta tanto esa opción. Y estoy pensando en conseguir algunos otros YubiKeys y solo usar los YubiKeys. Sé que es un poco complicado usar, como, siempre el dispositivo físico para hacer eso. Pero ahora que el iPhone tiene USB-C y tengo un iPhone, puedo simplemente conectar la llave al USB-C y configurar NFC, y simplemente funciona.
14. Opciones para Passkeys y Adopción
Short description:
Estoy considerando seriamente el uso de llaves de hardware como iCloud Chain, cuenta de Google, y las llaves de hardware son mis opciones preferidas para passkeys. Otros gestores de contraseñas también están empezando a soportar passkeys. Google y Apple están promoviendo fuertemente los passkeys, y la adopción ocurrirá con el tiempo.
La otra opción es usar NFC, que esto también soporta, pero es un poco más engorroso. Y una de las razones por las que no me gusta tanto 1Password u otros gestores de contraseñas para, digamos, mantener mi información de passkeys es el hecho de que estoy compartiendo mis claves privadas. Y me gusta la idea de que mis claves privadas permanezcan locales. Eso soy yo, tal vez solo un freak, cuando se trata de security, pero trato de ser lo más seguro posible. Así que sí, estoy considerando seriamente esa opción de usar llaves de hardware. Me gusta mucho iCloud Chain. Es muy seguro, la forma en que lo implementaron, porque siempre te requiere usar, algo así como tu Face ID o tu Touch ID. Es conveniente, es fácil. Pero no todos mis dispositivos son de Apple. Y entonces se vuelve molesto cuando uso iCloud Chain. Y creo que iCloud Chain, y luego voy a mi máquina Linux, y ups, no tengo acceso a ninguno de mis passkeys o ninguna de mis contraseñas. Apple hace eso un poco feo. Pero si siempre estás en el ecosystem de Apple, eso es fantástico. Y luego también tienes la opción de usar la cuenta de Google para firmarlos. Pero de nuevo, el mismo problema. Si estás en un lugar donde no tienes tu cuenta de Google, entonces se vuelve engorroso. Y creo que vendrán más soluciones, como otros gestores de contraseñas que ahora lo están soportando. Así que creo que el panorama va a cambiar donde puedes almacenar y donde no puedes almacenar y cuáles son los métodos más seguros. Personalmente me gusta iCloud Chain, la cuenta de Google, y las llaves de hardware. Pero eso depende de las preferencias de cada uno. Todo es posible con passkeys. Es fantástico. Es bastante bueno. Es una tecnología realmente agradable. Estoy realmente deseando ver a más gente adentrándose en los passkeys. Y puedes hacer eso con tu cuenta de Google. Creo que si haces un passkey de Google, hay una dirección que puedes usar para iniciar sesión con tus passkeys, en algún lugar de tu cuenta de Google. Aquí, crea un passkey con tu cuenta. Así que, safety.google.com slash authentication. Esto también está en tu cuenta de Google. Puedes crear passkeys para tu cuenta de Google. Así que Google está promoviendo esto fuertemente. Apple también está promoviendo esto bastante fuerte. Así que veremos que la adopción está sucediendo. Solo va a tomar algún tiempo, pero veremos que la adopción está sucediendo lentamente con este gran impulso en passkeys.
15. Creando una Aplicación Next.js
Short description:
Hemos avanzado y probado todo en el panel de Auth0. Estamos listos para comenzar a codificar una aplicación Next.js desde cero. Empecemos. He usado Remix en el pasado y tengo grandes expectativas para la nueva versión.
Muy bien. Entonces, continuemos. Así que ahora hemos avanzado mucho, ¿verdad? Así que ya probamos todo en el panel de Auth0. Vemos que todo funciona con passkeys. Ya tenemos una conexión database aquí con Auth0. Así que estamos bastante listos para empezar a codificar.
Así que sí, vamos a empezar la parte divertida ahora. Así que vamos a crear una aplicación Next.js. Y no hay plantilla. Realmente quiero mostrar lo fácil que es hacer todo desde cero. La mayor parte del código que vamos a escribir hoy va a ser CSS. Pero vamos a pasar por ello muy rápido, porque no quiero molestar a nadie con esos detalles. Pero sí, empecemos.
Así que voy a moverme a mi... He usado Remix, sí. Y estoy esperando la nueva versión de Remix, que va a tener varios componentes y todo eso porque no estoy muy contento con la forma en que Next.js implementó todas estas cosas, y espero ver a Remix siguiendo un mejor camino. Así que no sé. No sé. Tengo muchas expectativas. Realmente me gustaría ver cómo se ve eso. Pero sí, he usado Remix en el pasado, y lo disfruto.
16. Creando un Proyecto Next.js
Short description:
Estoy creando un nuevo proyecto Next.js y siguiendo las instrucciones proporcionadas. Estoy utilizando TypeScript, ESLint y AppRouter. Estamos esperando a que npm termine. Nuestra aplicación NestJS está en funcionamiento. Abramos VS Code y un terminal. Ejecutar npm render renderizará los datos y mostrará la página de NestJS en localhost 3000.
Entonces... Muy bien, voy a crear un nuevo proyecto Next.js aquí en mi portátil. Entonces... Voy a hacer esto más grande para que sea más fácil de ver. Y voy a seguir las instrucciones que están aquí en el enlace Crea tu próxima aplicación en la masterclass. Y simplemente voy a hacer esto npx createNextApp para crear una nueva aplicación con las últimas versiones. Estoy listo para continuar.
Nombre del proyecto de la aplicación. Llamémoslo mi increíble inicio de sesión. Puedes llamarlo como quieras. Vamos a usar TypeScript. Vamos a usar ESLint. No queremos Tailwind CSS. Me encanta Tailwind. Esto me rompe el corazón, pero no quiero que todos copien o llamen a un montón de HTML solo por los nombres de las clases de Tailwind. Vamos a simplificar eso diciendo que no. Directorio de origen. No, supongo. Esto depende totalmente de ti. Veamos cuál era la recomendación aquí. Vale, dijimos que no. Eso depende de ti. Realmente no es necesario. Y vamos a usar AppRouter porque es la forma recomendada. Así que vamos a decir que sí. Pero todo lo que hagamos soportará AppRouter. Y el antiguo router de páginas. Solo el código será un poco diferente. O donde creas tu código será un poco diferente. Pero va a ser lo mismo. Y no necesitamos personalizar el alias de importación por defecto. Muy bien. Así que ahora esperamos a que npm haga lo suyo. Sí. Esperemos que no tarde una eternidad. Nunca se sabe con npm.
Muy bien. Así que volviendo un poco a la masterclass mientras eso se ejecuta. Tenemos nuestra aplicación. Tenemos nuestra aplicación NestJS en funcionamiento. Sí. Así que probemos eso. Sí, creo que está bien. Más o menos. Muy bien. Así que creó mi aplicación en una nueva carpeta. Oh, mi terminal. No sé qué le pasó a mi terminal. Creo que cada vez que intentaba incrementar el tamaño de la fuente. Incrementaba el tamaño de mi ventana. Es enorme. Muy bien. Así que aquí estamos. Así que ahora estamos en el proyecto. Y sí, podemos ver todos los archivos típicos. Crea la carpeta .kit. Crea el github. Hace todo esto automáticamente por nosotros. A NestJS le encanta su magia. Así que intenta hacer todo lo más mágico posible. Así que abramos VS Code. Porque a todo el mundo le encanta. Y abramos un terminal en VS Code. Así que tenemos todo a mano. Y si ahora hacemos npm render. Renderizará los datos, tienes tu NestJS en funcionamiento. Así que debería estar funcionando en localhost 3000. Y verás esta bonita página de Vercel. Con una plantilla por defecto. Es hora de meter nuestras manos en algunas configuraciones.
17. Creando una Aplicación Auth0
Short description:
Continuemos para crear una aplicación Auth0. Crearemos una nueva aplicación llamada 'my awesome login' para nuestra aplicación Next JS. Seleccionaremos las aplicaciones web como el tipo de aplicación. Este es el HTML, CSS y JavaScript tradicional que se ejecuta en el navegador con código del lado del servidor. Haga clic en crear para crear la aplicación.
Y luego agregando un poco más de código. Muy bien. Volvamos al tutorial. Regresemos al archivo de la masterclass aquí. Y luego continuemos para crear una aplicación Auth0. Así que vamos a volver ahora al panel de Auth0. Podemos usar este enlace o podemos usar la ventana que ya tenemos abierta.
Y una cosa que es importante entender con Auth0. Es que cuando creamos nuestra cuenta. Creamos un inquilino. Y un inquilino tendrá múltiples aplicaciones, ¿verdad? Así que dijimos que normalmente el inquilino se reflejará en. Tu entorno de desarrollo. Y tendrás como organización. O grupo de aplicaciones. Eso depende completamente de ti. Normalmente, me gusta usarlo como una organización. Similar a las organizaciones de GitHub. Y luego dentro de eso tendré varias aplicaciones. Que pertenecen juntas.
Y las aplicaciones, si vas a aplicaciones. Menú. Aplicaciones. Dentro de Auth0. Hay una aplicación que se crea por defecto. Para nosotros. Y esta es una aplicación importante. Y no es una que debamos usar. Así que vamos a crear una nueva. Para los propósitos de esta aplicación Next JS. Voy a hacer clic. Aquí en crear aplicación. En la parte superior. Botón del lado derecho. Y necesito darle un nombre. Y creo que lo llamamos my awesome login. El nombre no necesita ser el mismo. Así que podemos llamarlo como queramos. Pero voy a. Mantenerlo. Con el mismo nombre que el proyecto. Oh my awesome login creo. Voy a mantenerlo con un nombre similar. Así que puedo relacionar mis aplicaciones Auth0. Con mi base de código. Y no hay confusión en el futuro. En el futuro al respecto. Y luego veo que me está preguntando OK. ¿Qué tipo de aplicación vas a crear? Luego tenemos aplicaciones nativas. Como por ejemplo podría ser una aplicación react native. Podría ser un escritorio. Así que cualquier aplicación móvil o de escritorio. Así que somos nativos por ejemplo. Una aplicación de página única web apps. Como si estás usando remix o simplemente creas una aplicación react. Así que eso ya no existe. Pero como cualquier SPA con react sería esta opción. Y luego tenemos aplicaciones web regulares. Que son las tradicionales HTMLCSS más JavaScript que se ejecutan en el navegador. Más algo de código del lado del servidor. Y eso es más o menos lo que es Next JS. Así que vamos a seleccionar aplicaciones web para nosotros. Y luego tienes aplicaciones de máquina a máquina. Y esto es por ejemplo si estás ejecutando microservices. Necesitas dos servicios hablando entre sí. O si estás ejecutando una aplicación de terminal. Y quieres que tu aplicación de terminal inicie sesión en tu API. Entonces usarías aplicaciones de máquina a máquina. En nuestro caso, aplicaciones web regulares para cualquier aplicación Next JS. Vamos a hacer clic en crear. OK, así que cuando creas una aplicación.
18. Integración de Auth0 y Configuración de la Aplicación
Short description:
Auth0 proporciona una guía de inicio rápido para integrarse con diferentes tecnologías. Puedes descargar código de muestra o usar tu propia aplicación. En la pestaña de configuración, puedes personalizar el nombre de la aplicación, el dominio de Auth0, el ID del cliente y el secreto del cliente. Configura las URL de devolución de llamada permitidas y las URL de cierre de sesión, incluyendo la devolución de llamada de la API de localhost. El SDK de Auth0 registrará automáticamente las APIs necesarias para manejar las devoluciones de llamada en la carpeta OAuth.
Auth0 te preguntará OK, ¿qué tecnología vas a usar? Y puedes decir aquí. O puedes mirar tus tecnologías comunes aquí. O también puedes buscar, por ejemplo, Next. Y tengo la opción aquí. Y puedo hacer clic en eso. Y automáticamente me sugerirá una guía. Sobre cómo integrar Auth0 para esa tecnología en particular. Puedes descargar un código de muestra. O puedes hacerlo en tu propia aplicación. Eso depende de ti. Así que vamos a repasar rápidamente los pasos. Pero vamos a seguir la masterclass. Porque me gusta más. Yo la escribí. Estoy más familiarizado con ella. Bien, eso es un inicio rápido. Cuando creas una aplicación. Pero hay varias pestañas. La segunda pestaña corresponde a la configuración. Y aquí es donde necesitamos personalizar algunas cosas. Cuando entramos en la configuración. Vamos a aprender algunas cosas sobre nuestra aplicación. Como cuál es el nombre de la aplicación. ¿Cuál es el dominio de Auth0? ¿Cuál es el ID del cliente para tu aplicación? Esto va a ser único para cada aplicación. Y también un secreto del cliente. Y vamos a necesitar estas tres piezas de información. Las vamos a necesitar en nuestra aplicación. Para conectar Auth0 con tu NetJS. Y también vamos a necesitar, si nos desplazamos hacia abajo. Quiero decir, hay cosas como el logotipo que puedes personalizar. También puedes cambiar siempre tu tipo de aplicación. Si eso es lo que decides hacer. Pero bajo esta sección. URIs de la aplicación. Necesitamos configurar dos cosas. Que son las URL de devolución de llamada permitidas. Y las URL de cierre de sesión permitidas. Estas son las URL desde las cuales Auth0. Aceptarán solicitudes. Así que en nuestro caso estamos alojando nuestra aplicación en localhost. Así que eso es lo que vamos a configurar. Y nuestra URL de devolución de llamada se verá algo así. Y vamos a tener al usuario. Se verá algo así. Voy a pegarlo aquí en la ventana. Lo voy a hacer más grande para que sea más fácil de ver. Pero es básicamente localhost puerto. Slash API. Slash Auth. Slash callback. Esto es algo que decidimos o que nos gusta hacer. Vamos a necesitar una API para manejar las devoluciones de llamada. Así que la ponemos en la carpeta API para NetJS. Esto es algo así como un requisito de NetJS. Si quieres decirlo así. Pero si quieres decir rutas. Eso sería totalmente diferente. Y luego decidimos agrupar todas las APIs de Auth0 que necesitamos. Dentro de la carpeta OAuth. Y en particular estamos interesados en una devolución de llamada. Y vamos a necesitar varias de estas APIs. Para Auth0. El SDK de Auth0 las registrará automáticamente para nosotros. Así que no necesitamos construir todas ellas. Como fue en el caso de la opción de aplicación manual. Lo vimos en la presentación al principio. Puedes añadir múltiples valores aquí. Como puedes separar por comas. Y esto es algo que normalmente recomiendo. Que añadas tu localhost.
19. Conexión a Auth0 y Configuración de la Sesión
Short description:
Para conectarte a Auth0, añade tu 127.0.0.1 y localhost a las URL de devolución de llamada y a las URL de cierre de sesión permitidas. Guarda los cambios y utiliza localhost para conectarte a Auth0. A continuación, copia el dominio, el ID del cliente y el secreto del cliente en el archivo .env de tu aplicación. Genera una sesión en Next.js ejecutando un comando de node para crear una clave secreta para firmar las cookies.
Y también añades tu 127.0.0.1. De esta manera, no importa cómo ingreses a tu aplicación en tu navegador. Ambas formas funcionarán. Sólo para desarrollo. En el caso de producción tendrás tu product.com.
Así que eso es lo que va dentro de las URL de devolución de llamada.
Y también necesitamos añadir las URL de cierre de sesión permitidas. Que es muy similar. Esto le dice a Auth0 de qué URL se te permite cerrar sesión. En nuestro caso localhost 3000. No hay necesidad de APIs o algo así. Y también vamos a usar el 127.0.0.1. No hay necesidad de añadir ambos. Como dije, me gusta añadir ambos. Sólo porque a veces escribo localhost. A veces escribo 127. Y entonces empiezas a recibir rechazos de Auth0. Porque estás usando uno u otro. Normalmente registro ambos y entonces estoy seguro. Bien. Y sí. Así que con eso estamos bien. Ahora puedes desplazarte hasta el final de la página. Hay muchas otras cosas que puedes personalizar aquí. Con Auth0. Pero por ahora vamos a desplazarnos hasta el final. Hasta que el botón de guardar cambios esté aquí. Vamos a guardar los cambios. Y ahora podemos usar nuestro localhost para conectarnos a Auth0. Eso es fantástico.
En el lado de Auth0 estamos bastante bien. Hay una cosa que necesitamos hacer ahora. Que es nuestra aplicación necesita estar consciente. De Auth0. Correcto. Necesita saber dónde iniciar sesión. ¿Dónde está esa pantalla de inicio de sesión universal? Y necesita ser capaz de descifrar la sesión. Que Auth0 va a crear para nosotros. Correcto. Y para hacer todo eso vamos a necesitar copiar todos estos data de aquí. Dominio, ID del cliente y secreto del cliente. En nuestra aplicación. Así que vamos a crear un archivo .env. Ahora, si vas a la página de la masterclass. Proporcionamos un formulario para generar el archivo .env para ti. Es bastante fácil. Así que si no quieres usar el formulario. Puedes hacerlo directamente en tu editor de código. Voy a usar el formulario por ahora. Voy a copiar mi dominio. Y lo voy a pegar aquí donde dice dominio de Auth0. Voy a copiar el ID del cliente. Y lo pegaré aquí donde dice ID del cliente. Y luego voy a desplazarme un poco más abajo. Y me pide que ejecute este comando de node. Esto es porque vamos a crear una sesión en Next.js. Y para que Next.js cree una sesión. Requiere una clave secreta. Esto es algo sólo para nuestra aplicación. No es para Auth0. Es sólo para nuestra aplicación para firmar las cookies. Una buena manera de crear este código. Es ejecutar este comando. Que está aquí en tu terminal. Voy a volver a Visual Studio. En realidad lo voy a hacer en mi terminal porque. Lo tengo aquí abierto. Y simplemente genera esta cadena aleatoria. Copias eso.
20. Configuración de Auth0 e Instalación del SDK
Short description:
Y luego lo pegas allí. Clave Secreta de Auth0 Next.js. Esto es lo que vamos a usar para firmar la cookie. Ahora necesitamos crear un archivo .env.local. Necesitas ingresar tu Secreto de Auth0. Tu secreto es el valor más importante en tu aplicación de Auth0. No lo pusimos en este formulario. Vas a tu web de Auth0, donde dice información básica. Vas a tu secreto del cliente. Copias. Y cuando no estás compartiendo tu pantalla, pegas. Ahora todos cierren los ojos. Y sí. Así que guardé eso y ahora cierro el archivo y nadie necesita ver eso de nuevo. Pero ahora ya tenemos nuestra configuración de Auth0 en nuestro archivo .env.local. Lo que sigue es instalar el SDK de Auth0. Proporcionamos SDK para la mayoría de los principales frameworks. Tenemos SDKs para Vue, React, Angular, Next, JavaScript puro, Python, .NET, y Java.
Y luego lo pegas allí. Lo que dice aquí. Auth0 Next.js Clave Secreta. Y esto es lo que vamos a usar para firmar la cookie. De nuevo, es solo para tu aplicación Next.js.
Muy bien, y ahora necesitamos crear un archivo .env.local. Y, sí, vamos a hacer eso directamente aquí en Visual Studio. Allá vamos. Y vamos a copiar. Todos estos valores. Y los vamos a pegar aquí. Muy bien, así es como se ve el archivo .env. Como dije, puedes construir esto tú mismo. No necesitas usar el formulario en la masterclass. Pero básicamente necesitas ingresar tu Secreto de Auth0. Esto es lo que generamos con un comando Node. También puedes reemplazar esto con la la la si quieres. No siempre. Cuando estoy en producción uso algo como esto. Cuando estoy en casa simplemente invento algo yo mismo. Necesito ser rápido si no recuerdo el comando. También configura... Sí, necesitas añadirlo al Git Input. Sí. Creo que normalmente esto se hace. Sí, así que normalmente esto se hace cuando lo llamas .local. En tu aplicación Git. Pero si no estás usando, como, la pestaña crear Next, tienes que hacerlo manualmente. Así que configuras tu URL base de Auth0. Que es lo que usas para ejecutar tu aplicación, localhost, tu propio dominio. Tu información del inquilino de Auth0, el dominio, el ID del cliente, y también hay un secreto del cliente de Auth0. Y esto es algo que no añadimos en ese formulario. Como si miras este formulario, nunca introducimos este secreto. Y esto es porque tu secreto es el valor más importante en tu aplicación de Auth0. Si alguien obtiene acceso a tu secreto, pueden obtener acceso a... Pueden obtener acceso a... Pueden obtener tu mismo acceso a la aplicación como tú tienes. Así que podrán crear usuarios para crear una aplicación suplantándote. Así que eso no es algo que quieras dar. Y por eso no lo pusimos en este formulario. Porque aunque este formulario, solo funciona localmente. No envía la información a ninguna parte. No queremos que... te dé la sensación de que deberías estar copiando y pegando esto en cualquier sitio web. Así que no hacemos eso. Vas a tu web de Auth0, donde dice información básica. Vas a tu secreto del cliente. Copias. Y cuando no estás compartiendo tu pantalla, pegas. Ahora todos cierren los ojos. Y sí. Así que guardé eso y ahora cierro el archivo y nadie necesita ver eso de nuevo. Si alguien copió, fueron lo suficientemente rápidos. Quizás puedas acceder hasta el final de la masterclass. Y borro ese secreto. Pero ahora ya tenemos nuestra configuración de Auth0 en nuestro archivo .env.local.
Lo que sigue es instalar el SDK de Auth0. Así que una de las cosas agradables de Auth0 es que proporcionamos SDK para la mayoría de los principales frameworks. Y si estás trabajando con JavaScript, tenemos SDKs para Vue. Tenemos SDKs para React. Tenemos SDKs para Angular. Tenemos SDKs para Next. Así que ahora creo que estamos trabajando en un SDK para Svelte. Luego tenemos SDKs para JavaScript puro. Así que si no soportamos tu framework, también puedes usar el JavaScript puro. Y eso funcionará en la mayoría de los escenarios también. Y si no trabajamos con JavaScript, podemos proporcionar frameworks para Python. Creo que hay .NET. Hay Java. Así que hay muchos otros frameworks para los que proporcionamos soporte directo.
21. Instalación del SDK de Auth0 y Configuración de Endpoint
Short description:
Incluso si estás en móvil, hay frameworks para React Native, Android, Native Android, Native iOS y Flutter. Con Auth0, tienes muchas opciones para elegir a medida que tu aplicación escala. Instalamos el SDK de Auth0 y especificamos las rutas para los endpoints de autenticación. La función handle automáticamente registra los endpoints de inicio de sesión, cierre de sesión y callback. Acceder al endpoint de la API /auth/login redirige a la cuenta de Auth0 para autorización. Crear rutas individuales para inicio de sesión, registro, etc., puede causar problemas con el enrutamiento dinámico de Next.js. Se recomienda ponerlos dentro de una carpeta, como /login, y apuntar a la llamada de la API. Esta configuración simplifica la configuración del SDK y permite la definición centralizada del método Auth0.
Incluso si estás en móvil, hay frameworks para React Native. Por ejemplo, para Android. Android Nativo, iOS Nativo, Flutter. Así que no importa lo que estés construyendo, vas a tener un SDK de Auth0 que va a funcionar para ti. Así que si empiezas como una aplicación web, luego necesitas una aplicación móvil, y estás usando Auth0, no hay problema con eso. Con algunos otros proveedores, estás restringido a quizás un framework como React o algo así. En este caso, tienes muchas opciones para elegir a medida que tu aplicación escala. Y debería haber dicho todo eso mientras instalaba mi paquete. Pero sí, las cosas suceden en la vida real. Así que voy a hacer eso ahora. Voy a instalar NPM install. La aplicación se llama Auth0. Así que puedes copiar eso de la masterclass. Sí, mira eso. Eso fue muy rápido. Bien, así que ahora tenemos nuestro SDK de Next.js instalado. Y podemos empezar a trabajar en el código. Así que recuerda que cuando entramos en la configuración, especificamos en nuestra aplicación una API. Y esta API registra un callback. Vamos a tener más de uno. Y ahora Auth0 necesita saber dónde van a estar estas rutas. Porque va a crear todos estos endpoints automáticamente para nosotros. Solo necesitamos decirle dónde van a estar estos endpoints. Y para hacer eso, creamos este comando. Tenemos este comando corto que voy a ejecutar muy rápidamente y voy a explicar lo que está haciendo. Básicamente creando una estructura de carpetas dentro de mi directorio de la aplicación. Aquí es donde todo el código de la aplicación se aloja en una aplicación de Next.js. Tenemos la carpeta API. Y debajo de eso, tenemos una carpeta Auth. Esto es solo lo que decidí llamarlo. Puedes llamar a esto como quieras. Pero como todos los endpoints de authentication van a estar en esta carpeta, simplemente lo llamo Auth. Fácil de entender. Y luego llamamos a este endpoint o esta carpeta aquí que tiene un nombre particular, ¿verdad? Tiene este nombre entre corchetes. Y dice Auth0. Esta es una ruta dinámica dentro de Next.js. Y esta ruta es básicamente un fallback. Me permite capturar todo lo que sucede en slash API, slash Auth, slash. Va a caer bajo este archivo route.ts, sin importar cuál sea su nombre. Así que podría ser callback, podría ser login, podría ser signup, todo va a caer en este route.ts y va a ejecutar el mismo código sin importar cuál sea ese endpoint. Y esto es particularmente importante. Porque en un solo lugar, podemos definir todos los métodos de Auth0 que queremos. Entonces, ¿cuál es el código que pertenece allí? Es simplemente este código que tenemos aquí, que es en realidad una importación y una línea de código exportando este handle de... Voy a copiar eso y lo voy a pegar aquí. Así que espero que esto sea lo suficientemente grande para que todos lo vean. Pero tenemos, de nuevo, dos líneas de código y simplemente una línea de código exportando esta función handle de que importamos del SDK de Auth0. Y este handle de va a registrar automáticamente nuestro endpoint de inicio de sesión, nuestro endpoint de cierre de sesión y nuestro endpoint de callback. Y veremos por qué eso es importante. Así que ahora con eso hecho, sí. Entonces, si pasas por el tutorial de la masterclass o el tutorial de la masterclass, verás que esto va a hacer automáticamente para nosotros el inicio de sesión, el callback, que después de iniciar sesión, va al callback para estar en la sesión local o la sesión local de next, el endpoint de cierre de sesión, y también slash auth slash me para obtener información sobre el usuario. Bien. Entonces, lo que podemos hacer ahora es que podemos hacer npm rundev de nuevo para lanzar nuestro servidor de nuevo. Si ya no lo estás ejecutando, y vamos a volver a nuestro navegador y vamos a refrescar en esa pantalla y todo se verá igual. Pero si en mi URL, ahora escribo slash API slash auth slash login, ¿verdad? Y presiono enter. Voy a pegar esa URL también aquí en el chat. Si ahora presiono enter allí, este endpoint de la API me redirigirá directamente a mi cuenta de Auth0. Que en este caso sucedió que ya estaba conectado. Así que automáticamente me pregunta, ¿estás autorizando esta aplicación? ¿Verdad? A tu cuenta con mi correo electrónico, este es el nombre de mi aplicación. ¿Verdad? Y esta cuenta solicitará acceso a tu perfil. Así significa que va a obtener acceso a tu perfil y a tu información de correo electrónico. Puedes hacer la ruta localhost 3000 slash login. Aunque va a te va a dar problemas con Next.js mapeando esa ruta dinámica. Así que tendrás que crear rutas individuales para slash login slash sign up slash blah y luego copiar el mismo código en todos estos lugares. Pero va a Recomendaría al menos ponerlo dentro de una carpeta. Siempre puedes siempre puedes tener un slash login y luego apuntar nuestra dirección a la llamada de la API. Y creo que esa sería la forma más fácil de hacer eso. Oh, sí. Sí. Así que técnicamente puedes hacer 3000 slash login, pero con Next.js puede convertirse en un poco doloroso. Si quieres configurar el SDK y todas las llamadas allí, mi sugerencia sería tener al menos la carpeta API y luego sí, es Next.js.
22. Rutas Dinámicas y Autenticación OAuth
Short description:
Las rutas dinámicas en Next.js pueden generar dependencias complejas, por lo que no se recomienda. El proceso tradicional de autenticación OAuth implica aceptar el formulario de consentimiento y ser redirigido de vuelta a la URL de callback. El callback establece cookies con información de sesión. Hay opciones de personalización disponibles para el comportamiento del callback. Para indicar el estado de inicio de sesión del usuario, es necesario modificar la plantilla HTML. Next.js introdujo el enrutador de la aplicación para componentes del servidor y del cliente. Se utilizan proveedores y contexto en el lado del cliente para acceder a la información de sesión. Se importa el proveedor de usuario del SDK y se agrega a la aplicación.
Así es como funcionan las rutas dinámicas, ¿verdad? Si manejas las rutas dinámicas, comienzas a tener muchas dependencias en las que debes pensar. Por eso no lo recomiendo. Pero al menos tener una carpeta y luego la ruta /api/... que proviene en realidad de una versión anterior de Next.js donde la carpeta API era un requisito, ahora ya no es un requisito. Así que tienes un poco más de flexibilidad, pero antes de Next.js 14, solía ser un requisito, o antes de Next.js 13.4, solía ser un requisito para este tipo de escenario. Así que ahora, con la versión más nueva, eso ya no es necesario, pero aún así no lo recomiendo. Muy bien. Esto es la autenticación OAuth tradicional o el formulario de consentimiento donde puedes denegar o aceptar. En mi caso, voy a aceptar. Y cuando acepto, Auth0 me redirige de vuelta a mi URL de callback. Mi callback procesa automáticamente toda esa información del inicio de sesión y estoy conectado. Y me redirige de vuelta a mi página de inicio. Ahora no veo nada porque el callback me redirige automáticamente, así que realmente no veo nada. Lo que puedo hacer es ir a cerrar sesión. Muy bien, acabo de cerrar sesión y puedo abrir mi pestaña de red y conservar los registros. Vemos todo lo que está sucediendo y voy a volver a iniciar sesión. Muy bien, así que estamos en Auth0. Voy a borrar esto de nuevo. Y voy a iniciar sesión usando mi clave. Por ejemplo, inicio sesión y no hay ningún valor clave aparte del inicio de sesión. Así que vemos el formulario porque ahora inicié sesión con test2 en lugar de test3. Esto solo sucede la primera vez y puedes ocultar este formulario para que no aparezca en absoluto en caso de construir tu propia aplicación. Permíteme volver al inicio de sesión. Ahora, si miro en el callback, tal vez sea difícil de ver. Así que ahora, en la pestaña de red, puedes ver la llamada de callback aquí que pasa los datos de sesión y luego el callback realizará automáticamente todas las validaciones y creará una sesión local. Si observas la carpeta de cookies aquí, el callback está estableciendo dos cookies. Así que está creando la cookie de verificación y está agregando esta cookie de sesión de la aplicación. Y esta cookie de sesión de la aplicación contendrá información sobre la sesión. Lo veremos en un minuto. Pero este es el callback. Después de que el callback procesa la información, automáticamente me redirige a la pantalla de inicio o puedes, por ejemplo, cuando llamas a tu punto final de inicio de sesión, puedes decir return to y luego pasar la URL a la que quieres que los usuarios sean redirigidos después de iniciar sesión. Si escribo profile, ahora ya estaba conectado, así que todo sucede automáticamente. Me redirige al perfil y el callback se encargará de eso. Hay formas de personalizar eso y puedes pasar un objeto aquí y puedes anular el comportamiento del callback con propiedades. Está documentado en la página de GitHub para el SDK de Next.js. Por defecto, obtienes toda la información directamente en la página. Muy bien. Ya estamos conectados, pero no hay nada en la aplicación que nos indique que estamos conectados porque nunca cambié la plantilla HTML. Así que voy a hacer eso ahora. Si vuelvo a la masterclass, nos guiará a través del proceso de cambiar las plantillas. Ahora, como muchos de ustedes no están familiarizados con Next.js, a partir de la versión 13.4, Next.js introdujo lo que se llama el enrutador de la aplicación. Está utilizando componentes del servidor y componentes del cliente y vamos a aprender sobre cada una de estas cosas. Comenzaremos con el lado del cliente. En el lado del cliente, utilizaremos proveedores y contexto. Así que puedes seguir el enlace aquí en el tutorial. Permíteme copiar el enlace del tutorial aquí. Eso contiene toda la información que necesitas para poder usar Next.js y las instrucciones y todo eso. Voy a subir eso a GitHub y lo compartiré con todos ustedes después de la masterclass. A veces tomamos diferentes caminos dependiendo de las preguntas y todo eso. Así que puedes ir al código del SDK de Next.js. Tienes este enlace a GitHub para el SDK. Muy bien. Continuando, estábamos aquí. Así que vamos a agregarlos y podemos usarlo en toda la aplicación siempre que estemos utilizando componentes del cliente. Esto no es un requisito previo. Pero si estás renderizando un componente del cliente, entonces podemos acceder a esa información a través del proveedor. Puedes copiar y pegar todo este código, pero realmente lo único que cambiamos es que estamos importando el proveedor de usuario del SDK fuera de Next.js. Y luego necesitas agregar este proveedor de usuario y podemos usar esto como un proveedor de usuario. Así que vamos a agregar esto como un proveedor de usuario y podemos consumir esta información de usuario en otras áreas o en otras páginas de la aplicación.
23. Página de Usuario y Conexiones de Base de Datos
Short description:
Agregamos una página de usuario y mostramos la información del perfil del usuario. Al cerrar sesión e iniciar sesión nuevamente, el usuario es redirigido automáticamente a la aplicación. Para implementar las llamadas a la API, instala el SDK de Next y utiliza el gancho useUser. Hasta ahora no hay preguntas. Okta no utiliza los datos del usuario con fines de venta. Cobran por exceder el plan gratuito o utilizar funciones avanzadas. Okta proporciona conexiones de base de datos y admite el uso de bases de datos personalizadas o MongoDB. Los usuarios tienen control total sobre la base de datos.
Y vamos a utilizar eso a continuación. Así que voy a continuar aquí y voy a pegar esto. Entonces voy a copiar esta plantilla que tenemos aquí y la voy a pegar aquí en el navegador y vamos a revisar el código y tratar de entender lo que hicimos. Así que lo primero que cambiamos, además del diseño, es que agregamos esta página de usuario.
Entonces la página de usuario se carga, pero la página se carga por primera vez y se carga la sesión. Así que puedes usar eso para mostrar tu típico iniciador de pantalla o cosas así. Así que obtenemos la información del usuario y luego el usuario puede ser del tipo perfil de usuario o indefinido. Si es un perfil de usuario final, podemos usar la información del usuario y podemos mostrar el perfil del usuario y podemos mostrar el perfil del usuario. Así que si el perfil de usuario es indefinido, podemos mostrar el perfil del usuario y si el perfil de usuario está definido, podemos mostrar el perfil del usuario. Así que cuando obtenemos el perfil de usuario, mostramos el perfil del usuario. Así que puedo ir a mi aplicación y actualizar. Ya estamos conectados. Así que veo mi botón de cierre de sesión y veo `Hola` y mi correo electrónico. Nunca ingresé un nombre y ahora mi nombre se establece automáticamente como mi correo electrónico y mi correo electrónico se establece automáticamente como mi correo electrónico. Si estás utilizando un proveedor social, mostrará la imagen del proveedor social y si no utilizas un proveedor social, utilizará un avatar. En mi caso, este correo electrónico lo acabo de inventar, así que no existe. Acabo de poner mi segundo nombre. Así que tomo mi correo electrónico y algo así. Puedes cambiar todo eso. También, cuando creas una página de perfil de usuario. Así que ahora, si cierro sesión, puedo hacer clic en el botón de cierre de sesión y hacer que la aplicación se actualice y puedo cerrar sesión. Y luego puedo cerrar sesión. Así que puedo iniciar sesión y cuando hago clic en iniciar sesión, ahora, como ya acepté el flujo para este usuario, no me lo pregunta y me redirige automáticamente a la aplicación donde ya estoy conectado. Así que puedo copiar estos tres valores que mencionamos. Dominio. Secreto del cliente. Además de eso, necesitas instalar el SDK de Next que funcione para tu framework. Y luego simplemente necesitas implementar estas llamadas a la API en el código. Y cuando necesitamos trabajar en nuestra interfaz de usuario, necesitamos invertir más en código utilizando el gancho useUser y también utilizando condicionales del usuario para renderizar las diferentes partes de la pantalla. Eso es todo. No tengo ninguna pregunta hasta ahora. Como en la integración, cómo ha sido hasta ahora. Creo que es bastante sencillo. Esto es lo que normalmente cubro en la masterclass. Podemos responder algunas preguntas. Y también puedo agregar más cosas a esto. Como capturar la experiencia del usuario en la web. Tengo una pregunta aquí que es ¿Okta utiliza nuestros datos de usuario para vender? La respuesta es no. No estamos en el negocio de vender tus datos. Te cobraremos si excedes el plan gratuito o si utilizas una de nuestras funciones avanzadas. Puedes ver el enlace al sitio web. Así que te mostraré algunos de los datos. Así que vamos a ver. Así que tenemos una cosa que tenemos. Así que tenemos una conexión de base de datos. Así que la conexión de base de datos es una conexión de base de datos. Así que tenemos una conexión de base de datos que estamos utilizando. Por ejemplo, tengo usuarios, lo que significa que están guardados en la base de datos. Y también tengo usuarios que han iniciado sesión utilizando proveedores sociales como, por ejemplo, puedes hacer clic en base de datos personalizada. Esta no es una opción gratuita. Pero si quieres, puedes decir usa mi propia base de datos. Y cuando habilitas esto, cuando no estás utilizando datos, puedes hacer clic en base de datos personalizada. Y déjame crear una nueva base de datos. Voy a crear personalizada y voy a hacer clic en crear. Puedes tener tantas bases de datos como quieras. Y puedes asignarlas a tu base de datos. Y puedes asignarlas a tu base de datos. Y la otra opción es usar MongoDB. Y puedes usar MongoDB. Puedes instalar MongoDB. Esta es una forma muy sencilla de instalar MongoDB. Así que comenzaremos a utilizar esta base de datos MongoDB en lugar de la antigua base de datos. Tienes control total.
24. Opciones de Personalización e Implementación
Short description:
Puedes personalizarlo completamente según tus habilidades. En el plan gratuito, puedes cambiar el logo, el color principal y el color de fondo. Hay opciones de personalización avanzadas que te permiten personalizar cada botón, fuente, borde, posición de widgets y más. También puedes implementar la autenticación sin contraseña utilizando el proyecto SimpleWebAuthN. Es un proyecto fácil de implementar y proporciona autenticación web. Sin embargo, si deseas una solución que incluya conexiones sociales, se recomienda utilizar una solución preconstruida como Auth0. Auth0 ofrece un plan gratuito y conexiones empresariales para escalar. Admite OAuth2 y puede conectarse con cualquier proveedor de OAuth2. Se admiten conexiones sociales, lo que permite a los usuarios iniciar sesión con sus cuentas sociales preferidas.
Eso es bastante bueno. Otra opción, si algún día decides dejar el antiguo Sera, puedes llevar la contigo. Puedes importar la a cualquier otro servicio que elijas. No estás bloqueado con este proveedor en particular. Puedes llevar tus data contigo. Algo que no puedes hacer con algunos de los otros proveedores. Creo que eso es muy importante. No utilizamos tus data para nada. No utilizamos tus data para nada. Siempre tienes control total. Muy importante pregunta. Gracias. ¿Alguna otra pregunta relacionada con el antiguo Sera?
Mientras tanto, otra pregunta muy importante que me hacen es ¿hasta qué punto podemos personalizar? La respuesta es que puedes personalizarlo completamente. Puedes personalizarlo completamente. Puedes personalizarlo al máximo de tus habilidades. Puedes personalizarlo al máximo de tus habilidades. Puedes personalizarlo completamente. En el plan gratuito, puedes acceder a la personalización de marca, inicio de sesión universal, y puedes elegir cambiar el logo, el color principal y el color de fondo. También tienes opciones de personalización avanzadas. Esto te permite personalizar cada botón con colores, diferentes colores. Puedes cambiar las fuentes, los bordes, el propio widget, la posición a la izquierda, el logo a la izquierda, a la derecha, donde quieras los botones sociales, si los quieres en la parte superior o inferior. Puedes cambiar el color del logo. Puedes cambiar la fuente. Puedes cambiar el color, la fuente, el texto, los marcadores, las fuentes y el widget, y el texto. Hay un plan gratuito, y si deseas escribir tu propio HTML, puedes insertar el widget, que es el pequeño rectángulo, pero aparte de eso, tienes control total. Ese es el máximo nivel de personalización que tienes.
Otra pregunta que tenemos aquí es si podemos implementar las claves de tareas en un ejecutable o en una API. La respuesta es sí, puedes hacerlo. Si deseas hacerlo por tu cuenta, puedes utilizar este proyecto. Creo que se llamaba SimpleWebAuthN.dev. En una aplicación de Next.js, o en cualquier aplicación JavaScript, tienen ejemplos de cómo puedes hacerlo en el navegador y en el servidor para hacerlo tú mismo. Una de las cosas que mencioné al principio, este es un gran proyecto, es genial, funciona, es genial. Es un gran proyecto. Es un proyecto fácil. Es un proyecto fácil. Puedes hacerlo en la web, es un proyecto fácil. Si quieres hacer eso, este es un proyecto fácil. Si tienes suficiente experiencia para implementarlo, esta es una buena opción. Esto te proporcionará solo autenticación web. Luego debes pensar, tal vez no todos mis usuarios lo usarán. Tal vez usarán conexiones sociales. Entonces tendrás una solución lista para usar. Lo obtienes, lo olvidas y sigues construyendo tus características. Viene con un precio. Hay un plan gratuito y es generoso. A medida que creces, tendrá un costo. Siempre debes equilibrar el costo de implementarlo tú mismo. No es la única solución en el mercado. Pero es una de las características más completas. Te recomiendo que lo pruebes. Puedes integrarlo y verás el valor agregado. Hablamos del precio. También tenemos conexiones empresariales, digamos, escalado. Este es un caso de uso típico. Construyes tu herramienta de IA. Al principio, tienes usuarios que se registrarán por su cuenta y comenzarán a usar tu aplicación. Tu aplicación está funcionando de manera fantástica. No quiero que todos los usuarios se registren, pero quiero registrarme como plan de organización y dar acceso a mis usuarios. Y en eso entra en juego nuestra conexión empresarial, donde puedes tener Google Workspace. Entonces puedes conectarte a cualquier proveedor y tenemos la opción de usar OAuth2. Lo admitimos. Sí, así que nos usamos OAuth2. Eso pertenecerá a los proveedores sociales, ¿verdad? Todo cero por uno. Y como puedes ver, es básicamente el mismo protocolo. Pero a medida que implementa el protocolo, puede conectarse con cualquier proveedor de OAuth2. Si me preguntas, no los conozco de memoria, pero hay muchos que funcionarán con diferentes tipos de configuraciones. Pero si estás utilizando conexiones sociales, admitimos todos los proveedores de OAuth2. Te conectarás a ellos y comenzarás a iniciar sesión con el cliente. Además, como estaba diciendo, tienes el servicio empresarial para el cliente.
25. Centro de Desarrolladores y Redes Sociales
Short description:
Ofrecemos opciones para ayudarte a escalar sin tener que implementar cada una por ti mismo. El código sigue siendo el mismo, solo cambia la configuración. Ofrecemos otros flujos de autenticación sin contraseña, pero recomendamos utilizarlos para una experiencia segura. En nuestro centro de desarrolladores, puedes encontrar guías para diferentes frameworks y características. Tenemos ejemplos para autorización detallada y control de acceso basado en roles. Puedes elegir tu framework backend y obtener un tutorial sobre cómo construirlo. No dudes en contactarme en las redes sociales si tienes alguna pregunta o comentario.
Tú puedes conectarte a ese cliente. Así que proporcionamos estas opciones que te ayudarán a escalar sin tener que implementar cada una por ti mismo. Cuando sucede algo, puedes llamarnos. Nosotros lo activamos por ti. El código que tienes será prácticamente el mismo. Lo único que cambiará es la configuración. Es bastante poderoso a medida que creces en diferentes opciones. Te permitirá adaptarte a diferentes escenarios.
Si estás creciendo, tendrás estos requisitos. Es natural. Vemos eso mucho. También ofrecemos otros flujos de autenticación sin contraseña. Ya no los recomendamos mucho. Ahora recomendamos que los uses como una forma de tener una experiencia segura. ¿Hay alguna otra pregunta? Puedo seguir hablando de esto todo el día. Tenemos muchas características. ¿Hay alguna otra pregunta sobre código? Si tienes un framework en particular, como el SDK, el código está integrado. Puedes usarlo como un framework. Tenemos un centro de desarrolladores. Hay mucha información para desarrolladores en general. Una de las sesiones que me gusta aquí es la de aplicaciones web regulares. Si haces clic en una de ellas, tienes los diferentes frameworks. Si hago clic en aplicaciones de una sola página, tenemos aplicaciones independientes. Por ejemplo, Angular, React, JavaScript. No estoy muy familiarizado con Angular, pero hay diferentes opciones. Para React, tenemos múltiples opciones. Tenemos React sin usar el enrutador de React. Tenemos sobre cómo implementar aplicaciones React en Vercel. Vue.js. Hay diferentes cosas. Si haces clic en alguna de ellas, obtendrás una guía completa sobre cómo configurarlo todo. Muy similar a cómo lo estamos haciendo en Angular. Si haces clic en las otras características, tienes una lista de características. Puedes agregar una lista de características. Puedes agregar lo que quieras. Puedes agregar una lista de características a Vercel. Esto significa iniciar y cerrar sesión. O controlar dónde vas a definir roles en tu aplicación y tenemos acceso a diferentes cosas. Tenemos ejemplos que estamos construyendo con autorización detallada. Esto vendrá pronto. Es una versión completa. Puedes tener carpetas, por ejemplo. Y compartir el archivo o la carpeta. Si compartes la carpeta, puedes tener carpetas o ser tan creativo como quieras. Por ahora, tenemos estas dos opciones en ejemplos. Si seleccionas control de acceso basado en roles, puedes usar react, react 18, TypeScript, React router y luego elijo mi frameworkbackend. No necesita ser JavaScript. Puedo decir que quiero que mi API sea fast API. Selecciono fast API. Hago clic en continuar. Y ahora obtengo un tutorial sobre cómo construir exactamente eso. Es un tutorial con React router que se conecta a una API y esa API se ejecuta en fast API. Te guiará a través de todos los pasos. Configurando la aplicación front-end, configurando los ajustes y configurando la API con todos sus detalles. Con código de ejemplo. Y esto pertenece a desarrollador. El enlace que compartí en la pantalla. Sí. Ahí vamos. Desarrollador. El enlace que tenemos ahí en la pantalla. Si no, también puedo devolverte tiempo. Creo que ha sido una sesión increíble. Al menos yo me divertí. Aprendimos mucho hoy. Espero que lo intentes en casa. Realmente no es un gran compromiso. Como puedes ver, fue bastante fácil configurarlo. Si tienes alguna pregunta, algún problema técnico o cualquier cosa, no dudes en contactarme en las redes sociales. En Twitter, LinkedIn e Instagram. También puedes escanear el código QR allí para ver otras formas de conectarte conmigo. También proporcionaré el enlace a la masterclass en las redes sociales en caso de que te lo hayas perdido. Creo que eso es prácticamente todo de mi parte. Espero conectarme con algunos de ustedes. Espero que todos se hayan divertido y hayan aprendido algo nuevo. Espero escuchar algunos de sus comentarios. Gracias a todos. Ha sido fantástico. Muchas gracias por unirse. Lo aprecio mucho.
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps. While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods. Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters Prerequisites- IDE for your choice- Node 18 or higher
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including: - User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Next.js is a compelling framework that makes many tasks effortless providing many out-of-the-box solutions. But when it comes to authentication and user security, it's our mission to make it reliable, secure, and efficient. In this workshop, we'll focus on different user authentication and session management approaches, starting from a custom authentication strategy (that we will build together), and ending learning how to identify and integrate the right auth provider (Auth0, Firebase, etc.) for any app. Table of contents:- A brief introduction to Next.js- Building an authentication mechanism from scratch- Why we should avoid custom authentication- How to identify the proper authentication mechanism and provider- Integrating NextAuth.js, Auth0, Firebase, or any other provider
Supabase and Remix make building fullstack apps easy. In this workshop, we are going to learn how to use Supabase to implement authentication and authorization into a realtime Remix application. Join Jon Meyers as he steps through building this app from scratch and demonstrating how you can harness the power of relational databases!
A hands-on workshop about handling authentication and authorization in GraphQL. During this 3 hour workshop you’ll learn how to add authentication to a GraphQL server using JWTs, and handle query responses with user roles. As a bonus we’ll be adding an authentication server with Auth0.The contents: - Authentication with JWTs - Handling query responses and user roles - Auth0Prerequisites: - JavaScript (preferably TypeScript) - GraphQL
Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand? In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfill for them to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision for how authentication could look in the future and a blueprint for how to build the best auth experience today.
In this talk, we'll get a live coded demo of building custom hand-rolled authentication. When you have the right tools (and we do), authentication can be quite simple and secure. This is more (and better) than just: "Install this library and you're good to go." When we're done we'll have our own auth code that can evolve with our ever-changing requirements without a need to learn some library-specific APIs. We'll be leveraging the Web Platform the way it was meant to be done to give us simple and secure server-side authentication for the web. You can check the slides for Kent's talk here as well as demo code.
At Unity, we use GraphQL federation to expose a wide range of business functionality across the organization in a single GraphQL schema. With an ever-growing number of services, this presents challenges for authentication and authorization across the board. I explore how we implemented GraphQL auth at the gateway level, the key design decisions behind it, and the wide-reaching benefits this can have.
In the ever-evolving landscape of modern single-page applications, VueJS stands out but also presents us with challenges. Among them, authentication is crucial: ensuring the user's identity and securing their journey within your application. Fear not; we're here to guide you through these exciting frontiers. In my session, I'll unravel the secrets of authentication in VueJS applications, making it a delightful learning journey for everyone while keeping the focus on the most critical parts. I'll provide an overview of an authentication flow, break down each step, and demystify the role of JWT tokens in the process. Whether you're a seasoned VueJS developer or just getting started, you're welcome. A dash of prior experience with user authentication certainly doesn't hurt, but it's optional. Target audience: Web Developers of all levels who want to learn about security topics and best practices. Key learnings:- Giving a small introduction to the most essential terms and concepts of Authentication;- VueJS is used as an example, but the concepts will be agnostic.
React Summit 2023
Comments