9.8 אותנטיקציה תרגול
תרגול - אותנטיקציה - Authentication¶
תרגיל 1 - הגדרת Auth.js¶
הגדירו מערכת אותנטיקציה בסיסית:
- התקינו Auth.js ו-bcryptjs
- צרו קובץ auth.ts עם Credentials provider
- הגדירו route handler ב-
app/api/auth/[...nextauth]/route.ts - צרו
.env.localעם AUTH_SECRET - ודאו שה-callback של jwt ו-session מעבירים את ה-role
תרגיל 2 - רישום והתחברות¶
צרו דפי רישום והתחברות:
- דף רישום (
/register) עם: שם, אימייל, סיסמה, אישור סיסמה - ולידציה: אימייל תקין, סיסמה מינימום 6 תווים, סיסמאות תואמות
- הצפנת סיסמה עם bcrypt
- דף התחברות (
/login) עם: אימייל וסיסמה - הצגת שגיאות (משתמש קיים, סיסמה שגויה)
- הפניה לדשבורד אחרי התחברות מוצלחת
תרגיל 3 - ניווט מותנה¶
צרו Navbar שמשתנה בהתאם למצב ההתחברות:
- משתמש לא מחובר: קישורים לבית, אודות, התחבר, הירשם
- משתמש מחובר: קישורים לבית, דשבורד, פרופיל, כפתור התנתקות
- הציגו את שם המשתמש
- עשו את ה-Navbar כ-Server Component שמשתמש ב-
auth()
תרגיל 4 - הגנה על נתיבים¶
הגדירו Middleware שמגן על נתיבים:
/dashboard,/settings,/profile- דורשים התחברות/admin- דורש תפקיד admin/login,/register- מפנים לדשבורד אם מחובר- הוסיפו callbackUrl כדי לחזור לדף המקורי אחרי התחברות
תרגיל 5 - פרופיל משתמש¶
צרו דף פרופיל (/profile) עם:
- הצגת פרטי המשתמש (שם, אימייל, תאריך הצטרפות)
- טופס עדכון שם
- טופס שינוי סיסמה (סיסמה נוכחית, סיסמה חדשה, אישור)
- כל העדכונים דרך Server Actions עם בדיקת אותנטיקציה
תרגיל 6 - פאנל ניהול¶
צרו פאנל ניהול (/admin) שנגיש רק למנהלים:
- רשימת כל המשתמשים עם תפקידם
- אפשרות לשנות תפקיד משתמש (user/admin)
- אפשרות למחוק משתמש (עם אישור)
- סטטיסטיקות: מספר משתמשים, חלוקה לפי תפקיד
- כל הפעולות מוגנות - רק admin יכול לבצע
שאלות¶
- מה ההבדל בין אותנטיקציה להרשאה? תנו דוגמה.
- למה חשוב להצפין סיסמאות עם bcrypt ולא לשמור אותן כ-plain text?
- מה ההבדל בין JWT session ל-Database session?
- למה צריך להגן גם על Server Actions ולא רק על דפים?
- מה callbackUrl ולמה הוא חשוב?