AIDE SUR LES NœUDS

next-auth NPM (Comment ça fonctionne pour les développeurs)

Publié décembre 15, 2024

Introduction

L'authentification est essentielle pour les applications web modernes, garantissant que les utilisateurs peuvent accéder en toute sécurité à leurs données et fonctionnalités, et offre un soutien d'infrastructure. NextAuth.js est une bibliothèque d'authentification puissante et flexible conçue pour fonctionner parfaitement avec Next.js. Cet article explorera comment configurer et utiliser NextAuth.js dans un projet Next.js afin que vous puissiez protéger les données des utilisateurs facilement. Nous vous montrerons également comment cet npm peut être intégré à d'autres bibliothèques telles que la bibliothèque IronPDF pour une authentification intuitive et sans état pour vos projets.

Qu'est-ce que NextAuth.js ?

NextAuth.js est une bibliothèque d'authentification open-source pour les applications Next.js qui offre un moyen flexible et sécurisé de mettre en œuvre l'authentification dans les applications web. Avec NextAuth.js, les développeurs peuvent facilement intégrer l'authentification dans leurs projets Next.js sans avoir à gérer les complexités de l'authentification des utilisateurs et de la gestion des sessions.

Le package est hautement configurable, permettant aux développeurs de personnaliser les flux d'authentification, de sécuriser les routes API et de gérer les sessions utilisateur de manière fluide. Avec des fonctionnalités améliorées qui vous permettent de créer vos propres procédures pour gérer l'accès aux comptes, chiffrer et décoder les JSON Web Tokens, et établir des politiques de sécurité des cookies sur mesure ainsi que des attributs de session, ce qui vous permet de réguler l'accès aux comptes et la fréquence de vérification des sessions.

Pourquoi choisir NextAuth.js ?

NextAuth.js offre plusieurs avantages :

Facilité d'utilisation : Installation simple avec un minimum de configuration.
Flexibilité : Prend en charge divers fournisseurs d'authentification, y compris OAuth, email/mot de passe, et plus encore.
Sécurité : Fonctions de sécurité intégrées pour protéger les données des utilisateurs dans votre propre base de données.
Extensibilité : Facilement extensible pour répondre aux besoins d'authentification personnalisés.

Commencer avec le npm Next Auth

Tout d'abord, créons un nouveau projet Next.js. Ouvrez votre terminal et exécutez :

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

Ensuite, installez NextAuth.js :

npm install next-auth

Configuration de NextAuth.js

Créez un nouveau fichier pour votre route API afin de gérer l'authentification. Dans le répertoire 'pages/api/auth', créez ce qui suit[...nextauth]fichier .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 d'environnement

Créez un fichier '.env.local' à la racine de votre projet pour stocker vos variables d'environnement :

// 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

Ajout d'authentification à votre application

Maintenant, ajoutons l'authentification à votre application. Créez un bouton de connexion et un composant de profil pour afficher les informations de l'utilisateur.

// 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

Explication du code

Le composant LoginButton gère l'authentification des utilisateurs dans une application Next.js en utilisant NextAuth.js. Il utilise le hook useSession pour déterminer si un utilisateur est connecté. Si l'utilisateur n'est pas authentifié, des boutons s'affichent lui permettant de se connecter avec GitHub ou Google. Si l'utilisateur est authentifié, un message s'affiche avec son e-mail et un bouton pour se déconnecter. Ce composant fournit une interface simple pour gérer les actions de connexion et de déconnexion des utilisateurs en manipulant un objet session.

Protection des itinéraires

Pour protéger les routes et s'assurer que seuls les utilisateurs authentifiés peuvent accéder à certaines pages, utilisez la fonction 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

Explication du code

Le composant ProtectedPage dans une application Next.js utilise NextAuth.js pour restreindre l'accès aux seuls utilisateurs authentifiés. Il récupère les propriétés de session de l'utilisateur côté serveur en utilisant getServerSideProps et les passe comme propriété au composant. Si l'utilisateur n'est pas authentifié, la page affiche un message indiquant que l'authentification est requise. Si l'utilisateur est authentifié, il le salue en affichant son adresse e-mail. Cette configuration garantit que seuls les utilisateurs connectés peuvent accéder au contenu de la page.

Présentation d'IronPDF

IronPDFest une bibliothèque PDF puissante pour node.js qui permet aux développeurs de générer et d'éditer des PDFs dans leurs projets node.js. Que vous ayez besoin de créer des PDF à partir de HTML, de manipuler des PDF existants ou de convertir des pages web au format PDF, IronPDF a tout prévu.

next-auth NPM(Comment ça fonctionne pour les développeurs) : Figure 1 - IronPDF for Node.js : La bibliothèque PDF pour Node.js

Caractéristiques principales

Conversion de HTML en PDF

Convertissez sans effort du contenu HTML en documents PDF. Cette fonction est particulièrement utile pour générer des PDF dynamiques à partir de contenus web.

Conversion d'URL en PDF

Générez des PDF directement à partir d'URL, ce qui vous permet de capturer le contenu de pages web et de les enregistrer sous forme de fichiers PDF de manière programmatique.

Manipulation des PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF offre des fonctionnalités telles que l'ajout de pages, la division de documents, etc.

Sécurité PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre les accès non autorisés.

Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et de la mise en forme. IronPDF veille à ce que les PDF générés restent fidèles au contenu original.

Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, notamment Windows, Linux et macOS, ce qui le rend adapté à un large éventail d'environnements de développement.

Intégration simple

Intégrez facilement IronPDF à vos applications Node.js à l'aide de son package npm. L'API est bien documentée, ce qui facilite l'intégration des capacités de génération de PDF dans vos projets.

Installation

Pour installer leIronPDFpackage, utilisez la commande suivante :

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

Générez des documents PDF en utilisant IronPDF et NextAuth.js

Installer les dépendances : Tout d'abord, créez un nouveau projet Next.js(si vous ne l'avez pas encore fait) à l'aide de la commande suivante :

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

Ensuite, accédez au répertoire de votre projet :

cd nextauth

Installez les paquets nécessaires :

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

Créer un générateur de PDF

API de génération de PDF : La première étape consiste à créer une API pour générer le document PDF. Étant donné qu'IronPDF fonctionne uniquement côté serveur, nous devons créer une API à appeler lorsque l'utilisateur souhaite générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez le contenu ci-dessous :

// 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

Cela crée une route API Next.js qui génère un fichier PDF en utilisant la bibliothèque IronPDF. Il crée une chaîne HTML contenant un en-tête et la date actuelle, formate la date à l'aide de date-fns, et convertit le HTML en PDF. Le PDF généré est ensuite renvoyé en tant que fichier téléchargeable dans la réponse. Cette approche permet la génération dynamique de PDF dans un environnement côté serveur, ce qui la rend utile pour créer des rapports, des factures ou d'autres documents à la volée.

Ajoutons maintenant une connexion GIT à notre site web frontal en utilisant Next-Auth. Pour cela, nous devons obtenir l'ID Git de l'utilisateur et le secret. Connectez-vous à votre compte Git et accédez aux paramètres du développeur comme suit :

next-auth NPM(Comment ça fonctionne pour les développeurs) : Figure 2 - Où trouver les paramètres développeur pour Git

Cliquez sur New GitHub App et ajoutez les détails de votre site web :

next-auth NPM(Comment ça fonctionne pour les développeurs) : Figure 3 - Ajouter les détails du site web dans GitHub

Stockez l'ID d'application et l'ID client en lieu sûr. Ensuite, créez un fichier .env.local à la racine de votre projet pour stocker vos variables d'environnement :

// 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

Créez un nouveau fichier pour votre route API afin de gérer l'authentification. Dans le répertoire pages/api/auth, créez un [...nextauth]fichier .js comme suit :

// 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

Et ajoutez un composant appelé LoginButton.js. Qui contiendra les éléments suivants :

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

Modifiez votre index.js comme ci-dessous

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

Sortie pour l'exemple de code

Première page

next-auth NPM(Comment cela fonctionne pour les développeurs) : Figure 4 - Site web généré

Page de connexion

next-auth NPM(Comment ça fonctionne pour les développeurs) : Figure 5 - Bouton de connexion avec GitHub

Après connexion

next-auth NPM(Comment cela fonctionne pour les développeurs) : Figure 6 - Page web principale de génération de PDF

PDF généré en sortie

next-auth NPM(Comment ça fonctionne pour les développeurs) : Figure 7 - PDF généré

Licence d'IronPDF

IronPDF.

N'oubliez pas de placer la clé de licence que vous recevez au début de votre code comme ceci :

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

Conclusion

À la fin, NextAuth.js simplifie le processus d'ajout d'authentification à vos applications Next.js. Avec le support de plusieurs fournisseurs et des fonctionnalités de sécurité robustes, c'est un excellent choix pour gérer l'authentification des utilisateurs. Vous pouvez toujours explorer la documentation de NextAuth.js pour des configurations et fonctionnalités plus avancées. De plus, IronPDF Node.js offre des capacités robustes de génération et de manipulation de PDF à votre application et s'intègre bien au développement d'applications modernes.

SUIVANT >
NPM fuse-box (Comment ça marche pour les développeurs)