Belajar Next.js dari Nol – Part 6: Autentikasi Pengguna dengan NextAuth.js & JWT

Autentikasi adalah tulang punggung aplikasi yang membutuhkan proteksi data pengguna. Di Next.js, kita dapat mengimplementasikan autentikasi dengan beberapa pendekatan:

• Menggunakan NextAuth.js (direkomendasikan untuk kecepatan dan fleksibilitas)
• Menggunakan JWT manual (untuk custom backend/API)

Pada bagian ini, kamu akan belajar:

• Cara integrasi NextAuth.js
• Konfigurasi login dengan email/password
• Proteksi halaman pribadi
• Alternatif autentikasi manual menggunakan JWT

---

⚙️ 1. Setup Autentikasi dengan NextAuth.js

✅ Instalasi

npm install next-auth

✅ Buat File Route API

Buat folder app/api/auth/[...nextauth]/route.js:

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const user = {
          id: 1,
          name: "Admin",
          email: "admin@example.com",
        };
        if (
          credentials.email === "admin@example.com" &&
          credentials.password === "123456"
        ) {
          return user;
        }
        return null;
      },
    }),
  ],
  pages: {
    signIn: "/login",
  },
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
});

export { handler as GET, handler as POST };

🔐 Gunakan variabel .env
NEXTAUTH_SECRET=anylongsecurestring

---

🧾 2. Buat Halaman Login

File: app/login/page.jsx

'use client';

import { signIn } from 'next-auth/react';
import { useState } from 'react';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    await signIn('credentials', {
      email,
      password,
      callbackUrl: '/',
    });
  };

  return (
    <form onSubmit={handleLogin} className="max-w-md mx-auto space-y-4">
      <input
        type="email"
        placeholder="Email"
        onChange={(e) => setEmail(e.target.value)}
        className="border p-2 w-full"
      />
      <input
        type="password"
        placeholder="Password"
        onChange={(e) => setPassword(e.target.value)}
        className="border p-2 w-full"
      />
      <button type="submit" className="bg-blue-600 text-white px-4 py-2">
        Masuk
      </button>
    </form>
  );
}

---

🔒 3. Proteksi Halaman dengan Session

File: app/dashboard/page.jsx

import { getServerSession } from 'next-auth';
import { authOptions } from '../api/auth/[...nextauth]/route';

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);

  if (!session) {
    return <p>Akses ditolak. Silakan login terlebih dahulu.</p>;
  }

  return (
    <div>
      <h1>Selamat datang, {session.user.name}</h1>
    </div>
  );
}

---

🧪 4. Autentikasi Manual dengan JWT (Alternatif)

Kalau kamu ingin autentikasi tanpa NextAuth (misal integrasi backend Laravel/PHP), kamu bisa:

a. Kirim email dan password ke backend (POST)

await fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ email, password }),
});

b. Simpan token dari backend ke localStorage

localStorage.setItem('token', token);

c. Sertakan token dalam fetch API

await fetch('/api/posts', {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

⚠️ Pastikan token disimpan aman dan disetel saat logout.

---

💡 Best Practice Autentikasi di Next.js

Fitur	Rekomendasi
Login & logout	Gunakan NextAuth.js atau JWT custom
Proteksi halaman	Gunakan getServerSession() untuk SSR
Persistensi session	Strategy: JWT
Social login (Google/GitHub)	Bisa ditambahkan via NextAuth provider

---

🔧 Elektra Network Vision – Solusi Autentikasi Aman & Fleksibel

Kami dapat membantu:

• Integrasi autentikasi Next.js dengan sistem backend (Laravel, Node, .NET)
• Pengamanan data dan sesi pengguna
• Penggunaan token berbasis OAuth2/JWT

🌐 Kunjungi elektranetworkvision.com untuk konsultasi teknis dan audit keamanan aplikasi Anda.