Stratégies d’authentification personnalisées
Développez et intégrez des stratégies d’authentification personnalisées pour répondre à des exigences particulières du projet au-delà des bibliothèques existantes.
Stratégies d’authentification personnalisées est une leçon Next.js 15 Fullstack (App Router + Server Actions) gratuite sur CoddyKit. Ceci est la leçon 5 sur 6. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack (App Router + Server Actions), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 6 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Apprends TypeScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 22
- Leçons
- 88
Questions Fréquemment Posées
La leçon « Stratégies d’authentification personnalisées » est-elle gratuite ?
Oui — le texte complet de « Stratégies d’authentification personnalisées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack (App Router + Server Actions), passe à CoddyKit PRO. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 6 leçons au total.
Qu'est-ce que j'apprendrai dans « Stratégies d’authentification personnalisées » ?
Développez et intégrez des stratégies d’authentification personnalisées pour répondre à des exigences particulières du projet au-delà des bibliothèques existantes. Tu pratiques Next.js 15 Fullstack (App Router + Server Actions) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack (App Router + Server Actions) ?
Aucune expérience préalable n'est requise. Next.js 15 Fullstack (App Router + Server Actions) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 5 sur 6.
Combien de temps prend la leçon « Stratégies d’authentification personnalisées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack (App Router + Server Actions) ?
Oui. Chaque leçon Next.js 15 Fullstack (App Router + Server Actions) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Intégrer NextAuth.js
- Mise en œuvre d’une stratégie JWT
- Protéger les routes et les données
- Gardes et rôles
- Stratégies d’authentification personnalisées
- Intégration de Passport.js