Agregar autenticación de usuario en NextJS usando Auth0

En este artículo, aprenderemos cómo podemos agregar autenticación de usuario en nuestro proyecto NextJS usando Auth0. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar la autenticación de usuario usando auth0 en nuestro proyecto, primero instalaremos el módulo auth0. Después de eso, crearemos un archivo dinámico con el nombre […auth0].js . Luego agregaremos UserProvider en cada página. Después de eso, agregaremos una opción de inicio de sesión y cierre de sesión en nuestra página de inicio.

Crear aplicación NextJS:

Paso 1: Cree un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Estructura del proyecto: Se verá así.

Paso 2: Cree una cuenta gratuita en el sitio web auth0 y cree una nueva aplicación.

Paso 3: obtenga su dominio, identificación de cliente y clave secreta de cliente en la pestaña de configuración de su cuenta.

Paso 4: agregue la URL de devolución de llamada y cierre de sesión. El usuario de devolución de llamada se usa para redirigir al usuario después de iniciar sesión y la URL de cierre de sesión se usa para redirigir al usuario después de cerrar sesión.

Paso 5: Ahora instalaremos el módulo auth0 usando el siguiente comando:

npm install @auth0/nextjs-auth0

Paso 6: Cree un nuevo archivo .env.local con el siguiente código:

AUTH0_SECRET=
  "[A 32 characters secret used to encrypt the cookies]"
AUTH0_BASE_URL="http://localhost:3000"
AUTH0_ISSUER_BASE_URL="YOUR_AUTH0_DOMAIN"
AUTH0_CLIENT_ID="YOUR_AUTH0_CLIENT_ID"
AUTH0_CLIENT_SECRET="YOUR_AUTH0_CLIENT_SECRET"

Paso 7: Cree una nueva carpeta dentro del directorio page/api con autenticación de nombre. Dentro de esta carpeta, cree un nuevo archivo de ruta dinámica con el nombre […auth0].js y agregue el siguiente contenido dentro del archivo.

Nombre de archivo: […auth0].js

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

Paso 8: ahora tenemos que agregar el UserProvider de auth0 en cada página. Para eso, cambiaremos el contenido del archivo _app.js con el siguiente contenido.

Nombre de archivo: _app.js 

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

Paso 9: Ahora agregaremos el botón de inicio y cierre de sesión en nuestra página de inicio. Para eso, agregue las siguientes líneas en el archivo index.js.

Nombre de archivo: index.js 

import { useUser } from "@auth0/nextjs-auth0";
  
export default function Login(){
 const { user, error, isLoading } = useUser()
  
 if (user) {
   return (
     <div>
       <h2>Hey {user.name}, You are logged in</h2>
       <a href="/api/auth/logout"><h1>Logout</h1></a>
     </div>
   );
 }
 return <a href="/api/auth/login"><h1>Login</h1></a>;
};

Paso para ejecutar la aplicación: después de eso, ejecute la aplicación con el siguiente comando:

npm run dev

Producción: