Next.js 15 Fullstack (App Router + Server Actions) · Урок

Пользовательские стратегии аутентификации

Разрабатывайте и интегрируйте пользовательские стратегии аутентификации для особых требований проекта, не поддерживаемых существующими библиотеками

«Пользовательские стратегии аутентификации» — бесплатный урок 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.

Часто задаваемые вопросы

Урок «Пользовательские стратегии аутентификации» бесплатный?

Да — полный текст урока «Пользовательские стратегии аутентификации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 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) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Интеграция NextAuth.js
Реализация стратегии JWT
Защита маршрутов и данных
Стражи и роли
Пользовательские стратегии аутентификации
Интеграция Passport.js

← Назад к Next.js 15 Fullstack (App Router + Server Actions)