カスタム認証戦略
既存のライブラリでは対応できない特定のプロジェクト要件に向けて、カスタム認証戦略を開発・統合します
「カスタム認証戦略」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン5/6です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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.
よくある質問
「カスタム認証戦略」レッスンは無料ですか？
はい。「カスタム認証戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応の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)を演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。