پیاده‌سازی احراز هویت در Next.js – ثبت‌نام امن، اعتبارسنجی فرم و مدیریت نشست

مبانی احراز هویت در Next.js

احراز هویت شامل سه بخش اصلی است:

• Authentication: تأیید هویت کاربر (مثلاً با ایمیل و رمز عبور)
• Session Management: پیگیری وضعیت ورود کاربر در درخواست‌های مختلف
• Authorization: کنترل دسترسی به مسیرها و داده‌ها

مرحله ۱ – دریافت اطلاعات کاربر

فرمی بسازید که اطلاعات کاربر را به Server Action ارسال کند:

// app/ui/signup-form.tsx
import { signup } from '@/app/actions/auth'

export function SignupForm() {
  return (
    <form action={signup}>
      <input name="name" placeholder="نام" />
      <input name="email" type="email" placeholder="ایمیل" />
      <input name="password" type="password" />
      <button type="submit">ثبت‌نام</button>
    </form>
  )
}

مرحله ۲ – اعتبارسنجی در سرور

از Zod برای تعریف اعتبارسنجی فرم استفاده کنید:

// app/lib/definitions.ts
import * as z from 'zod'

export const SignupFormSchema = z.object({
  name: z.string().min(2).trim(),
  email: z.email().trim(),
  password: z
    .string()
    .min(8)
    .regex(/[a-zA-Z]/)
    .regex(/[0-9]/)
    .regex(/[^a-zA-Z0-9]/)
    .trim(),
})

در Server Action اعتبارسنجی را انجام دهید و در صورت خطا، زودتر بازگردید:

// app/actions/auth.ts
import { SignupFormSchema } from '@/app/lib/definitions'

export async function signup(_, formData) {
  const validated = SignupFormSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
    password: formData.get('password'),
  })

  if (!validated.success) {
    return {
      errors: validated.error.flatten().fieldErrors,
    }
  }

  // ادامه ساخت کاربر...
}

مرحله ۳ – نمایش خطاهای اعتبارسنجی

با استفاده از useActionState خطاها را در فرم نمایش دهید:

// app/ui/signup-form.tsx
'use client'
import { signup } from '@/app/actions/auth'
import { useActionState } from 'react'

export default function SignupForm() {
  const [state, action, pending] = useActionState(signup, undefined)

  return (
    <form action={action}>
      <input name="name" />
      {state?.errors?.name && <p>{state.errors.name}</p>}

      <input name="email" />
      {state?.errors?.email && <p>{state.errors.email}</p>}

      <input name="password" type="password" />
      {state?.errors?.password && (
        <ul>
          {state.errors.password.map((e) => <li key={e}>{e}</li>)}
        </ul>
      )}

      <button disabled={pending}>ثبت‌نام</button>
    </form>
  )
}

مرحله ۴ – ساخت حساب کاربری

رمز عبور را هش کرده و کاربر را در دیتابیس ذخیره کنید:

// app/actions/auth.ts
import bcrypt from 'bcrypt'

export async function signup(_, formData) {
  // اعتبارسنجی...
  const { name, email, password } = validated.data
  const hashedPassword = await bcrypt.hash(password, 10)

  const user = await db.insert(users).values({
    name,
    email,
    password: hashedPassword,
  }).returning({ id: users.id })

  if (!user) {
    return { message: 'خطا در ساخت حساب کاربری.' }
  }

  // TODO: ساخت نشست و ریدایرکت
}

نکات و توصیه‌ها

• برای سادگی و امنیت بیشتر از کتابخانه‌های احراز هویت استفاده کنید
• وجود ایمیل یا نام کاربری تکراری را زودتر بررسی کنید
• برای کاهش تعداد درخواست‌ها از کتابخانه‌هایی مثل use-debounce استفاده کنید
• قبل از تغییر داده‌ها، حتماً مجوز کاربر را بررسی کنید

جمع‌بندی

احراز هویت در Next.js با Server Actions، اعتبارسنجی فرم و مدیریت نشست قابل پیاده‌سازی است. اگرچه ساخت راهکار سفارشی ممکن است، استفاده از کتابخانه‌های معتبر می‌تواند فرآیند را ساده‌تر و امن‌تر کند.