Przejdź do treści stopki
  1. IronPDF for Node.js
  2. Blog IronPDF for Node.js
  3. Pomoc Node
  4. next-auth NPM
POMOC NODE

next-auth NPM (jak to działa dla programistów)

Darrius Serrant
Darrius Serrant
Zaktualizowano:

Uwierzytelnianie ma kluczowe znaczenie dla nowoczesnych aplikacji internetowych, zapewniając użytkownikom bezpieczny dostęp do ich danych i funkcji oraz zapewniając wsparcie infrastrukturalne. NextAuth.js to potężna i elastyczna biblioteka uwierzytelniająca zaprojektowana do płynnej współpracy z Next.js. W tym artykule omówimy, jak skonfigurować i używać NextAuth.js w projekcie Next.js, aby z łatwością chronić dane użytkowników. Pokażemy Ci również, jak ten npm można połączyć z innymi bibliotekami, takimi jak biblioteka IronPDF, w celu zapewnienia intuicyjnego uwierzytelniania bezstanowego w Twoich projektach.

Czym jest NextAuth.js?

NextAuth.js to biblioteka uwierzytelniania typu open source dla aplikacji Next.js, która zapewnia elastyczny i bezpieczny sposób wdrażania uwierzytelniania w aplikacjach internetowych. Dzięki NextAuth.js programiści mogą łatwo zintegrować uwierzytelnianie ze swoimi projektami Next.js bez konieczności zajmowania się złożonymi kwestiami związanymi z uwierzytelnianiem użytkowników i zarządzaniem sesjami.

Pakiet jest wysoce konfigurowalny, co pozwala programistom dostosowywać procesy uwierzytelniania, zabezpieczać trasy API oraz płynnie obsługiwać sesje użytkowników. Dzięki ulepszonym funkcjom, które umożliwiają tworzenie procedur zarządzania dostępem do kont, szyfrowanie i dekodowanie tokenów JSON Web Tokens oraz ustanawianie niestandardowych zasad bezpieczeństwa plików cookie i atrybutów sesji, co pozwala regulować dostęp do kont i częstotliwość weryfikacji sesji.

Dlaczego warto wybrać NextAuth.js?

NextAuth.js oferuje kilka korzyści:

  • Łatwość użytkowania: Prosta instalacja z minimalną konfiguracją.
  • Elastyczność: Obsługuje różnych dostawców uwierzytelniania, w tym OAuth, adres e-mail/hasło i inne.
  • Bezpieczeństwo: Wbudowane funkcje bezpieczeństwa chroniące dane użytkowników w Twojej własnej bazie danych.
  • Rozszerzalność: Łatwo rozszerzalny, aby dostosować się do niestandardowych potrzeb w zakresie uwierzytelniania.

Pierwsze kroki z NextAuth.js npm

Najpierw utwórzmy nowy projekt Next.js. Otwórz terminal i uruchom:

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

Następnie zainstaluj NextAuth.js:

npm install next-auth
npm install next-auth
SHELL

Konfiguracja NextAuth.js

Utwórz nowy plik dla swojej trasy API, aby obsługiwać uwierzytelnianie. W katalogu pages/api/auth utwórz następujący plik [...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

Zmienne środowiskowe

Utwórz plik .env.local w katalogu głównym projektu, aby zapisać zmienne środowiskowe:

# 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

Dodawanie uwierzytelniania do aplikacji

Teraz dodajmy uwierzytelnianie do Twojej aplikacji. Utwórz przycisk logowania oraz komponent profilu do wyświetlania informacji o użytkowniku.

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

Wyjaśnienie kodu

Komponent LoginButton obsługuje uwierzytelnianie użytkowników w aplikacji Next.js przy użyciu NextAuth.js. Wykorzystuje hook useSession do określenia, czy użytkownik jest zalogowany. Jeśli użytkownik nie jest uwierzytelniony, wyświetlane są przyciski umożliwiające zalogowanie się za pomocą GitHub lub Google. Jeśli użytkownik jest uwierzytelniony, wyświetla się komunikat z jego adresem e-mail i przyciskiem do wylogowania. Ten komponent zapewnia prosty interfejs do zarządzania działaniami logowania i wylogowywania użytkowników poprzez manipulowanie obiektem sesji.

Ochrona tras

Aby zabezpieczyć trasy i zapewnić, że tylko uwierzytelnieni użytkownicy mają dostęp do określonych stron, użyj funkcji getSession z biblioteki 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

Wyjaśnienie kodu

Komponent ProtectedPage w aplikacji Next.js wykorzystuje NextAuth.js do ograniczenia dostępu wyłącznie do uwierzytelnionych użytkowników. Pobiera właściwości sesji użytkownika po stronie serwera za pomocą getServerSideProps i przekazuje je jako właściwość do komponentu. Jeśli użytkownik nie jest uwierzytelniony, na stronie wyświetla się komunikat informujący, że wymagane jest uwierzytelnienie. Jeśli użytkownik jest uwierzytelniony, witamy go, wyświetlając jego adres e-mail. Ta konfiguracja gwarantuje, że dostęp do treści strony mają wyłącznie zalogowani użytkownicy.

Przedstawiamy IronPDF

IronPDF for Node.js to potężna biblioteka PDF, która pozwala programistom generować i edytować pliki PDF w ich projektach opartych na Node.js. Niezależnie od tego, czy chcesz tworzyć pliki PDF z HTML, edytować istniejące pliki PDF, czy konwertować strony internetowe do formatu PDF, IronPDF spełni Twoje oczekiwania.

next-auth NPM (Jak to działa dla programistów): Rysunek 1 – IronPDF for Node.js: Biblioteka PDF dla Node.js

Najważniejsze cechy

Konwersja HTML do PDF

Z łatwością konwertuj treści HTML na dokumenty PDF. Ta funkcja jest szczególnie przydatna do generowania dynamicznych plików PDF na podstawie treści internetowych.

Konwersja adresów URL do formatu PDF

Generuj pliki PDF bezpośrednio z adresów URL, co pozwala na przechwytywanie treści stron internetowych i zapisywanie ich jako pliki PDF za pomocą kodu.

Manipulacja plikami PDF

Z łatwością scalaj, dziel i edytuj istniejące dokumenty PDF. IronPDF oferuje takie funkcje, jak dodawanie stron, dzielenie dokumentów i wiele innych.

Zabezpieczenia plików PDF

Zabezpiecz swoje dokumenty PDF, szyfrując je hasłami lub stosując podpisy cyfrowe. IronPDF oferuje opcje ochrony poufnych dokumentów przed nieuprawnionym dostępem.

Wysoka jakość tłumaczenia

Tworzenie wysokiej jakości dokumentów PDF z precyzyjnym renderowaniem tekstu, obrazów i formatowania. IronPDF gwarantuje, że wygenerowane pliki PDF zachowują wierność oryginalnej treści.

Kompatybilność międzyplatformowa

IronPDF jest kompatybilny z różnymi platformami, w tym Windows, Linux i macOS, dzięki czemu nadaje się do szerokiego zakresu środowisk programistycznych.

Prosta integracja

Z łatwością zintegruj IronPDF ze swoimi aplikacjami Node.js, korzystając z pakietu npm. API jest dobrze udokumentowane, co ułatwia włączenie funkcji generowania plików PDF do projektów.

Instalacja

Aby zainstalować pakiet IronPDF, użyj następującego polecenia:

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

Generowanie dokumentów PDF przy użyciu IronPDF i NextAuth.js

Zainstaluj zależności: Najpierw utwórz nowy projekt Next.js (jeśli jeszcze tego nie zrobiłeś) za pomocą następującego polecenia:

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

Następnie przejdź do katalogu projektu:

cd nextauth
cd nextauth
SHELL

Zainstaluj wymagane pakiety:

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

Utwórz generator plików PDF

API do generowania plików PDF: Pierwszym krokiem jest stworzenie backendowego API do generowania dokumentów PDF. Ponieważ IronPDF działa wyłącznie po stronie serwera, musimy stworzyć API, które będzie wywoływane, gdy użytkownik zechce wygenerować plik PDF. Utwórz plik w ścieżce pages/api/pdf.js i dodaj poniższą treść:

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

Tworzy to trasę API Next.js, która generuje plik PDF przy użyciu biblioteki IronPDF. Tworzy ciąg HTML zawierający nagłówek i bieżącą datę, formatuje datę przy użyciu funkcji date-fns i konwertuje HTML na PDF. Wygenerowany plik PDF jest następnie zwracany w odpowiedzi jako plik do pobrania. Takie podejście umożliwia dynamiczne generowanie plików PDF w środowisku po stronie serwera, co sprawia, że jest ono przydatne do tworzenia raportów, faktur lub innych dokumentów w locie.

Teraz dodajmy logowanie GIT do naszej strony internetowej przy użyciu Next-Auth. W tym celu musimy uzyskać identyfikator GitID i hasło użytkownika. Zaloguj się na swoje konto Git i przejdź do ustawień programisty, jak pokazano poniżej:

next-auth NPM (Jak to działa dla programistów): Rysunek 2 — Gdzie znaleźć ustawienia programisty dla Git

Kliknij Nowa aplikacja GitHub i dodaj szczegóły swojej witryny:

next-auth NPM (Jak to działa dla programistów): Rysunek 3 – Dodawanie szczegółów strony internetowej w GitHub

Przechowuj identyfikator aplikacji (App ID) i identyfikator klienta (Client ID) w bezpiecznym miejscu. Następnie utwórz plik .env.local w katalogu głównym projektu, aby zapisać zmienne środowiskowe:

# 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

Utwórz nowy plik dla swojej trasy API, aby obsługiwać uwierzytelnianie. W katalogu pages/api/auth utwórz plik [...nextauth].js o następującej treści:

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

I dodaj komponent o nazwie LoginButton.js. Będzie zawierać następujące elementy:

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

Zmodyfikuj index.js zgodnie z poniższym:

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

Wynik dla przykładu kodu

Pierwsza strona

next-auth NPM (Jak to działa dla programistów): Rysunek 4 – Wyświetlona strona internetowa

Strona logowania

next-auth NPM (Jak to działa dla programistów): Rysunek 5 – Przycisk logowania za pomocą GitHub

Po zalogowaniu

next-auth NPM (Jak to działa dla programistów): Rysunek 6 – Główna strona internetowa służąca do generowania plików PDF

Wygenerowany plik PDF

next-auth NPM (Jak to działa dla programistów): Rysunek 7 – Wygenerowany plik PDF

Licencja IronPDF

IronPDF.

Pamiętaj, aby umieścić otrzymany klucz licencyjny na początku kodu w następujący sposób:

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

Wnioski

W rezultacie NextAuth.js upraszcza proces dodawania uwierzytelniania do aplikacji Next.js. Dzięki obsłudze wielu dostawców i solidnym funkcjom bezpieczeństwa jest to doskonały wybór do obsługi uwierzytelniania użytkowników. Więcej informacji na temat zaawansowanych konfiguracji i funkcji można znaleźć w dokumentacji NextAuth.js. Ponadto IronPDF for Node.js zapewnia Twojej aplikacji solidne możliwości generowania i edycji plików PDF oraz dobrze integruje się z nowoczesnym tworzeniem aplikacji.

Darrius Serrant
Darrius Serrant
  Czat z zespołem inżynierów teraz
Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej

Powiązane artykuły

30-dniowy okres próbny → Pełna wersja produktu. Bez ograniczeń. Bez karty. Bezpłatna próba

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie