Esta biblioteca le permite integrar sin problemas la autenticación de Google en su aplicación Next.js, eliminando la necesidad de desarrollarla desde cero.

La integración de un sistema de autenticación seguro es un paso de desarrollo crucial que no solo proporciona un entorno seguro para los usuarios, sino que también infunde confianza en su producto. Este sistema garantiza que sus datos estén protegidos y que solo las personas autorizadas puedan acceder a la aplicación.

La creación de una autenticación segura desde cero puede ser un proceso lento que requiere un análisis exhaustivo. comprensión de los protocolos y procesos de autenticación, especialmente cuando se manejan diferentes tipos de autenticación proveedores

Con NextAuth, puede cambiar su enfoque para crear las funciones principales. Siga leyendo para aprender cómo integrar el inicio de sesión social de Google en su aplicación usando NextAuth.

¿Cómo funciona NextAuth?

SiguienteAuth.js es una biblioteca de autenticación de código abierto que simplifica el proceso de agregar

instagram viewer
autenticacion y autorizacion funcionalidad a las aplicaciones Next.js, así como la personalización de los flujos de trabajo de autenticación. Proporciona una gama de funciones como correo electrónico, autenticación sin contraseña y soporte para varios proveedores de autenticación como Google, GitHub y más.

En un alto nivel, NextAuth actúa como un middleware, facilitando el proceso de autenticación entre su aplicación y el proveedor. En el fondo, cuando un usuario intenta iniciar sesión, se le redirige a la página de inicio de sesión de Google. Tras una autenticación exitosa, Google devuelve una carga útil que incluye los datos del usuario, como su nombre y dirección de correo electrónico. Estos datos se utilizan para autorizar el acceso a la aplicación y sus recursos.

Con los datos de la carga útil, NextAuth crea una sesión para cada usuario autenticado y almacena el token de sesión en una cookie segura solo de HTTP. El token de sesión se utiliza para verificar la identidad del usuario y conservar su estado de autenticación. Este proceso también se aplica a otros proveedores con ligeras variaciones en la implementación.

Registre su aplicación Next.js en Google Developer Console

NextAuth brinda soporte para el servicio de autenticación de Google. Sin embargo, para que su aplicación interactúe con las API de Google y permita a los usuarios autenticarse con sus credenciales de Google, deberá registrar su aplicación en la consola para desarrolladores de Google y obtener un Identificación del cliente y Secreto del cliente.

Para hacer eso, navegue a Consola para desarrolladores de Google. A continuación, inicie sesión con su cuenta de Google para acceder a la consola. Una vez que haya iniciado sesión, cree un nuevo proyecto.

En la página de descripción general del proyecto, seleccione el API y servicios pestaña de la lista de servicios en el panel de menú izquierdo y, finalmente, el Cartas credenciales opción.

Clickea en el Crear credenciales botón para generar su ID de cliente y Secreto de cliente. A continuación, especifique el tipo de aplicación de las opciones dadas y luego proporcione un nombre para su aplicación.

Luego, especifique la URL de la ruta principal de su aplicación y finalmente especifique el URI de redireccionamiento autorizado para su aplicación. Para este caso, debe ser http://localhost: 3000/api/autorización/devolución de llamada/google según lo especificado por la configuración del proveedor de Google de NextAuth.

Una vez que se haya registrado correctamente, Google le proporcionará una identificación de cliente y un secreto de cliente para usar en su aplicación.

Configurar la aplicación NextJS

Para comenzar, cree un proyecto Next.js localmente:

npx create-next-app next-auth-app

Una vez completada la configuración, navegue hasta el directorio del proyecto recién creado y ejecute este comando para activar el servidor de desarrollo.

npm ejecutar dev

Abre tu navegador y navega hasta http://localhost: 3000. Este debería ser el resultado esperado.

Puedes encontrar el código de este proyecto en su repositorio GitHub.

Configuración del archivo .env

En la carpeta raíz de su proyecto, cree un nuevo archivo y asígnele un nombre .env para contener su ID de cliente, secreto y la URL base.

SIGUIENTE_PUBLIC_GOOGLE_CLIENT_ID= 'Identificación del cliente'
SIGUIENTE_PÚBLICO_GOOGLE_CLIENT_SECRET= 'secreto'
SIGUIENTE_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

La URL NextAUTH se usa para especificar la URL base de su aplicación, que se usa para redirigir a los usuarios una vez que se completa la autenticación.

Integre NextAuth en su aplicación Next.js

Primero, instale la biblioteca de NextAuth en su proyecto.

npm instalar siguiente autenticación

A continuación, en el /pages directorio, crea una nueva carpeta y asígnale un nombre API. Cambie el directorio al API carpeta, y cree otra carpeta llamada aut. En la carpeta de autenticación, agregue un nuevo archivo y asígnele un nombre [...siguiente].js y agregue las siguientes líneas de código.

importar SiguienteAuth de"siguiente-autorización/siguiente";
importar Proveedor de Google de"próxima autenticación/proveedores/google";
exportarpor defecto NextAuth({
 proveedores:[
 Proveedor de Google({
 ID de cliente: proceso.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: proceso.env. SIGUIENTE_PÚBLICO_GOOGLE_CLIENTE_SECRETO,
 }),
 ]
});

Este código configura a Google como proveedor de autenticación. La función NextAuth define el objeto de configuración del proveedor de Google que tiene dos propiedades: una identificación de cliente y un secreto de cliente que inicializa el proveedor.

A continuación, abra el páginas/_app.js archivo y realice los siguientes cambios en el código.

importar'../estilos/globales.css'
importar { Proveedor de sesión } de"siguiente-autorización/reaccionar"
funciónMi aplicación({ Componente, pageProps: { sesión, ...pageProps } }) {
devolver (


 </SessionProvider>
 )
}
exportarpor defecto Mi aplicación

NextAuth's Proveedor de sesión El componente proporciona la funcionalidad de administración del estado de autenticación a la aplicación Next.js. Toma un sesión prop que contiene los datos de la sesión de autenticación devueltos por la API de Google, que incluye detalles del usuario, como su ID, correo electrónico y token de acceso.

Al envolver el Mi aplicación componente con el componente SessionProvider, el objeto de sesión de autenticación con los detalles del usuario está disponible en toda la aplicación, lo que permite que la aplicación persista y represente páginas en función de su estado de autenticación.

Configurar el archivo index.js

Abre el páginas/index.js archivo, elimine el código repetitivo y agregue el código a continuación para crear un botón de inicio de sesión que dirija a los usuarios a una página de inicio de sesión.

importar Cabeza de'siguiente/cabeza'
importar estilos de'../styles/Home.módulo.css'
importar { usar enrutador } de'siguiente/enrutador';
exportarpor defectofunciónHogar() {
constante enrutador = usar enrutador ();

devolver (





Crear la siguiente aplicación<<span>/title></span><br> <meta name="<span">"description" content=<span>"Generado por crear la siguiente aplicación"</span> /> <br> <enlace rel="<span">"icono" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <nombre de clase principal="{estilos.principal}"><br> <h1 nombre de clase="{estilos.título}">
<br> Bienvenido a <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></nombre></p>
<p> </p>
<p classname="{styles.description}"><br> Comience iniciando sesión <span>en</span>{<span>' ' </span>}<br> <c classname="{styles.code}"><span>con</span> su cuenta de Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Iniciar sesión<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></c></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Este código usa el enlace <strong>useRouter</strong> de Next.js para manejar el enrutamiento dentro de la aplicación mediante la definición de un objeto de enrutador. Cuando se hace clic en el botón de inicio de sesión, la función del controlador llama al método <strong>router.push</strong> para redirigir el usuario a la página de inicio de sesión.</p> <h3 id="create-a-login-authentication-page">Crear una autenticación de inicio de sesión Página</h3> <p>En el directorio <strong>pages</strong>, cree un nuevo archivo <strong>Login.js</strong>, luego agregue las siguientes líneas de código.</p> <pre> <code><span>importar</span> { usar sesión, iniciar sesión, cerrar sesión } <span>desde</span> <span>"next-auth/react"</span><br><span>importar</span> { useRouter } <span>desde</span> <span>'siguiente /router'</span>;<br><span>importar</span> estilos <span>desde</span> <span>'../styles/Login.module.css'</span><p><span>exportar</span> <span>predeterminado</span> <span><span>función</span> < span>Iniciar sesión</span>() {<br> <span>const</span> { <span>datos</span>: sesión } = useSession()<br> <span>const</span> enrutador = useRouter();<br> <span>if</span> (sesión) {<br> <span>return</span> (<br> </p>
<div classname="{estilos.contenedor}">
<br> <h1 classname="<span">"title">Crear la siguiente aplicación<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Firmado < span>en <span>como</span> {sesión.usuario.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Perfil de usuario<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Cerrar sesión<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>return</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Crear la siguiente aplicación<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> ¡¡No has iniciado sesión <span>en</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Iniciar sesión <span>en</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> y <strong>signOut</strong> son enlaces proporcionados por <strong>next-auth</strong>. El enlace <strong>useSession</strong> se utiliza para acceder al objeto de la sesión del usuario actual una vez que el usuario inicia sesión y se autentica con éxito mediante Google.</p> <p>Esto permite que Next.js mantenga el estado de autenticación y presente los detalles del usuario en el lado del cliente de la aplicación, en este caso, el correo electrónico.</p> <p>Además, utilizando el objeto de sesión, puede crear fácilmente perfiles de usuario personalizados para su aplicación y almacenar los datos en una base de datos como como PostgreSQL. Puede <span>conectar una base de datos PostgreSQL con su aplicación Next.js usando Prisma</span>.</p> <p>El gancho de cierre de sesión permite que un usuario cierre sesión en la aplicación. Este enlace eliminará el objeto de sesión creado durante el proceso de inicio de sesión y se cerrará la sesión del usuario.</p> <p>Continúe y active el servidor de desarrollo para actualice los cambios y diríjase a su aplicación Next.js que se ejecuta en el navegador para probar la funcionalidad de autenticación.</p> <pre> <code>npm run dev</code> </pre> <p>Además, puede <span>usar Tailwind CSS con su aplicación Next.js</span> para diseñar los modelos de autenticación.</p> <h2 id="authentication-using-nextauth"> Autenticación mediante NextAuth  h2> </h2>
<p>NextAuth admite múltiples servicios de autenticación que se pueden integrar fácilmente en sus aplicaciones Next.js para manejar el lado del cliente autenticación.</p> <p>Además, puede integrar una base de datos para almacenar los datos de sus usuarios y el token de acceso para implementar del lado del servidor autenticación para solicitudes de autenticación posteriores, ya que NextAuth brinda soporte para diferentes integraciones de bases de datos.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></enlace>