0Pricing
React Academy · Pelajaran

Menyiapkan Auth.js dalam App Router Next.js

Pasang Auth.js, konfigurasikan penangan rute, dan tambahkan penyedia OAuth GitHub.

Menyiapkan Auth.js dalam App Router Next.js adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Auth.js?

Auth.js (sebelumnya NextAuth.js v5) adalah pustaka autentikasi lengkap untuk Next.js. Pustaka ini menangani penyedia OAuth, kredensial, sesi, dan JWT secara langsung.

Instalasi

Instal Auth.js versi beta dan inisialisasi file config.

npm install next-auth@beta

# Create auth.ts at project root
touch auth.ts

Membuat Konfigurasi Auth

Tentukan konfigurasi autentikasi Anda dalam auth.ts di root proyek, lengkap dengan penyedia dan fungsi panggilan balik.

import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub!;
      return session;
    },
  },
});

Menyiapkan Pengendali Rute

Buat pengendali rute yang mencakup semua jalur di app/api/auth/[...nextauth]/route.ts yang meneruskan tugas ke pengendali Auth.js.

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

Variabel Lingkungan

Tetapkan variabel lingkungan yang diperlukan untuk penyedia OAuth. AUTH_SECRET diperlukan untuk penandatanganan JWT.

# .env.local
AUTH_SECRET=your-random-secret-here

# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

# Generate AUTH_SECRET:
# npx auth secret

Menambahkan Tombol Masuk/Keluar

Impor signIn dan signOut dari auth.ts, lalu gunakan keduanya dalam formulir Komponen Server.

import { signIn, signOut } from '@/auth';

export function SignInButton() {
  return (
    <form action={async () => { 'use server'; await signIn('github'); }}>
      <button type="submit">Sign in with GitHub</button>
    </form>
  );
}

export function SignOutButton() {
  return (
    <form action={async () => { 'use server'; await signOut(); }}>
      <button type="submit">Sign out</button>
    </form>
  );
}

Membaca Sesi dalam Komponen Server

Panggil auth() dari auth.ts dalam Komponen Server atau pengendali rute mana pun untuk mendapatkan sesi saat ini.

import { auth } from '@/auth';

export default async function ProfilePage() {
  const session = await auth();
  if (!session) redirect('/login');
  return <h1>Welcome, {session.user?.name}</h1>;
}

Melindungi Halaman dengan Middleware

Gunakan middleware Auth.js untuk melindungi rute di edge tanpa menjalankan logika server pada setiap permintaan.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Sesi Basis Data

Tambahkan adaptor basis data, misalnya @auth/prisma-adapter, untuk mempertahankan sesi, pengguna, dan akun dalam basis data, bukan dalam JWT.

import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [GitHub],
  session: { strategy: 'database' },
});

Menyesuaikan Tipe Sesi

Perluas tipe sesi Auth.js untuk menyertakan bidang khusus, seperti ID pengguna atau peran.

// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user: { id: string; role: string } & DefaultSession['user'];
  }
}

Penanganan Kesalahan

Auth.js secara bawaan mengarahkan pengguna ke /error saat autentikasi gagal. Buat app/error/page.tsx untuk menyesuaikan halaman kesalahan.

Pemeriksaan Singkat

File mana yang harus Anda buat untuk mengekspos pengendali GET dan POST Auth.js dalam Perute Aplikasi Next.js?

Ringkasan

Instal next-auth@beta, buat auth.ts dengan penyedia dan fungsi panggilan balik, ekspos pengendali di app/api/auth/[...nextauth]/route.ts, tetapkan AUTH_SECRET serta variabel lingkungan penyedia, lalu baca sesi dengan auth() dalam Komponen Server.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Auth.js dalam App Router Next.js” gratis?

Ya — teks lengkap “Menyiapkan Auth.js dalam App Router Next.js” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan Auth.js dalam App Router Next.js”?

Pasang Auth.js, konfigurasikan penangan rute, dan tambahkan penyedia OAuth GitHub. Kamu berlatih React Academy 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy 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 1 dari 4.

Berapa lama pelajaran “Menyiapkan Auth.js dalam App Router Next.js” 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 React Academy ini?

Ya. Setiap pelajaran React Academy 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

  1. Menyiapkan Auth.js dalam App Router Next.js
  2. Pengelolaan Sesi & Hook useSession
  3. Penyedia Kredensial & Login Kustom
  4. Perlindungan Rute Berbasis Middleware
← Kembali ke React Academy