باز کردن احراز هویت سطح بعدی در Next.js با Next Auth و ماژول TypeScript Augmentation

Next.js یک فریم ورک محبوب React برای ساخت برنامه های تحت وب است. هنگام ساختن ویژگی‌های احراز هویت در Next.js، توسعه‌دهندگان اغلب از NextAuth.js استفاده می‌کنند زیرا راه ساده‌ای برای پیاده‌سازی احراز هویت، مجوز و مدیریت جلسه ارائه می‌دهد. NextAuth.js از انواع ارائه دهندگان احراز هویت مانند Google، Facebook، Twitter و غیره پشتیبانی می کند.

در برخی موارد، توسعه دهندگان ممکن است بخواهند عملکرد اشیاء User و Session ارائه شده توسط NextAuth.js را گسترش دهند. خوشبختانه، تقویت ماژول TypeScript به ما این امکان را می دهد که این کار را انجام دهیم.

تقویت ماژول TypeScript راهی است در حال گسترش را انواع از یک موجود مدول. در مورد ما، ما از تقویت ماژول برای اضافه کردن فیلدهای اضافی به اشیاء User و Session ارائه شده توسط NextAuth.js استفاده خواهیم کرد.

مرحله 1: یک رابط کاربری سفارشی و Session ایجاد کنید

شما باید یک رابط سفارشی برای اشیاء User و Session خود ایجاد کنید. این به شما امکان می دهد با استفاده از تقویت ماژول TypeScript فیلدهای اضافی را به اشیا اضافه کنید.

یک فایل جدید در ریشه پروژه خود به نام ایجاد کنید next-auth.d.ts. این فایل شامل سفارشی خواهد بود User و Session رابط ها کد زیر را به فایل اضافه کنید:

import NextAuth from "next-auth"

declare module "next-auth" {
  interface User {
    name: string
  }

  interface Session {
    user: {
      name: string
    }
  }
}

در این مثال، ما یک فیلد نام به هر دو شی User و Session اضافه می کنیم. می توانید هر فیلد اضافی را که نیاز دارید اضافه کنید.

مرحله 2: ارائه دهنده احراز هویت خود را به روز کنید

اکنون که رابط کاربری و Session سفارشی خود را تعریف کرده‌اید، باید ارائه‌دهنده احراز هویت خود را به‌روزرسانی کنید تا فیلدهای جدید را شامل شود.

در شما [...nextauth].ts فایل، کد زیر را به شی گزینه اضافه کنید:

import NextAuth from 'next-auth';
import type { NextAuthOptions } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { signIn } from '@/services/auth';

const MINUTE = 60;
const HOUR = 60 * MINUTE;

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      credentials: {},
      async authorize(credentials, req) {
        const { email, password, tenant } = credentials as {
          email: string;
          password: string;
        };
        const { user, token, error } = await signIn(
          { email, password }
        );
        if (user) {
          return {
            id: +user.id,
            name:
              `${user.firstName} ${user.lastName}`,
            email: user.email,
            jwt: token,
          };
        }
        if (error) {
          throw new Error(error);
        }
        return null;
      },
    }),
  ],
  jwt: {
    secret: process.env.NEXTAUTH_SECRET,
  },
  session: {
    maxAge: 8 * HOUR, // 8 hours
  },
  pages: {
    signIn: '/login',
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = +user.id;
        token.jwt = user.jwt;
        token.name = user.name;
        token.email = user.email;
      }
      return token;
    },
    session: async ({ session, token }) => {
      session.user.id = token.id;
      session.jwt = token.jwt;
      session.user.name = token.name;
      session.user.email = token.email;
      return session;
    },
  },
};

export default NextAuth(authOptions);

در این مثال، ما یک شی callbacks را به شی گزینه اضافه می کنیم. این شی شامل یک تابع جلسه است که هنگام ایجاد یک جلسه جدید فراخوانی می شود. در تابع جلسه، ما در حال اضافه کردن name فیلد به شی کاربر در جلسه.

مرحله 3: از فیلدهای سفارشی در برنامه خود استفاده کنید

اکنون که فیلدهای سفارشی را به اشیاء User و Session خود اضافه کرده اید، می توانید از آنها در برنامه خود استفاده کنید. در اینجا مثالی از نحوه استفاده از فیلد نام در کامپوننت React آورده شده است:

import { useSession } from "next-auth/react"

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

  return (
    <div>
      <h1>Welcome, {session?.user.name ?? "guest"}!</h1>
    </div>
  )
}

در این مثال، ما از قلاب useSession برای دریافت شی جلسه کاربر استفاده می‌کنیم. کد خوشامدگویی را نشان می‌دهد که در صورت وارد شدن به سیستم، نام کاربر یا اگر وارد نشده است “مهمان” را نشان می‌دهد. ?. عملگر برای دسترسی ایمن به ویژگی نام شی کاربر در شی جلسه استفاده می شود. اگر جلسه تعریف نشده باشد یا کاربر تعریف نشده باشد، ?? اپراتور مقدار بازگشتی “مهمان” را ارائه می دهد.