یکی از رایجترین چالشها در توسعه اپلیکیشنهای وب، پیادهسازی سیستم احراز هویت است. next-auth یک کتابخانه قدرتمند برای مدیریت احراز هویت در برنامههای Next.js محسوب میشود. در این مقاله قصد داریم تا نحوه ادغام next-auth با App Router در Next.js را باهم بررسی کنیم.
پیش از شروع، لازم است به این نکته توجه داشته باشیم که next-auth یک ارائهدهنده سرویس احراز هویت نیست؛ بلکه یک کتابخانه برای مدیریت احراز هویت است. این بدان معناست که برای استفاده از آن، باید از ارائهدهندههای third party (مانند GitHub، Google، Facebook یا Apple) استفاده کنیم یا یک آداپتور پایگاه داده برای احراز هویت کاربران خود پیادهسازی نماییم.
در ادامه، نحوه ادغام next-auth با GitHub را به عنوان یک نمونه عملی بررسی خواهیم کرد.
برای شروع، نیاز به دریافت یک توکن OAuth از GitHub داریم. برای انجام این کار، مراحل زیر را دنبال میکنیم:
Developer Settings
در صفحه Settings
GitHub میرویم.OAuth Apps
کلیک کرده و سپس گزینه Register a new application
را انتخاب میکنیم.http://localhost:3000/
را در قسمت Homepage URL
قرار میدهیم.http://localhost:3000/api/auth/callback/github
را در قسمت Authorization callback URL
وارد میکنیم.Register application
کلیک میکنیم.پس از ثبت اپلیکیشن، یک Client ID دریافت خواهیم کرد که باید آن را در یک فایل .env
در پروژه Next.js خود ذخیره کنیم. همچنین، کلید Client Secret را دریافت کرده و در همان فایل .env
با نامهای زیر قرار میدهیم:
GITHUB_ID=your-client-id GITHUB_SECRET=your-client-secre
اکنون، باید 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 را نصب و پیکربندی نمودیم و در نهایت، یک کامپوننت برای ورود و خروج کاربران طراحی کردیم. با انجام این مراحل، اکنون یک سیستم احراز هویت کامل و کاربردی در پروژه خود داریم.