Nachrichtensymbol
Zum Fußzeileninhalt springen
  1. IronPDF für 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 minimaler Konfiguration.
  • Flexibilität: Unterstützt verschiedene Authentifizierungsanbieter, einschließlich OAuth, E-Mail/Passwort und mehr.
  • Sicherheit: Eingebaute Sicherheitsmerkmale zum Schutz von Benutzerdaten für Ihre eigene Datenbank.
  • Erweiterbarkeit: Leicht erweiterbar, um benutzerdefinierte Authentifizierungsbedürfnisse zu erfüllen.

Erste Schritte mit dem NextAuth.js npm

Erstellen wir zuerst ein neues Next.js-Projekt. Öffnen Sie Ihr Terminal und führen Sie folgenden Befehl 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 als Nächstes 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 pages/api/auth Verzeichnis die folgende [...nextauth].js Datei:

// 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 eine .env.local Datei im Stammverzeichnis Ihres Projekts, 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 (Wie es für Entwickler funktioniert): Abbildung 1 - IronPDF für 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-Konvertierung

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 zuerst ein neues Next.js-Projekt (falls Sie dies noch nicht getan haben) 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-Erstellungs-API: Der erste Schritt ist das Erstellen einer Backend-API, um das PDF-Dokument zu generieren. 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 die folgenden Inhalte 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 Ihrem Git-Konto an und navigieren Sie zu den Entwickler-Einstellungen, wie unten beschrieben:

next-auth NPM (Wie es für Entwickler funktioniert): Abbildung 2 - Wo die Entwicklereinstellungen für Git zu finden sind

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

next-auth NPM (Wie es für Entwickler funktioniert): Abbildung 3 - Website-Details in GitHub hinzufügen

Speichern Sie die App-ID und die Client-ID an einem sicheren Ort. Erstellen Sie dann eine .env.local Datei 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 pages/api/auth Verzeichnis eine [...nextauth].js Datei wie folgt:

// 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 namens 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 Ihr index.js wie unten:

// 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 (Wie es für Entwickler funktioniert): Abbildung 4 - Ausgegeben Website

Login-Seite

next-auth NPM (Wie es für Entwickler funktioniert): Abbildung 5 - Login-Schaltfläche mit GitHub

Nach dem Login

next-auth NPM (Wie es für Entwickler funktioniert): Abbildung 6 - Haupt-PDF-erzeugende Webseite

Ausgegebenes PDF

next-auth NPM (Wie es für Entwickler funktioniert): 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. Testversion