0Pricing
React Academy · Pelajaran

Pengelolaan Sesi & Hook useSession

Akses data sesi dalam komponen server dan klien, serta lindungi halaman berdasarkan status autentikasi.

Pengelolaan Sesi & Hook useSession adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Tipe Session dalam Auth.js

Auth.js mendukung dua strategi sesi: JWT (bawaan, token tanpa status dalam cookie) dan basis data (catatan sesi dalam basis data yang dapat dibatalkan dari sisi server).

useSession dalam Komponen Klien

useSession() adalah hook Komponen Klien yang membaca sesi saat ini. Hook ini mengembalikan data (sesi), status ('loading' | 'authenticated' | 'unauthenticated'), dan fungsi update.

'use client';
import { useSession } from 'next-auth/react';

export function UserAvatar() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <Spinner />;
  if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
  return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}

Menyiapkan SessionProvider

Bungkus aplikasi Anda, atau subpohon Komponen Klien, dengan SessionProvider agar useSession dapat mengakses konteks sesi.

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return <html><body><Providers>{children}</Providers></body></html>;
}

auth() dalam Komponen Server

Untuk Komponen Server, gunakan auth() secara langsung—tidak memerlukan hook atau penyedia. Fungsi ini membaca sesi dari cookie sisi server.

import { auth } from '@/auth';

export default async function Header() {
  const session = await auth();
  return (
    <nav>
      {session ? (
        <span>Hello, {session.user?.name}</span>
      ) : (
        <Link href="/login">Sign in</Link>
      )}
    </nav>
  );
}

Melindungi Rute Klien

Gunakan useSession dengan opsi required: true untuk secara otomatis mengarahkan pengguna yang belum terautentikasi ke halaman masuk.

'use client';
import { useSession } from 'next-auth/react';

export default function ProtectedPage() {
  const { data: session } = useSession({ required: true });
  // session is never null here — unauthenticated users are redirected
  return <div>Welcome, {session?.user?.name}</div>;
}

Memperbarui Sesi

Panggil fungsi update() yang dikembalikan oleh useSession untuk menyegarkan sesi, misalnya setelah memperbarui profil, tanpa keluar lalu masuk kembali.

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

Fungsi Panggilan Balik Sesi JWT

Gunakan fungsi panggilan balik jwt untuk menambahkan data khusus ke token JWT saat masuk, lalu gunakan fungsi panggilan balik session untuk mengeksposnya dalam objek sesi.

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role; // add on first sign-in
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role as string;
    return session;
  },
},

Masa Berlaku Sesi

Konfigurasikan usia maksimum sesi dalam konfigurasi Auth.js. Sesi JWT diperbarui otomatis pada setiap permintaan saat masih aktif.

export const { handlers, auth } = NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60,   // refresh if older than 1 day
  },
});

Membatalkan Sesi Basis Data

Sesi basis data dapat dicabut dari sisi server, yang berguna untuk keluar secara paksa. Hapus catatan sesi dari basis data untuk segera membatalkannya.

// Server Action to log out all devices:
async function logOutAllDevices() {
  'use server';
  const session = await auth();
  if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
  redirect('/login');
}

Akses Berbasis Peran dalam Komponen Klien

Baca peran sesi dari useSession dan tampilkan UI secara kondisional berdasarkan peran tersebut.

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

Pemeriksaan Singkat

Penyedia mana yang harus membungkus aplikasi Anda agar useSession() berfungsi dalam Komponen Klien?

Ringkasan

Gunakan auth() untuk mengakses sesi dalam Komponen Server dan useSession() dalam Komponen Klien yang dibungkus oleh SessionProvider. Tambahkan data khusus melalui fungsi panggilan balik JWT/sesi, perbarui sesi di sisi klien dengan update(), dan konfigurasikan maxAge untuk masa berlaku sesi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengelolaan Sesi & Hook useSession” gratis?

Ya — teks lengkap “Pengelolaan Sesi & Hook useSession” 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 “Pengelolaan Sesi & Hook useSession”?

Akses data sesi dalam komponen server dan klien, serta lindungi halaman berdasarkan status autentikasi. 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 2 dari 4.

Berapa lama pelajaran “Pengelolaan Sesi & Hook useSession” 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