Apa Itu Authentication di Aplikasi Web

Sebagian besar aplikasi modern membutuhkan sistem authentication. Fitur ini digunakan untuk memastikan bahwa hanya pengguna yang memiliki akses yang bisa masuk ke dalam aplikasi.

Contoh fitur yang membutuhkan authentication:

• login dashboard admin

• halaman profil user

• sistem membership

• aplikasi SaaS

• aplikasi internal perusahaan

Tanpa authentication, semua orang bisa mengakses seluruh halaman aplikasi kita, termasuk data sensitif.

Di Next.js, kita bisa membangun sistem authentication dengan berbagai pendekatan, mulai dari yang sederhana hingga yang kompleks.

Pendekatan Authentication di Next.js

Ada beberapa cara umum untuk mengimplementasikan authentication di Next.js.

Pendekatan pertama adalah session-based authentication. Sistem ini biasanya menggunakan cookie yang disimpan di browser setelah user berhasil login.

Pendekatan kedua adalah token-based authentication, biasanya menggunakan JWT (JSON Web Token). Token ini dikirim bersama setiap request ke server.

Pendekatan ketiga adalah menggunakan library siap pakai seperti NextAuth.js yang sudah menyediakan berbagai fitur authentication.

Untuk kebanyakan aplikasi modern, developer biasanya menggunakan library authentication karena lebih cepat dan lebih aman dibanding membuat semuanya dari nol.

Membuat API Login Sederhana

Sebelum membahas proteksi halaman, kita perlu memahami bagaimana proses login bekerja.

Biasanya login dilakukan melalui API endpoint yang menerima email dan password dari user.

Contoh endpoint login sederhana:

app/api/login/route.ts

import { NextResponse } from "next/server"

export async function POST(request: Request) {
  const body = await request.json()

  const { email, password } = body

  if (email === "admin@email.com" && password === "123456") {
    return NextResponse.json({
      success: true,
      message: "Login berhasil"
    })
  }

  return NextResponse.json({
    success: false,
    message: "Email atau password salah"
  })
}

Endpoint ini hanya contoh sederhana. Dalam aplikasi nyata biasanya kita akan memverifikasi user dari database.

Mengirim Request Login dari Frontend

Setelah endpoint login dibuat, langkah berikutnya adalah mengirim request dari frontend.

Contoh request menggunakan fetch:

async function login() {
  const response = await fetch("/api/login", {
    method: "POST",
    body: JSON.stringify({
      email: "admin@email.com",
      password: "123456"
    })
  })

  const data = await response.json()

  console.log(data)
}

Jika login berhasil, biasanya server akan mengirimkan session atau token yang nantinya digunakan untuk mengakses halaman yang membutuhkan authentication.

Melindungi Halaman dengan Middleware

Next.js menyediakan fitur Middleware yang sangat berguna untuk melindungi halaman tertentu.

Middleware berjalan sebelum request diproses oleh halaman.

Contoh middleware sederhana:

middleware.ts

import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"

export function middleware(request: NextRequest) {
  const isLoggedIn = false

  if (!isLoggedIn) {
    return NextResponse.redirect(new URL("/login", request.url))
  }

  return NextResponse.next()
}

Jika user belum login, middleware akan mengarahkan user ke halaman login.

Middleware biasanya digunakan untuk melindungi halaman seperti:

• /dashboard

• /admin

• /profile

Menggunakan Library Authentication (NextAuth)

Membuat authentication dari nol bisa menjadi cukup kompleks, terutama jika kita harus mengelola session, token, dan security.

Karena itu banyak developer Next.js menggunakan NextAuth.js.

Library ini menyediakan berbagai fitur seperti:

• login menggunakan email dan password

• login menggunakan Google atau GitHub

• session management

• proteksi halaman

• integrasi database

Instalasi NextAuth cukup mudah:

npm install next-auth

Setelah itu kita bisa membuat konfigurasi authentication tanpa perlu menulis terlalu banyak kode backend.

Best Practice Authentication

Beberapa praktik terbaik saat membuat authentication di aplikasi Next.js:

Gunakan password hashing saat menyimpan password di database. Jangan pernah menyimpan password dalam bentuk plain text.

Gunakan HTTPS agar data login tidak mudah disadap saat dikirim melalui jaringan.

Gunakan session atau token yang aman untuk mengelola login user.

Jika memungkinkan, gunakan library authentication yang sudah terbukti aman dibanding membuat semuanya dari nol.

Kesimpulan

Authentication adalah bagian penting dari hampir semua aplikasi modern. Tanpa sistem login yang baik, aplikasi bisa menjadi sangat rentan terhadap penyalahgunaan.

Next.js memberikan banyak cara untuk mengimplementasikan authentication, mulai dari membuat API login sederhana hingga menggunakan library seperti NextAuth.

Dengan pendekatan yang tepat, kita bisa membangun sistem authentication yang aman sekaligus mudah dikelola.

Pada Part 8 nanti kita akan membahas topik yang tidak kalah penting, yaitu Security di Next.js. Kita akan melihat berbagai praktik keamanan yang sebaiknya diterapkan saat membangun aplikasi web modern.