next-auth NPM (Comment ça marche pour les développeurs)
L'authentification est cruciale pour les applications web modernes, garantissant que les utilisateurs peuvent accéder à leurs données et fonctionnalités de manière sécurisée, tout en fournissant un support d'infrastructure. NextAuth.js est une bibliothèque d'authentification puissante et flexible conçue pour fonctionner de manière transparente avec Next.js. Cet article explorera comment vous pouvez configurer et utiliser NextAuth.js dans un projet Next.js afin de protéger facilement les données des utilisateurs. Nous vous montrerons également comment ce npm peut être incorporé avec d'autres bibliothèques telles que la bibliothèque IronPDF pour une authentification intuitive 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 fournit un moyen flexible et sécurisé d'implémenter 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 sans problème. Avec des fonctionnalités améliorées qui vous permettent de créer vos 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 et des attributs de session personnalisés, vous pouvez 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 une configuration minimale.
- Flexibilité : Prend en charge divers fournisseurs d'authentification, notamment OAuth, email/mot de passe, et plus encore.
- Sécurité : Fonctionnalités de sécurité intégrées pour protéger les données utilisateur de votre propre base de données.
- Extensibilité : Facilement extensible pour répondre aux besoins d'authentification personnalisés.
Commencer avec le npm NextAuth.js
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
npx create-next-app@latest my-next-auth-app
cd my-next-auth-app
Ensuite, installez NextAuth.js :
npm install next-auth
npm install next-auth
Configuration de NextAuth.js
Créez un nouveau fichier pour votre route API pour gérer l'authentification. Dans le répertoire pages/api/auth, créez le fichier [...nextauth].js suivant :
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
// Configuring NextAuth to use GitHub and Google providers for authentication
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, // Secret for encrypting tokens if needed
});
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
import GoogleProvider from 'next-auth/providers/google';
// Configuring NextAuth to use GitHub and Google providers for authentication
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, // Secret for encrypting tokens if needed
});
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 de l'authentification à votre application
Ajoutons maintenant 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"; // Used to determine loading state
return (
<div>
{!session && ( // Render sign-in buttons when session is not active
<>
<button onClick={() => signIn('github')}>Sign in with GitHub</button>
<button onClick={() => signIn('google')}>Sign in with Google</button>
</>
)}
{session && ( // Display user info and sign-out option when session is active
<>
<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"; // Used to determine loading state
return (
<div>
{!session && ( // Render sign-in buttons when session is not active
<>
<button onClick={() => signIn('github')}>Sign in with GitHub</button>
<button onClick={() => signIn('google')}>Sign in with Google</button>
</>
)}
{session && ( // Display user info and sign-out option when session is active
<>
<p>Signed in as {session.user.email}</p>
<button onClick={() => signOut()}>Sign out</button>
</>
)}
</div>
);
};
export default LoginButton;
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é, il affiche des boutons permettant de se connecter en utilisant GitHub ou Google. Si l'utilisateur est authentifié, il affiche un message avec son email 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 routes
Pour protéger les routes et garantir que seuls les utilisateurs authentifiés puissent 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); // Fetch session data server-side
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); // Fetch session data server-side
return {
props: { session },
};
}
export default ProtectedPage;
Explication du code
Le composant ProtectedPage dans une application Next.js utilise NextAuth.js pour restreindre l'accès uniquement aux utilisateurs authentifiés. Il récupère les propriétés de la session utilisateur côté serveur en utilisant getServerSideProps et les passe comme prop 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 lui souhaite la bienvenue en affichant son adresse email. Cette configuration garantit que seuls les utilisateurs connectés peuvent accéder au contenu de la page.
Présentation d'IronPDF
IronPDF est une puissante bibliothèque node.js PDF qui permet aux développeurs de générer et de modifier 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 en format PDF, IronPDF vous couvre.

Fonctionnalités clés
Conversion HTML en PDF
Convertissez le contenu HTML en documents PDF en toute simplicité. Cette fonctionnalité est particulièrement utile pour générer des PDF dynamiques à partir de contenu web.
Conversion URL en PDF
Générez des PDF directement à partir d'URL, vous permettant de capturer le contenu des pages web et de les enregistrer sous forme de fichiers PDF de manière programmatique.
Manipulation de PDF
Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF propose des fonctionnalités telles que l'ajout de pages, la division de documents, et plus.
Sécurité des 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 l'accès non autorisé.
Sortie de haute qualité
Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et du formatage. IronPDF garantit que vos PDF générés maintiennent la fidélité au contenu original.
Compatibilité multiplateforme
IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.
Intégration simple
Intégrez facilement IronPDF dans vos applications Node.js en utilisant son paquet npm. L'API est bien documentée, ce qui facilite l'incorporation des capacités de génération de PDF dans vos projets.
Installation
Pour installer le package IronPDF, utilisez la commande suivante :
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
Générez des documents PDF avec IronPDF et NextAuth.js
Installation des dépendances : Commencez par créer un nouveau projet Next.js (si ce n'est pas déjà 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"
npx create-next-app@latest nextauth-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
Ensuite, naviguez vers votre répertoire de projet :
cd nextauth
cd nextauth
Installez les paquets requis :
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add next-auth
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 backend pour générer le document PDF. Étant donné qu'IronPDF s'exécute uniquement côté serveur, nous devons créer une API à appeler lorsqu'un utilisateur souhaite générer un PDF. Créez un fichier dans le chemin pages/api/pdf.js et ajoutez-y le contenu suivant :
// 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');
// Defining the HTML content for the PDF
let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
content += `<p>Date: ${currentDate}</p>`;
content += `<p>Formatted Date: ${formattedDate}</p>`;
// Convert HTML content to PDF
const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
const data = await pdf.toBuffer(); // Convert the PDF to a buffer for response
res.setHeader("Content-Type", "application/pdf");
res.setHeader(
"Content-Disposition",
"attachment; filename=awesomeIron.pdf"
);
res.send(data); // Send the PDF file as a response
} 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');
// Defining the HTML content for the PDF
let content = "<h1>Demo React Hook Form and Generate PDF Using IronPDF</h1>";
content += `<p>Date: ${currentDate}</p>`;
content += `<p>Formatted Date: ${formattedDate}</p>`;
// Convert HTML content to PDF
const pdf = await IronPdf.HtmlToPdfDocument({ htmlContent: content });
const data = await pdf.toBuffer(); // Convert the PDF to a buffer for response
res.setHeader("Content-Type", "application/pdf");
res.setHeader(
"Content-Disposition",
"attachment; filename=awesomeIron.pdf"
);
res.send(data); // Send the PDF file as a response
} catch (error) {
console.error("Error generating PDF:", error);
res.status(500).end();
}
}
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 en utilisant date-fns, et convertit l'HTML en PDF. Le PDF généré est ensuite retourné en tant que fichier téléchargeable dans la réponse. Cette approche permet une génération dynamique de PDF dans un environnement côté serveur, la rendant 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 développeur comme suit :

Cliquez sur Nouvelle application GitHub et ajoutez les détails de votre site web :

Stockez l'ID de l'application et l'ID client en lieu sûr. Créez ensuite 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 pour gérer l'authentification. Dans le répertoire pages/api/auth, créez un fichier [...nextauth].js comme suit :
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';
// Setting up NextAuth with GitHub provider
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';
// Setting up NextAuth with GitHub provider
export default NextAuth({
providers: [
GitHubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
Et ajoutez un composant appelé LoginButton.js. Qui contiendra ce qui suit :
// components/LoginButton.js
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) { // Display sign-out button and user info when session is active
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return ( // Display sign-in button when not signed in
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
// components/LoginButton.js
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) { // Display sign-out button and user info when session is active
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return ( // Display sign-in button when not signed in
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
Modifiez votre index.js comme suit :
// pages/index.js
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 } from "next-auth/react";
export default function Home() {
const [text, setText] = useState("");
const { data: session } = useSession();
useEffect(() => {
const currentDate = new Date();
const formattedDate = format(currentDate, "MMMM do, yyyy");
setText(formattedDate); // Set initial text state to formatted current date
}, []);
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); // Clean up after downloading
} catch (error) {
console.error("Error generating PDF:", error);
}
};
const handleChange = (event) => {
setText(event.target.value); // Update the text state with input 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>
);
}
// pages/index.js
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 } from "next-auth/react";
export default function Home() {
const [text, setText] = useState("");
const { data: session } = useSession();
useEffect(() => {
const currentDate = new Date();
const formattedDate = format(currentDate, "MMMM do, yyyy");
setText(formattedDate); // Set initial text state to formatted current date
}, []);
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); // Clean up after downloading
} catch (error) {
console.error("Error generating PDF:", error);
}
};
const handleChange = (event) => {
setText(event.target.value); // Update the text state with input 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>
);
}
Sortie pour l'exemple de code
Première page

Page de connexion

Après connexion

PDF généré

Licence IronPDF
Assurez-vous de ne pas oublier de placer la clé de licence que vous recevez au début de votre code comme ceci :
// Adjust paths as necessary depending on how you import IronPDF
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
// Adjust paths as necessary depending on how you import IronPDF
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
Conclusion
En fin de compte, NextAuth.js simplifie le processus d'ajout d'authentification à vos applications Next.js. Avec le support de multiples 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. En plus de cela, 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.




