NextAuth به متغیرهای محیطی برای پیکربندی امن وابسته است. به طور پیش فرض، الگوی ما شامل متغیرهای زیر در فایل .env است:

# کلید مخفی احراز هویت
AUTH_SECRET=کلید-مخفی-تو

# URL پایه برای فراخوانی های NextAuth
NEXTAUTH_URL=http://localhost:3000

# ارائه دهنده احراز هویت (گوگل)
GOOGLE_AUTH_CLIENT_ID=کلید-مشتری-گوگل-تو
GOOGLE_AUTH_CLIENT_SECRET=کلید-مخفی-گوگل-تو

# ارائه دهنده احراز هویت (گیت هاب)
GITHUB_AUTH_CLIENT_ID=کلید-مشتری-گیت-هاب-تو
GITHUB_AUTH_CLIENT_SECRET=کلید-مخفی-گیت-هاب-تو

• AUTH_SECRET: یک رشته تصادفی برای رمزگذاری توکن های جلسه استفاده می شود.
• NEXTAUTH_URL: URL پایه برای اپلیکیشن شما، در فراخوانی های بازگشتی استفاده می شود. این را در تولید به روز رسانی کنید تا با دامنه مستقر شده شما مطابقت داشته باشد.
• GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET, GITHUB_CLIENT_ID,GITHUB_CLIENT_SECRET, : اعتبارنامه ها برای یکپارچه سازی با OAuth.

در الگوی ما، پیکربندی NextAuth در فایل auth.config.ts متمرکز شده است که در src/configs/ قرار دارد. این فایل ارائه دهندگان احراز هویت و دستگیره های فراخوانی را برای گسترش ویژگی های جلسه تعریف می کند.

ارائه دهنده اعتبارنامه

ارائه دهنده Credentials اجازه می دهد تا منطق احراز هویت سفارشی را از طریق روش authorize انجام دهید، هنگامی که کاربر وارد می شود، اعتبارنامه ها با استفاده از یک اقدام پشتی validateCredential اعتبار سنجی می شوند. اگر اعتبار سنجی موفق باشد، شیء کاربر بازگردانده می شود؛ در غیر این صورت، null بازگردانده می شود. می توانید منطق اعتبار سنجی کاربر خود را در روش validateCredential پیاده سازی کنید، می تواند یک فراخوانی API یا یک پرس و جو در پایگاه داده باشد.

import type { NextAuthConfig } from "next-auth";
import validateCredential from "../server/actions/user/validateCredential";
import Credentials from "next-auth/providers/credentials";
import Github from "next-auth/providers/github";
import Google from "next-auth/providers/google";

import type { SignInCredential } from "@/@types/auth";

export default {
    providers: [
        ..., // دیگر ارائه دهندگان، مثلا گیت هاب، گوگل
        Credentials({
            async authorize(credentials) {
                /** اعتبارنامه ها را از بک اند اینجا اعتبار سنجی کنید */
                const user = await validateCredential(credentials as SignInCredential)
                if(!user) {
                    return null
                }

                return {
                    id: user.id,
                    name: user.userName,
                    email: user.email,
                    image: user.avatar,
                };
                
            },
        }),
    ],
    callbacks: {
        async session(payload) {
            
            /** ویژگی های کاربر اضافی را اینجا اعمال کنید، برای مثال، ما 'authority' & 'id' را در این بخش اضافه می کنیم */
            return {
                ...payload.session,
                user: {
                  ...payload.session.user,
                  id: payload.token.sub,
                  authority: ['admin', 'user']
                },
            }
        }
    },
} satisfies NextAuthConfig;

یکپارچه سازی OAuth

NextAuth از طیف گسترده ای از ارائه دهندگان OAuth پشتیبانی می کند، می توانید این لینک را برای ارائه دهندگان داخلی بیشتر NextAuth بررسی کنید.

export default {
    providers: [
        Google({
            clientId: process.env.GOOGLE_AUTH_CLIENT_ID,
            clientSecret: process.env.GOOGLE_AUTH_CLIENT_SECRET,
        }),
    ]
}

دسترسی به جلسات در سمت کلاینت و سرور

احراز هویت اغلب مدیریت جلسه را در هر دو محیط کلاینت و سرور نیاز دارد. الگوی ما ابزارهایی برای مدیریت جلسات به صورت هماهنگ در هر دو محیط فراهم می کند.

• سمت کلاینت:
  

  در حالی که NextAuth hook useSession را فراهم می کند، اما مشکلات بازنویسی شناخته شده دارد. برای حل این مشکل، ما hook جلسه سفارشی به نام useCurrentSession را اضافه کرده ایم. این hook به همان صورت اما با نقص کمتر برای مدیریت وضعیت جلسه در سمت کلاینت استفاده می کند.

  import useCurrentSession from '@/utils/hooks/useCurrentSession';
  
  const Component = () => { 
      const { session } = useCurrentSession();
  
      return (
          <div>
              {session ? (
                  <>
                      <h1>خوش آمدید، {session.user.name}!</h1>
                      <p>ایمیل: {session.user.email}</p>
                  </>
              ) : (
                  <p>شما وارد نشده اید.</p>
              )}
          </div>
      );
  };
  
  export default Component

• سمت سرور:
  

  برای عملیات سمت سرور، می توانید از تابع auth() برای بازیابی جزئیات جلسه به صورت امن استفاده کنید. این özellikle زمانی مفید است که شما دسترسی کاربر به برخی مسیرها را محدود می کنید یا قبل از رندر صفحه داده های کاربر را پیش بارگذاری می کنید.

  import { auth } from "@/auth";
  
  export default async function Page() { 
      const session = await auth();
  
      if (!session) {
          // برای کاربران غیرمجاز، بازنویسی یا نمایش خطا
          return <p>برای مشاهده این صفحه باید وارد شده باشید.</p>;
      }
  
      return (
          <div>
              <h1>خوش آمدید، {session.user.name}!</h1>
              <p>ایمیل شما: {session.user.email}</p>
          </div>
      );
  }

حذف احراز هویت

اگر تصمیم گرفتید از NextAuth استفاده نکنید، برای حذف آن از این مراحل پیروی کنید:

1. NextAuth را حذف کنید:
   

   npm uninstall next-auth

2. فایل های مربوط به NextAuth را حذف کنید:
   
   • فایل src/configs/auth.config.ts را حذف کنید.
   • مسیرهای API پویا در pages/api/auth/[...nextauth] را حذف کنید.
   • فایل middleware.ts را بازنشانی یا حذف کنید (اگر محافظت مسیر لازم نیست).
   • همه پیاده سازی های auth() & useCurrentSession() را از کامپوننت های زیر حذف کنید:
     • app/layout.tsx
     • components/template/HorizontalNav.tsx
     • components/template/MobileNav.tsx
     • components/template/SideNav.tsx
     • components/template/UserProfileDropdown.tsx
     • components/template/StackeSideNav.tsx

با پیروی از این مراحل، می توانید NextAuth را از الگوی خود حذف کنید و با روش احراز هویت مورد نظر خود جایگزین کنید.

مستندات رسمی

برای جزئیات بیشتر در مورد استفاده از NextAuth، به مستندات NextAuth.js مراجعه کنید.