Membangun Sistem Login Aman dengan NextAuth & Middleware (Part 4)

Dalam dunia Cyber Security, celah keamanan tidak hanya berasal dari injeksi data yang merusak database. Serangan eksploitasi otorisasi, atau yang sering disebut sebagai Broken Access Control, justru secara konsisten menduduki peringkat pertama dalam laporan kerentanan OWASP Top 10.

Bagaimana jika kita sudah berhasil membangun antarmuka platform edukasi, seperti Learning Management System (LMS), yang sangat responsif, namun siapa saja yang mengetahui URL-nya bisa masuk dan mengubah data kelas secara diam-diam tanpa izin?

Menutup rute secara sembarangan menggunakan PHP Session tradisional tidak lagi cukup. Beralih menggunakan ekosistem autentikasi Next.js yang dipadukan dengan NextAuth.js (Auth.js) dan Middleware adalah salah satu langkah mitigasi terbaik. Kombinasi ini menawarkan lapisan proteksi rute bawaan (built-in security) yang sangat solid. Mari kita bedah cara membangun fondasinya.

Mengapa NextAuth dan Middleware Lebih Aman?

• Anti-Brute Force & Hashing: NextAuth sangat kompatibel dengan pustaka kriptografi seperti Bcrypt. Password pengguna tidak pernah dibaca dalam bentuk teks biasa (plaintext), melainkan dienkripsi secara acak sehingga tidak bisa dibaca, bahkan oleh administrator database sekalipun.
• Manajemen Sesi Otomatis (Anti Session Hijacking): NextAuth menangani JSON Web Tokens (JWT) dan cookies secara aman di latar belakang, lalu mengenkripsinya dengan secret key tingkat tinggi yang hanya diketahui oleh server Anda.
• Proteksi Rute di Tingkat Tepi (Edge): Dengan Middleware Next.js, pengecekan status otorisasi dilakukan sebelum halaman selesai di-render. Hacker tidak bisa memaksa masuk karena server akan memblokir dan menendang mereka kembali ke halaman login secara instan.

---

Persiapan Senjata (Library) Tambahan di Windows

Sebelum mulai meracik sistem login yang aman, pastikan proyek Next.js Anda sudah dipersenjatai dengan pustaka tambahan berikut:

• NextAuth.js: Library standar industri untuk menangani autentikasi kompleks secara elegan di ekosistem Next.js.
• Bcrypt: Modul kriptografi untuk memverifikasi kecocokan password yang diketik pengguna dengan hash terenkripsi yang ada di database MySQL Anda.

---

Langkah Praktis: Membangun Sistem Login dan Proteksi Rute

1. Instalasi Library Keamanan

Buka terminal Anda, lalu jalankan perintah ini untuk memasang pustaka ke dalam proyek Next.js:

npm install next-auth bcrypt
npm install -D @types/bcrypt

Kita juga menginstal @types/bcrypt agar TypeScript bisa membaca modul kriptografi tersebut dengan valid dan bebas error.

2. Meracik Konfigurasi Gembok Utama (NextAuth)

Buat folder secara berurutan: app/api/auth/[...nextauth]. Di dalam folder [...nextauth] tersebut, buat file route.ts. File ini akan menjadi pusat verifikasi data pengguna dari tabel users di database.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { PrismaClient } from "@prisma/client";
import bcrypt from "bcrypt";

const prisma = new PrismaClient();

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) return null;

        // Mencari user di database
        const user = await prisma.users.findUnique({
          where: { email: credentials.email }
        });

        if (!user) return null;

        // Verifikasi kecocokan password dengan Bcrypt
        const isPasswordMatch = await bcrypt.compare(credentials.password, user.password);
        if (!isPasswordMatch) return null;

        // Tips Pro: Mengubah ID BigInt menjadi string agar tidak memicu error JSON!
        return {
          id: user.id.toString(),
          name: user.name,
          email: user.email,
          role: user.role_id.toString(),
        };
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
        token.role = (user as any).role;
      }
      return token;
    },
    async session({ session, token }) {
      if (session.user) {
        (session.user as any).id = token.id;
        (session.user as any).role = token.role;
      }
      return session;
    }
  },
  session: { strategy: "jwt" },
  secret: process.env.NEXTAUTH_SECRET,
});

export { handler as GET, handler as POST };

3. Menambahkan Kunci Rahasia Enkripsi (.env)

NextAuth membutuhkan sebuah kunci rahasia untuk mengenkripsi token JWT agar tidak bisa dipalsukan. Buka file .env Anda dan tambahkan konfigurasi ini di baris paling bawah:

NEXTAUTH_SECRET="rahasia_super_kuat_bebas_ketik_apa_saja_yang_panjang"
NEXTAUTH_URL="http://localhost:3000"

4. Memasang Satpam Virtual (Middleware)

Langkah terakhir adalah memasang skrip penjaga. Buat file baru bernama middleware.ts tepat di luar folder app (sejajar dengan file package.json). Skrip ini akan mencegat setiap request yang mencoba mengakses rute tanpa izin.

export { default } from "next-auth/middleware";

// Menentukan rute mana saja yang HARUS login terlebih dahulu
export const config = {
  matcher: [
    "/kelas/:path*",
    "/api/kelas/:path*",
  ]
};

5. Uji Coba Keamanan (Simulasi Serangan)

Simpan semua file, jalankan npm run dev. Sekarang, posisikan diri Anda sebagai peretas awam dan cobalah akses URL http://localhost:3000/kelas secara langsung di peramban.

Apa yang terjadi? Anda tidak akan bisa melihat form kelas tersebut. Middleware akan langsung menendang Anda ke rute /api/auth/signin (halaman login bawaan sementara dari NextAuth). Pertahanan Anda telah aktif!

Kesimpulan

Keamanan web (Web Security) tidak melulu soal melindungi data dari manipulasi. Keamanan yang sesungguhnya memastikan bahwa hanya entitas yang memiliki otorisasi sah yang memiliki akses ke dalam ruang operasi Anda. Dengan mengimplementasikan NextAuth dan Middleware, kita mendelegasikan tugas berat dari manajemen sesi ke sistem kriptografi yang sudah teruji, memastikan pintu LMS Anda terkunci rapat dari tamu tak diundang.

Share this post