PricingLoginStart free
Next.js 15 Fullstack (App Router + Server Actions) · درس

استراتيجيات المصادقة المخصّصة

طوّر استراتيجيات مصادقة مخصّصة وادمجها لتلبية متطلبات مشاريع محددة تتجاوز المكتبات الحالية

الدرس 5 من 611 خطوة

استراتيجيات المصادقة المخصّصة درس مجاني في Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit. هذا هو الدرس 5 من أصل 6. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack (App Router + Server Actions)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 6 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Why Custom Authentication?

While libraries like NextAuth.js are powerful, sometimes your project needs a unique authentication flow. Custom strategies give you full control over every detail.

  • Handle specific integration requirements.
  • Implement unique authentication flows (e.g., magic links).
  • Gain a deeper understanding of core auth concepts.

This lesson explores building authentication from the ground up using Next.js 15 features.

Core Concepts: Sessions & Cookies

Authentication often relies on sessions to maintain a user's logged-in state across multiple requests. To manage sessions in web applications, we primarily use HTTP cookies.

  • Cookies are small data pieces sent by a server to a browser.
  • The browser stores them and sends them back with subsequent requests.
  • They are crucial for remembering user login status.

Building a Login Form (UI)

Our custom authentication starts with a simple login form. This form captures user credentials (like username and password) and submits them to a Next.js Server Action. Each input needs a name attribute to be accessible in the action.

export default function LoginPage() {
  return (
    <form>
      <h2>Login</h2>
      <label htmlFor="username">Username:</label>
      <input id="username" name="username" type="text" required />

      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />

      <button type="submit">Log In</button>
    </form>
  );
}

Server Action for Login

When the login form is submitted, a Next.js Server Action intercepts the request. This action runs entirely on the server and is responsible for:

  • Validating the submitted username and password.
  • If valid, creating a session (e.g., generating a unique session ID).
  • Setting a secure HTTP-only cookie in the user's browser.
  • Redirecting the user to a protected page.

Code: Login Server Action

This runnable example simulates a Server Action for login. We mock Next.js's cookies() and redirect() to demonstrate how credentials are checked and a session cookie is set.

'use server';

// Mock Next.js APIs for runnable example
const mockCookies = {
  _store: {},
  set: (n, v, o) => {
    mockCookies._store[n] = { v, o };
    console.log(`[MOCK] Cookie: ${n}=${v}`);
  },
  get: (n) => mockCookies._store[n] ? { value: mockCookies._store[n].v } : undefined,
  delete: (n) => {
    delete mockCookies._store[n];
    console.log(`[MOCK] Deleted: ${n}`);
  }
};
const mockRedirect = (path) => {
  console.log(`[MOCK] Redirect to: ${path}`);
  throw new Error(`MOCK_REDIRECT:${path}`);
};

// Actual Server Action logic
export async function login(formData) {
  const username = formData.get('username');
  const password = formData.get('password');
  const users = {'testuser': 'password123'}; // Mock DB

  if (users[username] === password) {
    mockCookies.set('session', 'some_token', { httpOnly: true, maxAge: 3600 });
    mockRedirect('/dashboard');
  } else {
    console.error('Login failed: Invalid credentials');
  }
}

// Main entry point for runnable example
async function main() {
  console.log("--- Test Login Success ---");
  const successForm = new Map([
    ['username', 'testuser'],
    ['password', 'password123']
  ]);
  try { await login(successForm); }
  catch (e) { console.log(e.message); }

  console.log("\n--- Test Login Fail ---");
  const failForm = new Map([
    ['username', 'wrong'],
    ['password', 'pass']
  ]);
  try { await login(failForm); }
  catch (e) { console.log(e.message); }
  console.log("Final cookies:", mockCookies._store);
}
main();

Protecting Routes with Middleware

After a user logs in, we need to ensure they can't access restricted pages without a valid session. Next.js middleware is perfect for this, running before a request is completed.

  • Middleware intercepts requests to certain paths.
  • It checks for the presence and validity of the session cookie.
  • If no valid session, it redirects the user to the login page.

Code: Authentication Middleware

This middleware.js file demonstrates how to protect the /dashboard route by checking for our custom 'session' cookie. Middleware is a Next.js-specific feature and not runnable in a generic JavaScript environment.

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const sessionCookie = request.cookies.get('session');
  const pathname = request.nextUrl.pathname;

  // Define protected routes
  const protectedRoutes = ['/dashboard'];

  if (protectedRoutes.includes(pathname) && !sessionCookie) {
    // Redirect to login if no session
    const loginUrl = new URL('/login', request.url);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next(); // Allow request to proceed
}

// Configure matcher to run middleware on specific paths
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|login).*)'],
};

Logout Mechanism

Providing a way for users to log out securely is crucial. A logout Server Action simply needs to delete the session cookie from the user's browser, effectively ending their session.

Code: Logout Server Action

This runnable example shows a Server Action that deletes the 'session' cookie and redirects the user to the login page, simulating a logout.

'use server';

// Mock Next.js APIs for runnable example
const mockCookies = {
  _store: { 'session': { v: 'active_token' } }, // Simulate active session
  set: (n, v, o) => {
    mockCookies._store[n] = { v, o };
    console.log(`[MOCK] Cookie: ${n}=${v}`);
  },
  get: (n) => mockCookies._store[n] ? { value: mockCookies._store[n].v } : undefined,
  delete: (n) => {
    delete mockCookies._store[n];
    console.log(`[MOCK] Deleted: ${n}`);
  }
};
const mockRedirect = (path) => {
  console.log(`[MOCK] Redirect to: ${path}`);
  throw new Error(`MOCK_REDIRECT:${path}`);
};

// Actual Server Action logic
export async function logout() {
  mockCookies.delete('session');
  mockRedirect('/login');
}

// Main entry point for runnable example
async function main() {
  console.log("--- Before Logout ---");
  console.log("Initial cookies:", mockCookies._store);

  console.log("\n--- Attempting Logout ---");
  try { await logout(); }
  catch (e) { console.log(e.message); }
  console.log("Final cookies:", mockCookies._store);
}
main();

Check Your Understanding

Let's test what you've learned about custom authentication in Next.js.

أجب عليها في الدرس التفاعلي

Recap: Custom Auth Strategies

You've learned how to build a custom authentication strategy in Next.js 15, leveraging powerful server-side features for full control.

  • Understood session management with secure HTTP-only cookies.
  • Implemented login and logout functionality using Next.js Server Actions.
  • Secured application routes using Next.js middleware.

Remember to always prioritize security (encryption, HTTPS, secure cookies) when building custom authentication.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
22
الدروس
88
ابدأ التعلم مجانًاعرض الدورة الكاملة

الأسئلة الشائعة

هل درس «استراتيجيات المصادقة المخصّصة» مجاني؟

نعم — نص درس «استراتيجيات المصادقة المخصّصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack (App Router + Server Actions)، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 6 دروس في المجموع.

ماذا ستتعلم في «استراتيجيات المصادقة المخصّصة»؟

طوّر استراتيجيات مصادقة مخصّصة وادمجها لتلبية متطلبات مشاريع محددة تتجاوز المكتبات الحالية تتمرن على Next.js 15 Fullstack (App Router + Server Actions) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack (App Router + Server Actions)؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 5 من أصل 6.

كم من الوقت يستغرق درس «استراتيجيات المصادقة المخصّصة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack (App Router + Server Actions) هذا؟

نعم. كل درس في Next.js 15 Fullstack (App Router + Server Actions) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. دمج NextAuth.js
  2. تنفيذ استراتيجية JWT
  3. حماية المسارات والبيانات
  4. الحراس والأدوار
  5. استراتيجيات المصادقة المخصّصة
  6. دمج Passport.js
← العودة إلى Next.js 15 Fullstack (App Router + Server Actions)