Agregar autenticación de usuario en Next.js usando NextAuth

En este artículo, aprenderemos cómo podemos agregar autenticación de usuario en nuestro proyecto NextJS. 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 en nuestro proyecto, primero instalaremos el módulo nextauth. Después de eso, crearemos un archivo dinámico con el nombre […nextauth].js. Luego agregaremos diferentes proveedores dentro de este archivo para la autenticación. Después de eso, agregaremos la opción de inicio de sesión y cierre de sesión en nuestra página de inicio.

Crear aplicación NextJS:

Paso 1: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Estructura del proyecto: Se verá así.

Paso 2: Instale NextAuth usando el siguiente comando:

npm i next-auth

Paso 3: Ahora vaya a la consola de desarrolladores de Google y obtenga su ID y clave de API de Oauth.

Paso 4: Ahora crea una nueva carpeta dentro del directorio page/api y llámala auth. Dentro de esa carpeta, cree un nuevo archivo con el nombre […nextauth].js y agregue el siguiente código en ese archivo.

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
  
export default NextAuth({
      
  providers: [
    GoogleProvider({
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
    }),
  ],
})

Aquí primero importamos NextAuth y GoogleProvider desde next-auth. Después de eso, solo usaremos Google como nuestro proveedor de autenticación.

Paso 5: Ahora vamos a agregar Proveedor en cada página y para eso, agregaremos Proveedor en nuestro archivo _app.js. Agregue el siguiente código en su archivo _app.js .

import { Provider } from "next-auth/client"
  
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <Provider session={session}>
      <Component {...pageProps} />
    </Provider>
  )
}

Paso 6:   ahora podemos agregar los botones de inicio y cierre de sesión en nuestra página de inicio. Para eso, vamos a usar el gancho useSession() para verificar si el usuario está conectado o no. Agregaremos el siguiente código en nuestro archivo index.js .

import { useSession, signIn, signOut } from "next-auth/client"
  
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        <h1>GeeksforGeeks</h1>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      <h1>GeeksforGeeks</h1>
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

Aquí primero estamos comprobando si existe una sesión o no. Si existe una sesión que significa que el usuario ya ha iniciado sesión, mostraremos el botón Cerrar sesión del usuario, pero si el usuario no ha iniciado sesión, mostraremos el botón Iniciar sesión.

Paso para ejecutar la aplicación: Ahora ejecute la aplicación usando el siguiente código:

npm run dev

Producción