Catatan Kuliah: Setup Next.js App Router dengan Next Auth

Pendahuluan

• Pembahasan kali ini tentang setup Next Auth untuk autentikasi.

Instalasi Next Auth

• Gunakan perintah berikut di terminal untuk menginstal Next Auth: npm install [email protected]

Membangun Layout dengan Session Provider

• Layout utama harus dibungkus dengan SessionProvider dari Next Auth.
• Untuk import: import { SessionProvider } from "next-auth/react";
• Pastikan SessionProvider membungkus children dan navbar.

Mengatur Akses Dashboard

• Dashboard perlu dibatasi agar hanya dapat diakses jika sudah login.
• Gunakan hook useSession dari Next Auth untuk mengecek sesi pengguna: const { data: session, status } = useSession();
• Jika status adalah unauthenticated, redirect ke halaman login menggunakan useRouter.

Middleware

• Untuk meningkatkan keamanan, pertimbangkan untuk menggunakan middleware di Next.js.

Setup API untuk Next Auth

• Buat folder api/auth/[...nextauth] untuk mengatur Next Auth.
• File yang perlu dibuat adalah route.js atau route.tsx.
• Definisikan Opsi Auth:
  • Gunakan credentials sebagai provider.
  • Implementasi fungsi untuk memverifikasi email dan password.

Menghandle Login

• Buat route untuk login dengan logika berikut:
  • Jika email dan password cocok, kembalikan informasi pengguna.
  • Gunakan JWT untuk mengatur sesi.

Menangani Session

• Pastikan sesi yang dihasilkan berisi informasi pengguna (email, nama, dan role).
• Gunakan session ini untuk mengecek akses ke dashboard.

Logout

• Implementasikan fitur logout di navbar.
• Cek status login sebelum mengizinkan akses ke dashboard dan produk.

Kustomisasi Halaman Login

• Alihkan halaman sign in ke halaman login yang kustom: pages: { signIn: '/login', }

Penutup

• Proyek untuk menghubungkan ke database masih perlu dilakukan di video berikutnya.
• Jangan lupa untuk subscribe, comment, like, dan share video.