یکی از رایج‌ترین چالش‌ها در توسعه اپلیکیشن‌های وب، پیاده‌سازی سیستم احراز هویت است. next-auth یک کتابخانه قدرتمند برای مدیریت احراز هویت در برنامه‌های Next.js محسوب می‌شود. در این مقاله قصد داریم تا نحوه ادغام next-auth با App Router در Next.js را باهم بررسی کنیم.

Next-Auth چیست؟

پیش از شروع، لازم است به این نکته توجه داشته باشیم که next-auth یک ارائه‌دهنده سرویس احراز هویت نیست؛ بلکه یک کتابخانه برای مدیریت احراز هویت است. این بدان معناست که برای استفاده از آن، باید از ارائه‌دهنده‌های third party (مانند GitHub، Google، Facebook یا Apple) استفاده کنیم یا یک آداپتور پایگاه داده برای احراز هویت کاربران خود پیاده‌سازی نماییم.

در ادامه، نحوه ادغام next-auth با GitHub را به عنوان یک نمونه عملی بررسی خواهیم کرد.

۱-  دریافت توکن OAuth از  GitHub

برای شروع، نیاز به دریافت یک توکن OAuth از GitHub داریم. برای انجام این کار، مراحل زیر را دنبال می‌کنیم:

  1. به بخش Developer Settings در صفحه Settings GitHub می‌رویم.
  2. روی OAuth Apps کلیک کرده و سپس گزینه Register a new application را انتخاب می‌کنیم.
  3. یک نام برای اپلیکیشن خود تعیین می‌نماییم.
  4. مقدار http://localhost:3000/ را در قسمت Homepage URL قرار می‌دهیم.
  5. مقدار http://localhost:3000/api/auth/callback/github را در قسمت Authorization callback URL وارد می‌کنیم.
  6. در نهایت، بر روی Register application کلیک می‌کنیم.

پس از ثبت اپلیکیشن، یک Client ID دریافت خواهیم کرد که باید آن را در یک فایل .env در پروژه Next.js خود ذخیره کنیم. همچنین، کلید Client Secret را دریافت کرده و در همان فایل .env با نام‌های زیر قرار می‌دهیم:

GITHUB_ID=your-client-id
GITHUB_SECRET=your-client-secre

۲- نصب و تنظیم  Next-Auth

اکنون، باید next-auth را در پروژه خود نصب کنیم. برای این کار، از دستور زیر استفاده می‌کنیم:

pnpm add next-auth

برای نصب این پکیج می‌توانیم از هر package managerای (مانند npm یا yarn) استفاده کنیم.

پس از نصب، باید یک API route برای احراز هویت ایجاد کنیم. یک فایل جدید در مسیر /app/api/auth/[...nextauth]/route.ts می‌سازیم و کد زیر را در آن قرار می‌دهیم:

import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

export const options = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID ?? "",
      clientSecret: process.env.GITHUB_SECRET ?? "",
    }),
  ],
};

export const handler = NextAuth(options);

export { handler as GET, handler as POST };import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

export const options = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID ?? "",
      clientSecret: process.env.GITHUB_SECRET ?? "",
    }),
  ],
};

export const handler = NextAuth(options);

export { handler as GET, handler as POST };

۳- اجرای پروژه و تست ورود به سیستم

اکنون، برنامه را مجدداً راه‌اندازی کرده و به مسیر /api/auth/signin می‌رویم. صفحه‌ای برای انتخاب ارائه‌دهنده ورود نمایش داده خواهد شد. با کلیک بر روی GitHub و طی کردن مراحل ورود، در نهایت به صفحه اصلی بازمی‌گردیم و یک session فعال خواهیم داشت.

برای نمایش وضعیت ورود در رابط کاربری، می‌توانیم یک کامپوننت AuthButton ایجاد کنیم:

"use client";
import { signIn, signOut, useSession } from "next-auth/react";

export default function AuthButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        {session?.user?.name} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  );
}

سپس، این کامپوننت را در فایل layout.tsx اضافه می‌کنیم تا کاربران بتوانند به راحتی وارد حساب خود شوند یا از آن خارج شوند. همچنین، اطلاعات کاربر فعلی را می‌توانیم از طریق useSession در کلاینت کامپوننت‌ها یا getServerSession در سرور کامپوننت‌ها دریافت کنیم.

جمع‌بندی

در این مقاله، نحوه ادغام next-auth با App Router در Next.js را بررسی کردیم. ابتدا، یک توکن OAuth در GitHub ساختیم، سپس next-auth را نصب و پیکربندی نمودیم و در نهایت، یک کامپوننت برای ورود و خروج کاربران طراحی کردیم. با انجام این مراحل، اکنون یک سیستم احراز هویت کامل و کاربردی در پروژه خود داریم.