自定义身份验证策略
针对超出现有库支持范围的特定项目需求，开发并集成自定义身份验证策略
自定义身份验证策略 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。 这是第 5 节课，共 6 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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.
用 AI 导师学习 TypeScript — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 22
- 课程
- 88
常见问题解答
「自定义身份验证策略」课时是免费的吗？
是的 — 「自定义身份验证策略」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 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)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 5 节课，共 6 节。
「自定义身份验证策略」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。