Strategi Autentikasi Khusus
Kembangkan dan integrasikan strategi autentikasi khusus untuk kebutuhan proyek tertentu di luar pustaka yang tersedia.
Strategi Autentikasi Khusus adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 5 dari 6. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 6 pelajaran total.
Mengapa Menggunakan Autentikasi Khusus?
Meskipun pustaka seperti NextAuth.js sangat bermanfaat, terkadang proyek Anda memerlukan alur autentikasi yang unik. Strategi khusus memberi Anda kendali penuh atas setiap detail.
- Menangani persyaratan integrasi tertentu.
- Menerapkan alur autentikasi unik (misalnya, tautan ajaib).
- Memperdalam pemahaman tentang konsep inti autentikasi.
Pelajaran ini membahas pembuatan autentikasi dari awal menggunakan fitur Next.js 15.
Konsep Inti: Sesi & Kuki
Autentikasi sering mengandalkan sesi untuk mempertahankan status masuk pengguna di berbagai permintaan. Untuk mengelola sesi dalam aplikasi web, kita terutama menggunakan kuki HTTP.
- Kuki adalah potongan data kecil yang dikirim oleh server ke peramban.
- Peramban menyimpannya dan mengirimkannya kembali bersama permintaan berikutnya.
- Kuki sangat penting untuk mengingat status masuk pengguna.
Membuat Formulir Masuk (UI)
Autentikasi khusus kita dimulai dengan formulir masuk sederhana. Formulir ini mengambil kredensial pengguna (seperti nama pengguna dan kata sandi), lalu mengirimkannya ke Aksi Server Next.js. Setiap masukan memerlukan atribut name agar dapat diakses dalam aksi tersebut.
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>
);
}Aksi Server untuk Masuk
Saat formulir masuk dikirimkan, sebuah Aksi Server Next.js mencegat permintaan tersebut. Aksi ini berjalan sepenuhnya di server dan bertanggung jawab untuk:
- Memvalidasi nama pengguna dan kata sandi yang dikirimkan.
- Jika valid, membuat sesi (misalnya, menghasilkan ID sesi yang unik).
- Menyetel kuki HTTP-only yang aman di peramban pengguna.
- Mengalihkan pengguna ke halaman yang dilindungi.
Kode: Aksi Server Masuk
Contoh yang dapat dijalankan ini menyimulasikan Aksi Server untuk masuk. Kita membuat tiruan cookies() dan redirect() milik Next.js untuk menunjukkan cara memeriksa kredensial dan menyetel kuki sesi.
'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();Melindungi Rute dengan Middleware
Setelah pengguna masuk, kita perlu memastikan bahwa mereka tidak dapat mengakses halaman terbatas tanpa sesi yang valid. Middleware Next.js sangat cocok untuk ini karena berjalan sebelum permintaan selesai.
- Middleware mencegat permintaan ke jalur tertentu.
- Middleware memeriksa keberadaan dan validitas kuki sesi.
- Jika tidak ada sesi yang valid, middleware mengalihkan pengguna ke halaman masuk.
Kode: Middleware Autentikasi
File middleware.js ini menunjukkan cara melindungi rute /dashboard dengan memeriksa kuki 'session' khusus kita. Middleware adalah fitur khusus Next.js dan tidak dapat dijalankan dalam lingkungan JavaScript umum.
// 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).*)'],
};Mekanisme Keluar
Menyediakan cara bagi pengguna untuk keluar dengan aman sangatlah penting. Aksi Server untuk keluar cukup menghapus kuki sesi dari peramban pengguna, sehingga sesi mereka berakhir.
Kode: Aksi Server untuk Keluar
Contoh yang dapat dijalankan ini menunjukkan Aksi Server yang menghapus kuki 'session' dan mengalihkan pengguna ke halaman masuk, sehingga menyimulasikan proses keluar.
'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();Periksa Pemahaman Anda
Mari uji pemahaman Anda tentang autentikasi khusus di Next.js.
Ringkasan: Strategi Autentikasi Khusus
Anda telah mempelajari cara membuat strategi autentikasi khusus di Next.js 15 dengan memanfaatkan fitur sisi server yang andal untuk memperoleh kendali penuh.
- Memahami pengelolaan sesi dengan kuki HTTP-only yang aman.
- Menerapkan fungsi masuk dan keluar menggunakan Aksi Server Next.js.
- Melindungi rute aplikasi menggunakan middleware Next.js.
Ingatlah untuk selalu memprioritaskan keamanan (enkripsi, HTTPS, kuki aman) saat membuat autentikasi khusus.
Belajar TypeScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Strategi Autentikasi Khusus” gratis?
Ya — teks lengkap “Strategi Autentikasi Khusus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 6 pelajaran total.
Apa yang akan aku pelajari di “Strategi Autentikasi Khusus”?
Kembangkan dan integrasikan strategi autentikasi khusus untuk kebutuhan proyek tertentu di luar pustaka yang tersedia. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?
Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 5 dari 6.
Berapa lama pelajaran “Strategi Autentikasi Khusus” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?
Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengintegrasikan NextAuth.js
- Implementasi Strategi JWT
- Melindungi Rute & Data
- Guard dan Peran
- Strategi Autentikasi Khusus
- Integrasi Passport.js