Nachrichtensymbol
Zum Fußzeileninhalt springen
  1. IronPDF for Node.js
  2. IronPDF für den Node.js Blog
  3. Node-Hilfe
  4. next-auth NPM
NODE-HILFE

next-auth NPM (Wie es für Entwickler funktioniert)

Darrius Serrant
Darrius Serrant
Aktualisiert:

Authentifizierung ist entscheidend für moderne Webanwendungen, um sicherzustellen, dass Benutzer sicher auf ihre Daten und Funktionen zugreifen können und Infrastrukturunterstützung bereitgestellt wird. NextAuth.js ist eine leistungsstarke und flexible Authentifizierungsbibliothek, die nahtlos mit Next.js funktioniert. Dieser Artikel wird erläutern, wie Sie NextAuth.js in ein Next.js-Projekt einrichten und verwenden können, um Benutzerdaten einfach zu schützen. Wir zeigen Ihnen auch, wie dieses npm mit anderen Bibliotheken wie der IronPDF-Bibliothek für eine intuitive zustandslose Authentifizierung in Ihren Projekten integriert werden kann.

Was ist NextAuth.js?

NextAuth.js ist eine Open-Source-Authentifizierungsbibliothek für Next.js-Anwendungen, die eine flexible und sichere Möglichkeit bietet, Authentifizierung in Web-Apps zu implementieren. Mit NextAuth.js können Entwickler Authentifizierung leicht in ihre Next.js-Projekte integrieren, ohne die Komplexität der Benutzerauthentifizierung und Sitzungsverwaltung managen zu müssen.

Das Paket ist hoch konfigurierbar und ermöglicht es Entwicklern, Authentifizierungsabläufe anzupassen, API-Routen zu sichern und Benutzersitzungen nahtlos zu verwalten. Mit erweiterten Funktionen, die es Ihnen ermöglichen, eigene Verfahren zur Verwaltung des Zugriffs auf Konten zu erstellen, JSON-Web-Tokens zu verschlüsseln und zu decodieren und benutzerdefinierte Sicherheitsrichtlinien für Cookies und Sitzungsattribute zu etablieren, die es Ihnen erlauben, den Zugriff auf Konten und die Häufigkeit der Sitzungsüberprüfung zu regulieren.

Warum NextAuth.js wählen?

NextAuth.js bietet mehrere Vorteile:

  • Benutzerfreundlichkeit: Einfache Einrichtung mit minimalem Konfigurationsaufwand.
  • Flexibilität: Unterstützt verschiedene Authentifizierungsanbieter, darunter OAuth, E-Mail/Passwort und mehr.
  • Sicherheit: Integrierte Sicherheitsfunktionen zum Schutz der Benutzerdaten in Ihrer eigenen Datenbank.
  • Erweiterbarkeit: Lässt sich problemlos an individuelle Authentifizierungsanforderungen anpassen.

Erste Schritte mit dem NextAuth.js npm

Erstellen wir zuerst ein neues Next.js-Projekt. Öffnen Sie das Terminal und führen Sie aus:

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
SHELL

Installieren Sie NextAuth.js:

npm install next-auth
npm install next-auth
SHELL

NextAuth.js einrichten

Erstellen Sie eine neue Datei für Ihre API-Route zur Handhabung der Authentifizierung. Erstellen Sie im Verzeichnis pages/api/auth die folgende Datei [...nextauth].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';

// 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
});
JAVASCRIPT

Umgebungsvariablen

Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei namens .env.local, um Ihre Umgebungsvariablen zu speichern:

# 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

Hinzufügen der Authentifizierung zu Ihrer App

Fügen wir nun Authentifizierung zu Ihrer Anwendung hinzu. Erstellen Sie eine Login-Schaltfläche und eine Profilkomponente, um Benutzerdaten anzuzeigen.

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

Erklärung des Codes

Die LoginButton-Komponente handhabt die Benutzerauthentifizierung in einer Next.js-Anwendung unter Verwendung von NextAuth.js. Sie verwendet den useSession-Hook, um festzustellen, ob ein Benutzer angemeldet ist. Wenn der Benutzer nicht authentifiziert ist, werden Schaltflächen angezeigt, mit denen er sich über GitHub oder Google anmelden kann. Wenn der Benutzer authentifiziert ist, wird eine Nachricht mit seiner E-Mail-Adresse und einer Schaltfläche zum Abmelden angezeigt. Diese Komponente bietet eine einfache Schnittstelle zur Verwaltung von Benutzeranmeldungen und -abmeldungen über die Manipulation eines Sitzungsobjekts.

Routen schützen

Um Routen zu schützen und sicherzustellen, dass nur authentifizierte Benutzer auf bestimmte Seiten zugreifen können, verwenden Sie die getSession-Funktion von 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;
JAVASCRIPT

Erklärung des Codes

Die ProtectedPage-Komponente in einer Next.js-Anwendung verwendet NextAuth.js, um den Zugriff nur auf authentifizierte Benutzer zu beschränken. Es ruft die Sitzungsinformationen des Benutzers auf der Serverseite mit getServerSideProps ab und übergibt sie als Prop an die Komponente. Wenn der Benutzer nicht authentifiziert ist, zeigt die Seite eine Nachricht an, dass eine Authentifizierung erforderlich ist. Wenn der Benutzer authentifiziert ist, wird er begrüßt, indem seine E-Mail-Adresse angezeigt wird. Dieses Setup stellt sicher, dass nur angemeldete Benutzer auf den Inhalt der Seite zugreifen können.

Einführung in IronPDF

IronPDF ist eine leistungsstarke node.js-PDF-Bibliothek, die Entwicklern ermöglicht, PDFs in ihren node.js-Projekten zu erstellen und zu bearbeiten. Egal, ob Sie PDFs aus HTML erstellen, vorhandene PDFs manipulieren oder Webseiten ins PDF-Format konvertieren müssen, IronPDF hat alles abgedeckt.

next-auth NPM (So funktioniert es für Entwickler): Abbildung 1 - IronPDF for Node.js: Die Node.js PDF-Bibliothek

Wichtige Merkmale

HTML zu PDF Konvertierung

Konvertieren Sie HTML-Inhalte mühelos in PDF-Dokumente. Dieses Feature ist besonders nützlich zur Erzeugung dynamischer PDFs aus Webinhalten.

URL-zu-PDF-Umwandlung

Erzeugen Sie PDFs direkt von URLs, sodass Sie die Inhalte von Webseiten erfassen und als PDF-Dateien programmatisch speichern können.

PDF-Manipulation

Verschmelzen, teilen und manipulieren Sie vorhandene PDF-Dokumente mit Leichtigkeit. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Splitten von Dokumenten und mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden. IronPDF bietet Optionen zum Schutz Ihrer sensiblen Dokumente vor unberechtigtem Zugriff.

Hochwertige Ausgabe

Erzeugen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass Ihre generierten PDFs die Originalinhalte getreu wiedergeben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, einschließlich Windows, Linux und macOS, was es für eine Vielzahl von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF mühelos in Ihre Node.js-Anwendungen mithilfe seines npm-Pakets. Die API ist gut dokumentiert, was es einfach macht, PDF-Erzeugungsfunktionen in Ihre Projekte einzubauen.

Installation

Um das IronPDF Paket zu installieren, verwenden Sie den folgenden Befehl:

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

PDF-Dokumente mit IronPDF und NextAuth.js erzeugen

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls noch nicht geschehen) mit folgendem Befehl:

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"
SHELL

Navigieren Sie als Nächstes in Ihr Projektverzeichnis:

cd nextauth
cd nextauth
SHELL

Installieren Sie die erforderlichen Pakete:

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
SHELL

Einen PDF-Generator erstellen

PDF-Generierungs-API: Der erste Schritt besteht darin, eine Backend-API zur Generierung des PDF-Dokuments zu erstellen. Da IronPDF nur serverseitig läuft, müssen wir eine API erstellen, die aufgerufen wird, wenn ein Benutzer ein PDF generieren möchte. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den folgenden Inhalt hinzu:

// 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();
  }
}
JAVASCRIPT

Dies erstellt eine Next.js-API-Route, die mithilfe der IronPDF-Bibliothek eine PDF-Datei erstellt. Es erstellt einen HTML-String mit einem Header und dem aktuellen Datum, formatiert das Datum mit date-fns und konvertiert das HTML in ein PDF. Das erzeugte PDF wird dann als herunterladbare Datei in der Antwort zurückgegeben. Dieser Ansatz ermöglicht die dynamische PDF-Erstellung in einer serverseitigen Umgebung, was nützlich ist, um Berichte, Rechnungen oder andere Dokumente im Handumdrehen zu erstellen.

Fügen wir nun ein GIT-Login zu unserer Frontend-Website mit Next-Auth hinzu. Hierfür müssen wir die GitID und das Geheimnis des Benutzers abrufen. Melden Sie sich bei Git an und gehen Sie zu den Entwickler-Einstellungen:

next-auth NPM (So funktioniert es für Entwickler): Abbildung 2 – Wo finde ich die Entwicklereinstellungen für Git?

Klicken Sie auf New GitHub App und geben Sie Ihre Website-Details ein:

next-auth NPM (So funktioniert es für Entwickler): Abbildung 3 – Hinzufügen von Website-Details in GitHub

Speichern Sie die App-ID und die Client-ID an einem sicheren Ort. Erstellen Sie anschließend eine Datei namens .env.local im Stammverzeichnis Ihres Projekts, um Ihre Umgebungsvariablen zu speichern:

# 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

Erstellen Sie eine neue Datei für Ihre API-Route zur Handhabung der Authentifizierung. Erstellen Sie im Verzeichnis pages/api/auth eine Datei [...nextauth].js mit folgendem Inhalt:

// 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,
});
JAVASCRIPT

Und fügen Sie eine Komponente mit dem Namen LoginButton.js hinzu. Diese wird Folgendes enthalten:

// 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>
    </>
  )
}
JAVASCRIPT

Ändern Sie Ihren index.js wie folgt:

// 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>
  );
}
JAVASCRIPT

Ausgabe des Code-Beispiels

Erste Seite

next-auth NPM (So funktioniert es für Entwickler): Abbildung 4 - Ausgegebene Website

Login-Seite

next-auth NPM (So funktioniert es für Entwickler): Abbildung 5 - Schaltfläche Mit GitHub anmelden

Nach dem Login

next-auth NPM (So funktioniert es für Entwickler): Abbildung 6 - Hauptwebseite zur PDF-Generierung

Ausgegebenes PDF

next-auth NPM (So funktioniert es für Entwickler): Abbildung 7 - Ausgegebenes PDF

IronPDF-Lizenz

IronPDF.

Stellen Sie sicher, dass Sie den Lizenzschlüssel, den Sie erhalten, am Anfang Ihres Codes wie folgt platzieren:

// 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";
JAVASCRIPT

Abschluss

Am Ende vereinfacht NextAuth.js den Prozess, Authentifizierung zu Ihren Next.js-Anwendungen hinzuzufügen. Mit Unterstützung für mehrere Anbieter und robusten Sicherheitsfunktionen ist es eine ausgezeichnete Wahl, um Benutzerauthentifizierung zu handhaben. Sie können jederzeit die NextAuth.js-Dokumentation für weitergehende Konfigurationen und Funktionen erkunden. Darüber hinaus bietet IronPDF Node.js robuste PDF-Generierungs- und Manipulationsfähigkeiten für Ihre Anwendung und integriert sich gut in die moderne Anwendungsentwicklung.

Darrius Serrant
Darrius Serrant
  Jetzt mit dem Ingenieurteam chatten
Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...

Weiterlesen

Verwandte Artikel

30-Tage-Testversion → Volles Produkt. Keine Grenzen. Keine Karte. Gratis testen

Iron Support Team

Wir sind 24 Stunden am Tag, 5 Tage die Woche online.
Chat
E-Mail
Rufen Sie mich an