הגדרת Auth.js ב-Next.js: ספקים, סשנים והגנה על נתיבים

לעתים קרובות אנו רואים מפתחים שמבזבזים שבועות על הטמעת התחברות חברתית, רק כדי להיתקל בבאגי הידרציה או בדליפות סשן. NextAuth.js (כיום Auth.js) פותר זאת ישירות מהקופסה תוך 1–4 ימים. בניסיון שלנו — 30+ פרויקטים עם ספקים שונים, מ-Google ועד מותאמים אישית. אנו חולקים פתרון מוכן שמגן על היישום שלכם וחוסך בתקציב.

יישומים מודרניים דורשים אימות אמין: OAuth, קישור קסם בדוא"ל, התחברות/סיסמה. אנו משלבים Auth.js v5 עם App Router ו-Edge Runtime, ומבטיחים רינדור מהיר ואבטחה בכל השלבים. בניגוד לפתרונות מותאמים אישית, Auth.js מספק ספקים מוכנים, הגנה אוטומטית מפני CSRF, וניהול סשן באמצעות JWT או סשנים במסד נתונים. בחירת האסטרטגיה תלויה בעומס ובדרישות — אנו עוזרים לקבוע את האפשרות האופטימלית. תוצאה: חיסכון של פי 2–3 בזמן וללא כאבי ראש באבטחה.

לדוגמה, בפרויקט מסחר אלקטרוני אחד שילבנו Auth.js עם Google OAuth וסשנים במסד נתונים. התוצאה: זמן ההתחברות ירד מ-2.5 שניות ל-0.3 שניות בזכות רינדור קצה, וביטלנו לחלוטין פגיעויות CSRF. צוות התמיכה של הלקוח פרס את העדכון תוך יום.

אילו בעיות NextAuth.js פותר?

NextAuth.js מכסה שלוש משימות עיקריות: אבטחת סשן, תמיכה במספר ספקים, ו-hybrid SSR/CSR. סשנים יכולים להיות JWT או סשנים במסד נתונים עם Prisma. ריבוי ספקים: Google, GitHub, קישור קסם בדוא"ל, התחברות/סיסמה — הכל בתצורה אחת. Hybrid SSR/CSR: הסשן זמין גם בשרת וגם בלקוח ללא בקשות נוספות. אנו מגדירים כל אחד מההיבטים הללו עבור פרויקט ספציפי, תוך התחשבות בעומס ובדרישות אבטחה.

כיצד אנו מגדירים Auth.js v5

אנו משתמשים ב-Auth.js v5 עם App Router ו-Edge Runtime. הגדרה ב-auth.ts:

// auth.ts
import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';
import GitHub from 'next-auth/providers/github';
import Credentials from 'next-auth/providers/credentials';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';

export const { handlers, signIn, signOut, auth } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    Google({
      clientId: process.env.AUTH_GOOGLE_ID!,
      clientSecret: process.env.AUTH_GOOGLE_SECRET!,
    }),
    GitHub({
      clientId: process.env.AUTH_GITHUB_ID!,
      clientSecret: process.env.AUTH_GITHUB_SECRET!,
    }),
    Credentials({
      credentials: {
        email: {},
        password: {},
      },
      async authorize(credentials) {
        // find user and verify password
      },
    }),
  ],
  session: {
    strategy: 'database',
  },
  callbacks: {
    async session({ session, user }) {
      session.user.id = user.id;
      return session;
    },
  },
});

חשוב: עבור סשנים במסד נתונים אנו מספקים PrismaAdapter, עבור JWT — לא. Edge Runtime נתמך אוטומטית בעת שימוש ב-App Router.

הגדרת ספקים

הספקים מוגדרים במערך providers. עבור OAuth, יש לציין clientId ו-clientSecret מקונסולת המפתחים. ספק Credentials דורש לוגיקת אימות מותאמת אישית, אך Auth.js מטפל בניהול סשן והגנת CSRF.

הגנת מסלולים עם middleware

// middleware.ts
import { auth } from '@/auth';

export default auth((req) => {
  if (!req.auth) {
    const loginUrl = new URL('/login', req.url);
    loginUrl.searchParams.set('callbackUrl', req.url);
    return Response.redirect(loginUrl);
  }
});

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*']
};

ה-middleware חל על כל המסלולים ב-matcher. זוהי דרך פשוטה להגן על קטעים שלמים ללא שכפול קוד.

JWT או סשנים במסד נתונים: מה לבחור?

הבחירה תלויה בעדיפויות שלכם. אם מהירות ופשטות חשובות — JWT. אם אבטחה ושליטה — סשנים במסד נתונים. ב-70% מהפרויקטים שלנו אנו משתמשים בסשנים במסד נתונים עם Prisma, מכיוון שזה נותן גמישות רבה יותר.

תהליך ולוח זמנים

אינטגרציה בסיסית (OAuth + JWT) אורכת 1–2 ימים. עם סשנים במסד נתונים וקישור קסם — עד 4 ימים. העלות מחושבת בנפרד לכל פרויקט.

טעויות נפוצות במהלך ההטמעה

הטעות הנפוצה ביותר היא משתני סביבה שגויים. // auth.ts import NextAuth from 'next-auth'; import Google from 'next-auth/providers/google'; import GitHub from 'next-auth/providers/github'; import Credentials from 'next-auth/providers/credentials'; import { PrismaAdapter } from '@auth/prisma-adapter'; import { prisma } from '@/lib/prisma'; export const { handlers, signIn, signOut, auth } = NextAuth({ adapter: PrismaAdapter(prisma), providers: [ Google({ clientId: process.env.AUTH_GOOGLE_ID!, clientSecret: process.env.AUTH_GOOGLE_SECRET! }), GitHub({ clientId: process.env.AUTH_GITHUB_ID!, clientSecret: process.env.AUTH_GITHUB_SECRET! }), Credentials({ credentials: { email: {}, password: {} }, async authorize(credentials) { // find user and verify password }, }), ], session: { strategy: 'database' }, callbacks: { async session({ session, user }) { session.user.id = user.id; return session; }, }, }); הוא חובה, אחרת הסשנים לא יוצפנו. בעיה שנייה — שכחת PrismaAdapter עבור סשנים במסד נתונים, מה שגורם לסשנים לא להישמר. שלישית — חוסר טיפוסים לסשן, מה שמוביל לשגיאות TypeScript בזמן קומפילציה. בכל פרויקט אנו בודקים נקודות אלו במהלך בדיקת קוד.

למה להפקיד אימות בידי אנשי מקצוע?

אנו עוסקים בפיתוח אתרים כבר 5+ שנים והטמענו אימות עבור 30+ פרויקטים של Next.js. אנו מבטיחים פעולה יציבה ותמיכה לאחר ההטמעה. צרו קשר לייעוץ לפרויקט שלכם — אנו נבחר את התצורה האופטימלית וניישם אימות תוך 1–4 ימים. הזמינו אינטגרציה של Auth.js וקבלו פתרון מוכן עם תיעוד ותמיכה.

תכונות נוספות

• ספק דוא"ל: קישור קסם ללא סיסמה — נוח ומאובטח.
• Server Actions: בדיקות הרשאות ישירות בשרת.
• דפי התחברות מותאמים אישית: העיצוב שלכם תחת המותג שלכם.

איתנו אתם מקבלים לא רק קוד, אלא ארכיטקטורה מוכחת שעומדת בעומס ומתרחבת בקלות.