AYUDA PARA NODOS

next-auth NPM (Cómo funciona para desarrolladores)

Publicado en 15 de diciembre, 2024

Introducción

La autenticación es crucial para las aplicaciones web modernas, ya que garantiza que los usuarios puedan acceder de manera segura a sus datos y funciones y proporciona soporte de infraestructura. NextAuth.js es una biblioteca de autenticación potente y flexible diseñada para funcionar sin problemas con Next.js. Este artículo explorará cómo puedes configurar y utilizar NextAuth.js en un proyecto de Next.js para que puedas proteger los datos de los usuarios con facilidad. También le mostraremos cómo este npm se puede incorporar con otras bibliotecas, como la biblioteca IronPDF, para una autenticación sin estado intuitiva en sus proyectos.

¿Qué es NextAuth.js?

NextAuth.js es una biblioteca de autenticación de código abierto para aplicaciones Next.js que proporciona una forma flexible y segura de implementar la autenticación en aplicaciones web. Con NextAuth.js, los desarrolladores pueden integrar fácilmente la autenticación en sus proyectos Next.js sin tener que gestionar las complejidades de la autenticación de usuarios y la gestión de sesiones.

El paquete es altamente configurable, lo que permite a los desarrolladores personalizar los flujos de autenticación, asegurar rutas de API y manejar sesiones de usuario sin problemas. Con funciones mejoradas que le permiten crear sus procedimientos para gestionar el acceso a cuentas, cifrar y decodificar tokens web JSON, y establecer políticas de seguridad de cookies personalizadas y atributos de sesión, lo que le permite regular el acceso a las cuentas y la frecuencia de verificación de sesiones.

¿Por qué elegir NextAuth.js?

NextAuth.js ofrece varios beneficios:

Facilidad de uso: Configuración simple con mínima configuración.
Flexibilidad: Soporta varios proveedores de autenticación, incluidos OAuth, correo electrónico/contraseña, y más.
Seguridad: Funciones de seguridad integradas para proteger los datos de usuario en su propia base de datos.
Extensibilidad: Fácilmente extensible para adaptarse a necesidades de autenticación personalizadas.

Comenzando con Next Auth npm

Primero, vamos a crear un nuevo proyecto de Next.js. Abre tu terminal y ejecuta:

npx create-next-app@latest my-next-auth-app
cd my-next-auth-app

A continuación, instala NextAuth.js:

npm install next-auth

Configuración de NextAuth.js

Crea un nuevo archivo para tu ruta de API para manejar la autenticación. En el directorio 'pages/api/auth', crea lo siguiente[...nextauth]archivo .js:

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

JAVASCRIPT

Variables de entorno

Cree un archivo '.env.local' en la raíz de su proyecto para almacenar sus variables de entorno:

// Just make sure to fill out the variables with your actual information!
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXTAUTH_SECRET=your_nextauth_secret

Agregar autenticación a su aplicación

Ahora, agreguemos autenticación a su aplicación. Crea un botón de inicio de sesión y un componente de perfil para mostrar la información del usuario.

// components/LoginButton.js
import { signIn, signOut, useSession } from 'next-auth/react';
const LoginButton = () => {
  const { data: session, status } = useSession();
  const loading = status === "loading";
  return (
    <div>
      {!session && (
        <>
          <button onClick={() => signIn('github')}>Sign in with GitHub</button>
          <button onClick={() => signIn('google')}>Sign in with Google</button>
        </>
      )}
      {session && (
        <>
          <p>Signed in as {session.user.email}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
};
export default LoginButton;

// components/LoginButton.js
import { signIn, signOut, useSession } from 'next-auth/react';
const LoginButton = () => {
  const { data: session, status } = useSession();
  const loading = status === "loading";
  return (
    <div>
      {!session && (
        <>
          <button onClick={() => signIn('github')}>Sign in with GitHub</button>
          <button onClick={() => signIn('google')}>Sign in with Google</button>
        </>
      )}
      {session && (
        <>
          <p>Signed in as {session.user.email}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
};
export default LoginButton;

JAVASCRIPT

Explicación del código

El componente LoginButton gestiona la autenticación de usuarios en una aplicación de Next.js utilizando NextAuth.js. Utiliza el hook useSession para determinar si un usuario ha iniciado sesión. Si el usuario no está autenticado, se muestran botones que le permiten iniciar sesión usando GitHub o Google. Si el usuario está autenticado, muestra un mensaje con su correo electrónico y un botón para cerrar sesión. Este componente proporciona una interfaz sencilla para gestionar las acciones de inicio y cierre de sesión del usuario mediante la manipulación de un objeto de sesión.

Protegiendo Rutas

Para proteger las rutas y asegurar que solo los usuarios autenticados puedan acceder a ciertas páginas, use la función getSession de NextAuth.js.

// pages/protected.js
import { getSession } from 'next-auth/react';
const ProtectedPage = ({ session }) => {
  if (!session) {
    return <p>You need to be authenticated to view this page.</p>;
  }
  return <p>Welcome, {session.user.email}!</p>;
};
export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: { session },
  };
}
export default ProtectedPage;

// pages/protected.js
import { getSession } from 'next-auth/react';
const ProtectedPage = ({ session }) => {
  if (!session) {
    return <p>You need to be authenticated to view this page.</p>;
  }
  return <p>Welcome, {session.user.email}!</p>;
};
export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: { session },
  };
}
export default ProtectedPage;

JAVASCRIPT

Explicación del código

El componente ProtectedPage en una aplicación de Next.js utiliza NextAuth.js para restringir el acceso solo a usuarios autenticados. Recupera las propiedades de la sesión del usuario en el lado del servidor utilizando getServerSideProps y las pasa como una propiedad al componente. Si el usuario no está autenticado, la página muestra un mensaje indicando que se requiere autenticación. Si el usuario está autenticado, se le da la bienvenida mostrando su dirección de correo electrónico. Esta configuración asegura que solo los usuarios que han iniciado sesión puedan acceder al contenido de la página.

Presentación de IronPDF

IronPDFes una potente biblioteca de PDF para node.js que permite a los desarrolladores generar y editar PDFs en sus proyectos de node.js. Tanto si necesita crear archivos PDF a partir de HTML, manipular archivos PDF existentes o convertir páginas web a formato PDF, IronPDF tiene todo lo que necesita.

next-auth NPM(Cómo funciona para desarrolladores): Figura 1 - IronPDF for Node.js: La biblioteca PDF para Node.js

Características principales

Conversión de HTML a PDF

Convierta contenidos HTML en documentos PDF sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.

Conversión de URL a PDF

Genere archivos PDF directamente a partir de URL, lo que le permitirá capturar el contenido de páginas web y guardarlo como archivos PDF mediante programación.

Manipulación de PDF

Fusione, divida y manipule documentos PDF existentes con facilidad. IronPDF ofrece funciones como añadir páginas, dividir documentos, etc.

Seguridad PDF

Proteja sus documentos PDF cifrándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos confidenciales del acceso no autorizado.

Salida de alta calidad

Produzca documentos PDF de alta calidad con una representación precisa del texto, las imágenes y el formato. IronPDF garantiza que los PDF generados mantengan la fidelidad al contenido original.

Compatibilidad multiplataforma

IronPDF es compatible con varias plataformas, como Windows, Linux y macOS, lo que lo hace apto para una amplia gama de entornos de desarrollo.

Integración sencilla

Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API está bien documentada, lo que facilita la incorporación de funciones de generación de PDF a sus proyectos.

Instalación

Para instalar elIronPDFpaquete, use el siguiente comando:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

Generar documentos PDF usando IronPDF y NextAuth.js

Instalar dependencias: Primero, crea un nuevo proyecto Next.js(si aún no lo ha hecho) utilizando el siguiente comando:

npx create-next-app@latest nextauth-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

A continuación, vaya al directorio de su proyecto:

cd nextauth

Instale los paquetes necesarios:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add next-auth

Crear un generador de PDF

API de generación de PDF: El primer paso es crear una API backend para generar el documento PDF. Dado que IronPDF solo se ejecuta en el servidor, necesitamos crear una API para llamar cuando un usuario quiera generar un PDF. Crea un archivo en la ruta pages/api/pdf.js y añade el siguiente contenido:

// pages/api/pdf.js
import { IronPdf } from "@ironsoftware/ironpdf";
import { format } from 'date-fns'; // Import the format function for date formatting
// Apply your IronPDF license key
IronPdf.GlobalSettings.LicenseKey = "Your license key goes here";
export default async function handler(req, res) {
  try {
    const currentDate = new Date();
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
    content += `<p>Date: ${currentDate}</p>`;
    content += `<p>Formatted Date: ${formattedDate}</p>`;
    const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
    const data = await pdf.toBuffer();
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

// pages/api/pdf.js
import { IronPdf } from "@ironsoftware/ironpdf";
import { format } from 'date-fns'; // Import the format function for date formatting
// Apply your IronPDF license key
IronPdf.GlobalSettings.LicenseKey = "Your license key goes here";
export default async function handler(req, res) {
  try {
    const currentDate = new Date();
    const formattedDate = format(currentDate, 'MMMM do, yyyy');
    let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
    content += `<p>Date: ${currentDate}</p>`;
    content += `<p>Formatted Date: ${formattedDate}</p>`;
    const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
    const data = await pdf.toBuffer();
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (error) {
    console.error("Error generating PDF:", error);
    res.status(500).end();
  }
}

JAVASCRIPT

Esto crea una ruta API de Next.js que genera un archivo PDF utilizando la biblioteca IronPDF. Crea una cadena HTML que contiene un encabezado y la fecha actual, formatea la fecha usando date-fns, y convierte el HTML en un PDF. El PDF generado se devuelve como un archivo descargable en la respuesta. Este enfoque permite la generación dinámica de PDF en un entorno del lado del servidor, lo que lo hace útil para crear informes, facturas u otros documentos al instante.

Ahora añadamos un inicio de sesión con GIT a nuestro sitio web de front-end usando Next-Auth. Para esto, necesitamos obtener el GitID y el secreto del usuario. Inicia sesión en tu cuenta de Git y navega a Configuración de desarrollador como se muestra a continuación:

next-auth NPM(Cómo funciona para desarrolladores): Figura 2 - Dónde encontrar configuraciones de desarrollador para Git

Haz clic en New GitHub App y añade los detalles de tu sitio web:

next-auth NPM(Cómo funciona para desarrolladores): Figura 3 - Agregar detalles del sitio web en GitHub

Guarda el App ID y el Client ID en un lugar seguro. Luego, crea un archivo .env.local en la raíz de tu proyecto para almacenar tus variables de entorno:

// Here you can use the App and Client ID you just got from GitHub
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
NEXTAUTH_SECRET=secret

Crea un nuevo archivo para tu ruta de API para manejar la autenticación. En el directorio pages/api/auth, crea un [...nextauth]Archivo .js de la siguiente manera:

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
export default NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

JAVASCRIPT

Y añade un componente llamado LoginButton.js. Que contendrá lo siguiente:

import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  )
}

JAVASCRIPT

Modifica tu archivo index.js de la siguiente manera

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from "date-fns";
import LoginButton from "../components/LoginButton";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
  const [text, setText] = useState("");
  const { data: session } = useSession();
  const accessToken = session?.accessToken;
  useEffect(() => {
    const currentDate = new Date();
    const formattedDate = format(currentDate, "MMMM do, yyyy");
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(hashids.encode(event.target.value));
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Next Auth and Generate PDF Using IronPDF</h1>
        {!session && <LoginButton />}
        {session && (
          <>
            <p className="w-full text-center">
              <span className="px-4 text-xl border-gray-500">
                You are logged in enter URL to convert to PDF:
              </span>
              <input
                className="border border-gray-700 w-1/4"
                onChange={handleChange}
                placeholder="Enter URL here..."
              />
            </p>
            <button
              className="rounded-sm bg-blue-800 p-2 m-12 text-xl text-white"
              onClick={generatePdf}
            >
              Generate PDF
            </button>
          </>
        )}
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

import Head from "next/head";
import styles from "../styles/Home.module.css";
import React, { useState, useEffect } from "react";
import { format } from "date-fns";
import LoginButton from "../components/LoginButton";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
  const [text, setText] = useState("");
  const { data: session } = useSession();
  const accessToken = session?.accessToken;
  useEffect(() => {
    const currentDate = new Date();
    const formattedDate = format(currentDate, "MMMM do, yyyy");
    setText(formattedDate);
  }, []);
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf-datefns?f=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error("Error generating PDF:", error);
    }
  };
  const handleChange = (event) => {
    setText(hashids.encode(event.target.value));
    setText(event.target.value);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Next Auth and Generate PDF Using IronPDF</h1>
        {!session && <LoginButton />}
        {session && (
          <>
            <p className="w-full text-center">
              <span className="px-4 text-xl border-gray-500">
                You are logged in enter URL to convert to PDF:
              </span>
              <input
                className="border border-gray-700 w-1/4"
                onChange={handleChange}
                placeholder="Enter URL here..."
              />
            </p>
            <button
              className="rounded-sm bg-blue-800 p-2 m-12 text-xl text-white"
              onClick={generatePdf}
            >
              Generate PDF
            </button>
          </>
        )}
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family:
            Menlo,
            Monaco,
            Lucida Console,
            Liberation Mono,
            DejaVu Sans Mono,
            Bitstream Vera Sans Mono,
            Courier New,
            monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

JAVASCRIPT

Salida del ejemplo de código

Primera página

next-auth NPM(Cómo funciona para los desarrolladores): Figura 4 - Sitio web generado

Página de inicio de sesión

next-auth NPM(Cómo funciona para desarrolladores): Figura 5 - Botón de inicio de sesión con GitHub

Después de iniciar sesión

next-auth NPM(Cómo funciona para desarrolladores): Figura 6 - Página principal de generación de PDF

PDF generado de salida

next-auth NPM(Cómo funciona para desarrolladores): Figura 7 - PDF generado

Licencia IronPDF

IronPDF.

Asegúrese de recordar colocar la clave de licencia que recibe al inicio de su código de esta manera:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

JAVASCRIPT

Conclusión

Al final, NextAuth.js simplifica el proceso de añadir autenticación a tus aplicaciones Next.js. Con soporte para múltiples proveedores y características de seguridad robustas, es una excelente opción para gestionar la autenticación de usuarios. Siempre puedes explorar la documentación de NextAuth.js para configuraciones y características más avanzadas. Además de eso, IronPDF Node.js ofrece sólidas capacidades de generación y manipulación de PDF para su aplicación y se integra bien con el desarrollo de aplicaciones modernas.

SIGUIENTE >
NPM fuse-box (Cómo funciona para desarrolladores)