Cómo implementar la autenticación en Next.js con Auth0

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis

  • Índice
    1. ¿Qué es Auth0?
    2. SDK de autenticación para Next.js
    3. Ejemplo de aplicación Next.js usando Auth0
      1. Cree una cuenta Auth0 y configure los detalles de la aplicación
      2. Crear aplicación Next.js
      3. Instalar y configurar el SDK de Auth0 Next.js
      4. Crear la ruta API dinámica
      5. Agregar el componente UserProvider
    4. Conclusión
      1. Más lecturas y recursos

    Al momento de agregar autenticación y autorización a nuestras aplicaciones web, hay algunas cosas que debemos evaluar, por ejemplo, si necesitamos crear nuestra propia plataforma de seguridad o si podemos confiar en un servicio de terceros existente. Veamos cómo podemos implementar autenticación y autorización en aplicaciones Next.js, con Auth0.

     

    “Autenticación” es la acción de validar que un usuario es quien dice ser. Normalmente hacemos esto implementando un sistema de credenciales, como usuario/contraseña, preguntas de seguridad o incluso reconocimiento facial.

    La “autorización” determina lo que un usuario puede (o no puede) hacer. Si necesitamos manejar la autenticación y autorización en nuestra aplicación web, necesitaremos una plataforma o módulo de seguridad. Podemos desarrollar nuestra propia plataforma, implementarla y mantenerla. O podemos aprovechar las plataformas de autenticación y autorización existentes en el mercado que se ofrecen como servicios.

    A la hora de evaluar si es mejor para nosotros crear nuestra propia plataforma, o utilizar un servicio de terceros, hay algunas cosas que debemos considerar:

    • Diseñar y crear servicios de autenticación no es nuestra habilidad principal. Hay personas trabajando especialmente enfocadas en temas de seguridad que pueden crear plataformas mejores y más seguras que nosotros;
    • Podemos ahorrar tiempo confiando en una plataforma de autenticación existente y dedicarlo a agregar valor a los productos y servicios que nos interesan;
    • No almacenamos información confidencial en nuestras bases de datos. Lo separamos de todos los datos involucrados en nuestras aplicaciones;
    • Las herramientas que ofrecen los servicios de terceros han mejorado su usabilidad y rendimiento, lo que nos facilita la administración de los usuarios de nuestra aplicación.

    Considerando estos factores, podemos decir que confiar en plataformas de autenticación de terceros puede ser más fácil, económico e incluso más seguro que crear nuestro propio módulo de seguridad.

     

    En este artículo veremos cómo implementar autenticación y autorización en nuestras aplicaciones Next.js utilizando uno de los productos existentes en el mercado: Auth0.

    ¿Qué es Auth0?

    Le permite agregar seguridad a las aplicaciones desarrolladas utilizando cualquier lenguaje o tecnología de programación.

    "Auth0 es una solución flexible e inmediata para agregar servicios de autenticación y autorización a sus aplicaciones".

    - Dan Arias , auth0.com

    Auth0 tiene varias características interesantes, tales como:

    • Inicio de sesión único : Una vez que inicies sesión en una aplicación que usa Auth0, no tendrás que volver a ingresar tus credenciales al ingresar a otra que también lo use. Iniciarás sesión automáticamente en todos ellos;
    • Inicio de sesión social : autentíquese utilizando su perfil de red social preferido;
    • Autenticación multifactor ;
    • Se permiten múltiples protocolos estándar , como OpenID Connect, JSON Web Token u OAuth 2.0;
    • Herramientas de informes y análisis .

    Existe un plan gratuito que puede utilizar para comenzar a proteger sus aplicaciones web, que cubre hasta 7000 usuarios activos mensuales. Comenzarás a pagar cuando aumente la cantidad de usuarios.

    Otra cosa interesante de Auth0 es que tenemos un SDK de Next.js disponible para usar en nuestra aplicación. Con esta biblioteca, creada especialmente para Next.js, podemos conectarnos fácilmente a la API Auth0.

    SDK de autenticación para Next.js

    Como mencionamos antes, Auth0 creó (y mantiene) un SDK centrado en Next.js, entre otros SDK disponibles para conectarse a la API utilizando varios lenguajes de programación. Solo necesitamos descargar el paquete NPM , configurar algunos detalles sobre nuestra cuenta Auth0 y nuestra conexión, y listo.

    Este SDK nos brinda herramientas para implementar autenticación y autorización con métodos tanto del lado del cliente como del lado del servidor, utilizando rutas API en el backend y React Context con React Hooks en el frontend.

    Veamos cómo funcionan algunos de ellos en una aplicación Next.js de ejemplo.

     

    Ejemplo de aplicación Next.js usando Auth0

    Volvamos a nuestro ejemplo anterior de plataforma de video y creemos una pequeña aplicación para mostrar cómo usar Auth0 Next.js SDK. Configuraremos el inicio de sesión universal de Auth0 . Tendremos algunas URL de videos de YouTube. Estarán ocultos bajo una plataforma de autenticación. Sólo los usuarios registrados podrán ver el listado de vídeos a través de nuestra aplicación web.

    Nota : este artículo se centra en la configuración y el uso de Auth0 en su aplicación Next.js. No entraremos en detalles como el estilo CSS o el uso de la base de datos. Si quieres ver el código completo de la aplicación de ejemplo, puedes ir a este repositorio de GitHub .

    Cree una cuenta Auth0 y configure los detalles de la aplicación

    En primer lugar, debemos crear una cuenta Auth0 utilizando la página de registro .

    ( Vista previa grande )

    Después de eso, vayamos al Panel de control de Auth0 . Vaya a Aplicaciones y cree una nueva aplicación de tipo [“Aplicaciones web habituales”].

    ( Vista previa grande )

    Ahora vayamos a la pestaña Configuración de la aplicación y, en la sección URI de la aplicación , configuremos los siguientes detalles y guardemos los cambios:

    • URL de devolución de llamada permitidas : agregarhttps://localhost:3000/api/auth/callback
    • URL de cierre de sesión permitidas : agregarhttps://localhost:3000/

    ( Vista previa grande )

    Al hacer esto, estamos configurando la URL a la que queremos redirigir a los usuarios después de que inician sesión en nuestro sitio (Devolución de llamada) y la URL a la que redirigimos a los usuarios después de que cierran sesión (Cerrar sesión). Deberíamos agregar las URL de producción cuando implementemos la versión final de nuestra aplicación en el servidor de alojamiento.

    Auth0 Dashboard tiene muchas configuraciones y personalizaciones que podemos aplicar a nuestros proyectos. Podemos cambiar el tipo de autenticación que utilizamos, la página de inicio de sesión/registro, los datos que solicitamos de los usuarios, habilitar/deshabilitar nuevos registros, configurar las bases de datos de los usuarios, etc. Nails Trends

    Crear aplicación Next.js

    Para crear una nueva aplicación Next.js, usaremos create-next-app , que configura todo automáticamente. Para crear el proyecto, ejecute:

    npx create-next-app [name-of-the-app]

    O

    yarn create next-app [name-of-the-app]

    Para iniciar el servidor de desarrollo localmente y ver el sitio recién creado en su navegador, vaya a la nueva carpeta que creó:

    cd [name-of-the-app]

    Y correr:

    npm run dev

    O

    yarn dev

    Instalar y configurar el SDK de Auth0 Next.js

    Instalemos el SDK de Auth0 Next.js en nuestra aplicación:

    npm install @auth0/nextjs-auth0

    O

    yarn add @auth0/nextjs-auth0

    Ahora, en nuestro archivo env.local (o el menú de variables de entorno de nuestra plataforma de hosting), agreguemos estas variables:

     

    AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]"AUTH0_BASE_URL="https://localhost:3000"AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]"AUTH0_CLIENT_ID="[Can be found in the Auth0 dashboard under settings]"AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]"

    ( Vista previa grande )

    Si desea más opciones de configuración, puede consultar los documentos .

    Crear la ruta API dinámica

    Next.js ofrece una forma de crear API sin servidor: Rutas API . Con esta característica, podemos crear código que se ejecutará en cada solicitud de usuario a nuestras rutas. Podemos definir rutas fijas, como /api/index.js. Pero también podemos tener rutas API dinámicas , con parámetros que podemos usar en nuestro código de rutas API, como /api/blog/[postId].js.

    Creemos el archivo /pages/api/auth/[...auth0].js, que será una ruta API dinámica. Dentro del archivo, importemos el handleAuthmétodo desde Auth0 SDK y exportemos el resultado:

    import { handleAuth } from '@auth0/nextjs-auth0';export default handleAuth();

    Esto creará y manejará las siguientes rutas:

    • /api/auth/login
      Para iniciar sesión o registrarse con Auth0.
    • /api/auth/logout
      Para cerrar la sesión del usuario.
    • /api/auth/callback
      Para redirigir al usuario después de un inicio de sesión exitoso.
    • /api/auth/me
      Para obtener la información del perfil del usuario.

    Y esa sería la parte del lado del servidor de nuestra aplicación. Si queremos iniciar sesión en nuestra aplicación o registrarnos para obtener una nueva cuenta, debemos visitar https://localhost:3000/api/auth/login. Deberíamos agregar un enlace a esa ruta en nuestra aplicación. Lo mismo ocurre con cerrar sesión en nuestro sitio: agregue un enlace a https://localhost:3000/api/auth/logout.

    Agregar el componente UserProvider

    Para manejar el estado de autenticación del usuario en la interfaz de nuestra aplicación web, podemos usar UserProviderel componente React, disponible en Auth0 Next.js SDK. el componente usa React Context internamente.

    Si desea acceder al estado de autenticación de usuario en un componente, debe envolverlo con un UserProvidercomponente.

    UserProvider Component {...props} //UserProvider

    Si queremos acceder a todas las páginas de nuestra aplicación, debemos agregar el componente al pages/_app.jsarchivo. pages/_app.jsanula el componente React App. Es una característica que expone Next.js para personalizar nuestra aplicación. Puedes leer más sobre esto aquí .

    import React from 'react';import { UserProvider } from '@auth0/nextjs-auth0';export default function App({ Component, pageProps }) { return ( UserProvider Component {...pageProps} / /UserProvider );}

    Tenemos un gancho de React useUserque accede al estado de autenticación expuesto por UserProvider. Podemos usarlo, por ejemplo, para crear una especie de página de bienvenida. Cambiemos el código del pages/index.jsarchivo:

     

    import { useUser } from "@auth0/nextjs-auth0";export default () = { const { user, error, isLoading } = useUser(); if (isLoading) return divLoading.../div; if (error) return div{error.message}/div; if (user) { return ( div h2{user.name}/h2 p{user.email}/p a href="/api/auth/logout"Logout/a /div ); } return a href="/api/auth/login"Login/a;};

    El userobjeto contiene información relacionada con la identidad del usuario. Si la persona que visita la página no ha iniciado sesión (no tenemos un userobjeto disponible), mostraremos un enlace a la página de inicio de sesión. Si el usuario ya está autenticado, mostraremos user.namepropiedades user.emailen la página y un enlace para cerrar sesión.

    Creemos un archivo videos.js, con una lista de tres URL de videos de YouTube que solo serán visibles para las personas registradas. Para permitir que solo los usuarios registrados vean esta página, usaremos withPageAuthRequiredel método del SDK.

    import { withPageAuthRequired } from "@auth0/nextjs-auth0";export default () = { return ( div a href="https://www.youtube.com/watch?v=5qap5aO4i9A"LoFi Music/a a href="https://www.youtube.com/watch?v=fEvM-OUbaKs"Jazz Music/a a href="https://www.youtube.com/watch?v=XULUBg_ZcAU"Piano Music/a /div );};export const getServerSideProps = withPageAuthRequired();

    Tenga en cuenta que nuestra aplicación web permite que cualquier persona registre una cuenta utilizando la plataforma Auth0. El usuario también puede reutilizar una cuenta Auth0 existente, ya que estamos implementando el inicio de sesión universal.

    Podemos crear nuestra propia página de registro para solicitar más detalles sobre el usuario o agregar información de pago para facturarle mensualmente por nuestro servicio. También podemos utilizar los métodos expuestos en el SDK para manejar la autorización de forma automática.

    Conclusión

    En este artículo, vimos cómo proteger nuestras aplicaciones Next.js usando Auth0, una plataforma de autenticación y autorización. Evaluamos los beneficios de utilizar un servicio de terceros para la autenticación de nuestras aplicaciones web en comparación con crear nuestra propia plataforma de seguridad. Creamos una aplicación Next.js de ejemplo y la aseguramos usando el plan gratuito Auth0 y el SDK de Auth0 Next.js.

    Si desea implementar una aplicación de ejemplo Auth0 en Vercel , puede hacerlo aquí .

    Más lecturas y recursos

    • Auth0 Next.js SDK Repositorio GitHub, Auth0, GitHub
    • “ La guía definitiva para la autenticación Next.js con Auth0 ”, Sandrino Di Mattia, Blog de Auth0
      En nuestra aplicación de ejemplo, utilizamos renderizado del lado del servidor, con rutas API y un enfoque sin servidor. Si está utilizando Next.js para un sitio estático o un servidor personalizado para alojar su aplicación, este artículo tiene algunos detalles sobre cómo implementar la autenticación.
    • “ Nueva experiencia de inicio de sesión universal ”, Auth0 Universal Login, Auth0 Docs
    • “ Inicio de sesión universal centralizado frente a inicio de sesión integrado ”, Auth0 Universal Login, Auth0 Docs

    (vf, yk, il)Explora más en

    • Siguiente.js
    • Reaccionar
    • javascript
    • Actuación
    • Seguridad





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo implementar la autenticación en Next.js con Auth0

    Cómo implementar la autenticación en Next.js con Auth0

    Implemente rápidamente. Implementar inteligentemente Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-implementar-la-autenticacion-en-next-1098-0.jpg

    2024-05-22

     

    Cómo implementar la autenticación en Next.js con Auth0
    Cómo implementar la autenticación en Next.js con Auth0

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20