HILFE ZUM KNOTENPUNKT

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

Veröffentlicht 15. Dezember 2024
Teilen Sie:

Einführung

Authentifizierung ist entscheidend für moderne Webanwendungen, da sie sicherstellt, dass Benutzer sicher auf ihre Daten und Funktionen zugreifen können und Unterstützung für die Infrastruktur bietet. NextAuth.js ist eine leistungsstarke und flexible Authentifizierungsbibliothek, die nahtlos mit Next.js zusammenarbeitet. Dieser Artikel wird erläutern, wie Sie NextAuth.js in einem Next.js-Projekt einrichten und verwenden können, damit Sie Benutzerdaten mühelos absichern können. Wir werden Ihnen auch zeigen, wie dieses npm mit anderen Bibliotheken wie der IronPDF-Bibliothek für intuitive zustandslose Authentifizierung in Ihre Projekte 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 problemlos Authentifizierung in ihre Next.js-Projekte integrieren, ohne die Komplexität der Benutzer-Authentifizierung und Sitzungsverwaltung verwalten zu müssen.

Das Paket ist hoch konfigurierbar und ermöglicht es Entwicklern, Authentifizierungsabläufe anzupassen, API-Routen abzusichern und Benutzersitzungen nahtlos zu verwalten. Mit erweiterten Funktionen, die es Ihnen ermöglichen, Ihre eigenen Verfahren zur Verwaltung des Zugangs zu Konten zu erstellen, JSON-Web-Tokens zu verschlüsseln und zu entschlüsseln sowie benutzerdefinierte Cookie-Sicherheitsrichtlinien und Sitzungsattribute zu etablieren, was Ihnen erlaubt, den Zugang zu Konten und die Häufigkeit der Sitzungsverifizierung 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 Sicherheitsfunktionen zum Schutz von Benutzerdaten für Ihre eigene Datenbank.
  • Erweiterbarkeit: Leicht erweiterbar, um maßgeschneiderte Authentifizierungsbedürfnisse zu erfüllen.

Erste Schritte mit dem Next Auth npm

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

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

Als nächstes installieren Sie NextAuth.js:

npm install next-auth

Einrichtung von NextAuth.js

Erstellen Sie eine neue Datei für Ihre API-Route zur Handhabung der Authentifizierung. Im Verzeichnis 'pages/api/auth' erstellen Sie Folgendes:[...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';
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

Umgebungsvariablen

Erstellen Sie eine Datei '.env.local' 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 von Authentifizierung zu Ihrer App

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

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

Code-Erklärung

Die LoginButton-Komponente verwaltet die Benutzerauthentifizierung in einer Next.js-Anwendung mit NextAuth.js. Es verwendet den useSession-Hook, um festzustellen, ob ein Benutzer eingeloggt ist. Wenn der Benutzer nicht authentifiziert ist, werden Schaltflächen angezeigt, die es ihm ermöglichen, sich mit GitHub oder Google anzumelden. Wenn der Benutzer authentifiziert ist, wird eine Nachricht mit seiner E-Mail-Adresse und einem Button zum Abmelden angezeigt. Diese Komponente bietet eine einfache Schnittstelle zur Verwaltung von Benutzeranmeldungen und -abmeldungen durch 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 Funktion getSession 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);
  return {
    props: { session },
  };
}
export default ProtectedPage;
JAVASCRIPT

Code-Erklärung

Die ProtectedPage-Komponente in einer Next.js-Anwendung verwendet NextAuth.js, um den Zugriff nur auf authentifizierte Benutzer zu beschränken. Es ruft die Sitzungseigenschaften 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, die darauf hinweist, dass eine Authentifizierung erforderlich ist. Wenn der Benutzer authentifiziert ist, wird er begrüßt, indem seine E-Mail-Adresse angezeigt wird. Diese Einrichtung stellt sicher, dass nur angemeldete Benutzer auf den Inhalt der Seite zugreifen können.

Einführung in IronPDF

IronPDFist 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, bestehende PDFs bearbeiten oder Webseiten in das PDF-Format konvertieren möchten, IronPDF hat alles für Sie.

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

Wesentliche Merkmale

Konvertierung von HTML in PDF

Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

Konvertierung von URL in PDF

Generieren Sie PDFs direkt aus URLs, so dass Sie den Inhalt von Webseiten erfassen und programmgesteuert als PDF-Dateien speichern können.

PDF-Bearbeitung

Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Aufteilen von Dokumenten und vieles mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

Hochwertiger Output

Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine breite Palette von Entwicklungsumgebungen.

Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Einrichtung

Zur Installation derIronPDFVerwenden Sie den folgenden Befehl, um das Paket:

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

Erstellen Sie PDF-Dokumente mit IronPDF und NextAuth.js

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt(falls Sie es noch nicht getan haben) mit dem folgenden Befehl:

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

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd nextauth

Installieren Sie die erforderlichen Pakete:

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

Erstellen Sie einen PDF-Generator

PDF-Erzeugungs-API: Der erste Schritt besteht darin, eine Backend-API zu erstellen, 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 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');
    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

Dies erstellt eine Next.js API-Route, die eine PDF-Datei mit der IronPDF-Bibliothek generiert. Es erstellt einen HTML-String, der eine Kopfzeile und das aktuelle Datum enthält, formatiert das Datum mit date-fns und wandelt das HTML in ein PDF um. Die erzeugte PDF-Datei wird dann als herunterladbare Datei in der Antwort zurückgegeben. Dieser Ansatz ermöglicht die dynamische PDF-Erstellung in einer serverseitigen Umgebung und ist nützlich, um Berichte, Rechnungen oder andere Dokumente spontan zu erstellen.

Lassen Sie uns nun ein GIT-Login zu unserer Frontend-Website mit Next-Auth hinzufügen. Dazu müssen wir die GitID und das Geheimnis des Benutzers erhalten. Melden Sie sich bei Ihrem Git-Konto an und navigieren Sie zu den Entwicklereinstellungen wie unten:

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

Klicken Sie auf Neue GitHub-App und fügen Sie die Details Ihrer Website hinzu:

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

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. Im Verzeichnis pages/api/auth, erstellen Sie eine [...nextauth].js-Datei wie folgt:

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

Und fügen Sie eine Komponente namens LoginButton.js hinzu. Welche Folgendes enthält:

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

Ändern Sie Ihre index.js wie unten.

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

Ausgabe für das Codebeispiel

Erste Seite

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

Anmeldeseite

next-auth NPM(Wie es für Entwickler funktioniert): Abbildung 5 - Anmelden mit GitHub-Button

Nach dem Login

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

Ausgegebene generierte PDF-Datei

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:

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

Schlussfolgerung

Letztendlich vereinfacht NextAuth.js den Prozess der Hinzufügung von Authentifizierung zu Ihren Next.js-Anwendungen. Mit Unterstützung für mehrere Anbieter und robusten Sicherheitsfunktionen ist es eine ausgezeichnete Wahl für die Handhabung der Benutzerautorisierung. Sie können jederzeit die NextAuth.js-Dokumentation für fortgeschrittene Konfigurationen und Funktionen erkunden. Darüber hinaus bietet IronPDF for Node.js Ihrer Anwendung leistungsstarke PDF-Generierungs- und Manipulationsmöglichkeiten und integriert sich gut in die moderne Anwendungsentwicklung.

NÄCHSTES >
NPM fuse-box (Wie es für Entwickler funktioniert)

Sind Sie bereit, loszulegen? Version: 2024.12 gerade veröffentlicht

Kostenlose npm-Installation Lizenzen anzeigen >