Altbilgi içeriğine atla
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blogu
  3. Node Yardım
  4. next-auth NPM
NODE YARDıM

next-auth NPM (Geliştiriciler İçin Nasıl Çalışır)

Darrius Serrant
Darrius Serrant
Güncellendi:

Kimlik doğrulama, modern web uygulamaları için kritik öneme sahiptir, kullanıcıların verilerine ve özelliklerine güvenle erişebilmesini sağlar ve altyapı desteği sunar. NextAuth.js, Next.js ile sorunsuz çalışacak şekilde tasarlanmış güçlü ve esnek bir kimlik doğrulama kütüphanesidir. Bu makale, kullanıcı verilerini kolaylıkla koruyarak, bir Next.js projesinde NextAuth.js'nin nasıl kurulup kullanılabileceğini keşfedecektir. Bu npm'in projeleriniz için sezgisel durum bilgisi olmayan kimlik doğrulama için IronPDF kütüphanesi gibi diğer kütüphanelerle nasıl entegre edilebileceğini de göstereceğiz.

NextAuth.js nedir?

NextAuth.js, Next.js uygulamaları için açık kaynaklı bir kimlik doğrulama kütüphanesidir ve web uygulamalarında kimlik doğrulamanın esnek ve güvenli bir şekilde uygulanmasını sağlar. NextAuth.js ile, geliştiriciler Next.js projelerine kullanıcı kimlik doğrulaması ve oturum yönetimi karmaşıklıklarıyla uğraşmadan kolayca kimlik doğrulama entegre edebilir.

Paket, geliştiricilerin kimlik doğrulama akışlarını özelleştirmesine, API yollarını güvence altına almasına ve kullanıcı oturumlarını sorunsuz bir şekilde yönetmesine olanak tanıyan yüksek düzeyde konfigüre edilebilir. Hesaplara erişimi yönetmek, JSON Web Token'ları şifrelemek ve çözmek ve özel çerez güvenlik politikaları ve oturum özelliklerini belirlemek için prosedür oluşturmanıza olanak tanıyan gelişmiş özellikler ile, hesaplara erişimi ve oturum doğrulama sıklığını düzenleyebilirsiniz.

Neden NextAuth.js Seçilmeli?

NextAuth.js birkaç avantaj sunar:

  • Kullanım Kolaylığı: Minimum konfigürasyonla basit kurulum.
  • Esneklik: OAuth, e-posta/şifre ve daha fazlası dahil çeşitli kimlik doğrulama sağlayıcılarını destekler.
  • Güvenlik: Kullanıcı verilerinizi korumak için dahili güvenlik özellikleri.
  • Genişletilebilirlik: Özel kimlik doğrulama ihtiyaçlarına uygun şekilde kolayca genişletilebilir.

NextAuth.js npm ile Başlarken

İlk olarak, yeni bir Next.js projesi oluşturalım. Terminalinizi açın ve çalıştırın:

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

Sonra, NextAuth.js'yi yükleyin:

npm install next-auth
npm install next-auth
SHELL

NextAuth.js Kurulumu

Kimlik doğrulama işlemlerini yönetmek için API yolunuz için yeni bir dosya oluşturun. Bu pages/api/auth dizininde, aşağıdaki [...nextauth].js dosyasını oluşturun:

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

Ortam Değişkenleri

Çevre değişkenlerinizi saklamak için projenizin kök dizininde bir .env.local dosyası oluşturun:

# 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

Uygulamanıza Kimlik Doğrulama Ekleme

Şimdi uygulamanıza kimlik doğrulama ekleyelim. Kullanıcı bilgilerini göstermek için bir giriş düğmesi ve profil bileşeni oluşturun.

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

Kod açıklaması

LoginButton bileşeni, Next.js uygulamasında NextAuth.js kullanarak kullanıcı kimlik doğrulamasını yönetir. Bu, bir kullanıcının oturum açıp açmadığını belirlemek için useSession kancasını kullanır. Kullanıcı kimlik doğrulaması yapılmamışsa, onlara GitHub veya Google kullanarak oturum açma sağlayan düğmeleri gösterir. Kullanıcı kimlik doğrulaması yapılmışsa, onlara e-posta adreslerini içeren bir mesaj ve çıkış yapmaları için bir düğme gösterir. Bu bileşen, bir oturum nesnesini manipüle ederek kullanıcı giriş ve çıkış işlemlerini yönetmek için basit bir arayüz sağlar.

Yolları Koruma

Yolları korumak ve yalnızca kimliği doğrulanmış kullanıcıların belirli sayfalara erişebilmesini sağlamak için NextAuth.js'den getSession fonksiyonunu kullanın.

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

Kod açıklaması

Next.js uygulamasındaki ProtectedPage bileşeni, yalnızca kimliği doğrulanmış kullanıcılarla erişimi sınırlamak için NextAuth.js kullanır. Bu, kullanıcının oturum özelliklerini sunucu tarafında getServerSideProps kullanarak alır ve bileşene bir prop olarak iletir. Kullanıcı kimlik doğrulaması yapılmamışsa, sayfa kimlik doğrulamanın gerekli olduğunu belirten bir mesaj görüntüler. Kullanıcı kimlik doğrulamışsa, onlara e-posta adreslerini göstererek hoş geldiniz der. Bu kurulum, yalnızca oturum açmış kullanıcıların sayfa içeriğine erişebilmesini sağlar.

IronPDF'i Tanıtma

IronPDF, geliştiricilere node.js projelerinde PDF'ler oluşturma ve düzenleme imkanı sunan güçlü bir node.js PDF kütüphanesidir. HTML'den PDF oluşturmanız, mevcut PDF'leri değiştirmeniz veya web sayfalarını PDF formatına dönüştürmeniz gerektiğinde, IronPDF ihtiyaçınızı karşılar.

next-auth NPM (Geliştiriciler için Nasıl Çalışır): Şekil 1 - Node.js için IronPDF: Node.js PDF Kütüphanesi

Temel Özellikler

HTML'den PDF'ye Dönüştürme

HTML içeriğini kolayca PDF belgelerine dönüştürün. Bu özellik, web içeriğinden dinamik PDF'ler üretmek için özellikle kullanışlıdır.

URL'den PDF'e Dönüşüm

Web sayfalarının içeriğini yakalayıp programatik olarak PDF dosyaları olarak kaydedebilmeniz için URL'lerden doğrudan PDF oluşturun.

PDF Manipülasyonu

Mevcut PDF belgelerini kolayca birleştirin, ayırın ve yönetin. IronPDF, sayfa ekleme, belge ayırma gibi işlevler sunar.

PDF Güvenliği

PDF belgelerinizi şifrelerle şifreleyerek veya dijital imzalar uygulayarak güvence altına alın. IronPDF, hassas belgelerinizi yetkisiz erişimden korumak için seçenekler sunar.

Yüksek Kaliteli Çıktı

Metin, resim ve biçimlendirmenin hassas bir şekilde işlendiği yüksek kaliteli PDF belgeleri üretin. IronPDF, oluşturulan PDF'lerin orijinal içeriği korumasını sağlar.

Çapraz Platform Uyumluluğu

IronPDF, Windows, Linux ve macOS dahil olmak üzere çeşitli platformlarla uyumludur, bu da onu geniş bir geliştirme ortamı yelpazesi için uygun kılar.

Basit Entegrasyon

IronPDF'i npm paketi ile Node.js uygulamalarınıza kolayca entegre edin. API iyi belgelenmiştir, bu da projelerinize PDF oluşturma yeteneklerini kolayca eklemenizi sağlar.

Kurulum

IronPDF paketini yüklemek için aşağıdaki komutu kullanın:

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

IronPDF ve NextAuth.js kullanarak PDF Belgeleri Oluşturma

Bağımlılıkları Kurun: İlk olarak, aşağıdaki komutu kullanarak yeni bir Next.js projesi oluşturun (henüz yapmadıysanız):

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

Sonra, proje dizininize gidin:

cd nextauth
cd nextauth
SHELL

Gerekli paketleri yükleyin:

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

PDF Oluşturucu Oluşturun

PDF Oluşturma API'si: İlk adım, PDF belgesini oluşturacak bir arka uç API'si yaratmaktır. IronPDF yalnızca sunucu tarafında çalıştığı için, bir kullanıcının PDF oluşturmak istediğinde çağırabileceği bir API oluşturmamız gerekiyor. Path pages/api/pdf.js konumunda bir dosya oluşturun ve aşağıdaki içerikleri ekleyin:

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

Bu, IronPDF kütüphanesini kullanarak bir PDF dosyası oluşturan bir Next.js API yolu oluşturur. Bir başlık ve mevcut tarihi içeren bir HTML dizesi oluşturur, tarihi date-fns kullanarak biçimlendirir ve HTML'yi bir PDF'ye dönüştürür. Oluşturulan PDF daha sonra yanıt olarak indirilebilir bir dosya olarak geri döndürülür. Bu yaklaşım, sunucu tarafı bir ortamda dinamik PDF oluşturmayı sağlar ve raporlar, faturalar veya diğer belgeleri hızla oluşturmak için yararlıdır.

Şimdi Next-Auth kullanarak ön uç web sitemize bir GIT Giriş ekleyelim. Bunun için, kullanıcının GitID ve sırrını almamız gerekiyor. Git hesabınıza giriş yapın ve aşağıda gösterildiği gibi Geliştirici ayarlarına gidin:

next-auth NPM (Geliştiriciler için Nasıl Çalışır): Şekil 2 - Git için Geliştirici ayarlarının nerede bulunacağını

Yeni GitHub Uygulaması seçeneğine tıklayın ve web sitesi ayrıntılarınızı ekleyin:

next-auth NPM (Geliştiriciler için Nasıl Çalışır): Şekil 3 - GitHub'da web sitesi ayrıntılarının eklenmesi

Uygulama Kimliği ve İstemci Kimliğini güvenli bir yerde saklayın. Ardından çevre değişkenlerinizi saklamak için projenizin kök dizininde bir .env.local dosyası oluşturun:

# 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

Kimlik doğrulama işlemlerini yönetmek için API yolunuz için yeni bir dosya oluşturun. Bu pages/api/auth dizininde, aşağıdaki gibi bir [...nextauth].js dosyası oluşturun:

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

Ve adı LoginButton.js olan bir bileşen ekleyin. Bu, aşağıdakileri içerecektir:

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

Aşağıdaki gibi index.js dosyanızı düzenleyin:

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

Kod Örneği için Çıktı

İlk sayfa

next-auth NPM (Geliştiriciler için Nasıl Çalışır): Şekil 4 - Çıkartılan web sitesi

Giriş sayfası

next-auth NPM (Geliştiriciler için Nasıl Çalışır): Şekil 5 - GitHub ile Giriş Düğmesi

Girişten Sonra

next-auth NPM (Geliştiriciler için Nasıl Çalışır): Şekil 6 - Ana PDF oluşturucu sayfası

Oluşturulan PDF Çıktısı

next-auth NPM (Geliştiriciler için Nasıl Çalışır): Şekil 7 - Çıkartılan PDF

IronPDF Lisansı

IronPDF.

Kodunuzun başında aldığınız Lisans Anahtarını şu şekilde yerleştirmeyi unutmayın:

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

Sonuç

Sonuç olarak, NextAuth.js, Next.js uygulamalarınıza kimlik doğrulama eklemeyi basitleştirir. Çoklu sağlayıcı desteği ve sağlam güvenlik özellikleriyle, kullanıcı kimlik doğrulaması yönetimi için harika bir seçenektir. Her zaman NextAuth.js belgelerini daha gelişmiş yapılandırmalar ve özellikler için keşfedebilirsiniz. Bunun yanı sıra, IronPDF Node.js uygulamanıza sağlam PDF oluşturma ve manipülasyon yetenekleri sağlar ve modern uygulama geliştirme ile iyi entegre olur.

Darrius Serrant
Darrius Serrant
  Mühendislik takımıyla şimdi sohbet edin
Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimleri lisans derecesine sahiptir ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışmaktadır. Küçük yaşlardan itibaren kodlamaya ilgi duyan Darrius, bilişimi hem gizemli hem de erişilebilir buldu ve onu yaratıcılık ve problem çö...

Daha Fazlasını Oku

İlgili Makaleler

30 günlük deneme → Tam ürün. Sınırlama yok. Kart gerekmez. Ücretsiz Deneme Başlat

Iron Destek Ekibi

Haftanın 5 günü, 24 saat çevrimiçiyiz.
Sohbet
E-posta
Beni Ara