Masuk Langsung ke Dashboard dengan Cara Membuat Redirect setelah Login Next Js

Ditulis oleh Next.js

Cara membuat redirect setelah login Next.js yang benar adalah membuat session atau cookie dulu di Server Action, lalu memanggil redirect() dari next/navigation. Jangan redirect dari Client Component sebelum cookie tersimpan, karena request berikutnya bisa terbaca belum login.

Jawaban Cepat: Pola Redirect Setelah Login yang Benar

Pola paling stabil di App Router memakai Server Action untuk seluruh proses login. Validasi kredensial, set cookie session, baru redirect ke path internal.

  • Gunakan redirect() di Server Action setelah session atau cookie dibuat.
  • Ambil callbackUrl dari searchParams untuk kembali ke halaman tujuan.
  • Validasi callbackUrl hanya untuk path internal yang diawali /.

Pola Redirect dari Server Action

Ikuti urutan ini agar login tidak balapan dengan redirect:

1. Terima FormData di Server Action.
2. Validasi email dan password di server.
3. Buat session dan simpan ke cookie httpOnly.
4. Panggil redirect(path).

import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';

export async function loginAction(formData: FormData) {
  const email = String(formData.get('email') ?? '');
  const callbackUrl = String(formData.get('callbackUrl') ?? '/dashboard');

  // validasi user dan buat session di sini
  const sessionToken = 'CONTOH_TOKEN_DARI_AUTH';

  const cookieStore = await cookies();
  cookieStore.set('session', sessionToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    path: '/',
  });

  const target = callbackUrl.startsWith('/') ? callbackUrl : '/dashboard';
  redirect(target);
}
  • router.push berjalan di browser dan tidak menunggu cookie selesai ditulis.
  • Server Action memastikan cookie terkirim dalam response yang sama sebelum navigasi.
  • Validasi server tetap wajib walau form sudah divalidasi di client.

BACA JUGA:

Pakai CallbackUrl agar Tidak Mental ke Homepage

Tanpa callbackUrl, semua user selalu jatuh ke satu halaman. Simpan tujuan awal lewat query, lalu teruskan lewat input tersembunyi.

1. Arahkan user belum login ke /login?callbackUrl=/dashboard/laporan.
2. Baca searchParams.callbackUrl di halaman login.
3. Kirim nilainya ke Server Action lewat hidden input.
4. Validasi path sebelum redirect().

export default async function LoginPage({ searchParams }) {
  const params = await searchParams;
  const callbackUrl = typeof params?.callbackUrl === 'string'
    ? params.callbackUrl
    : '/dashboard';

  return (
    <form action={loginAction}>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <input type="hidden" name="callbackUrl" value={callbackUrl} />
      <button type="submit">Masuk</button>
    </form>
  );
}
  • Jika callbackUrl kosong, pakai fallback seperti /dashboard.
  • Tolak URL eksternal seperti https://situs-lain.com untuk mencegah open redirect.
  • Terima hanya path diawali satu garis miring, bukan //.

Perbandingan Metode Redirect Login

Metode Cocok Untuk Catatan
redirect Server Action Form login utama Cookie pasti terset sebelum pindah
router.push Navigasi setelah UI update Rentan gagal jika session belum siap
middleware Menjaga route protected Cocok mengarahkan ke login dengan callbackUrl
  • Pilih Server Action untuk memproses kredensial dan menentukan tujuan akhir.
  • Pilih middleware untuk mencegat akses /dashboard/* tanpa session.
  • Validasi session tetap di server walau tombol login ada di client.

FAQ

Apakah redirect setelah login harus pakai use client?

Tidak, buat session lalu redirect langsung dari Server Action.

Bagaimana agar redirect kembali ke halaman protected?

Simpan path asal di callbackUrl, lalu validasi sebelum dipakai redirect.

Kenapa redirect kadang gagal setelah login?

Umumnya cookie belum terset karena redirect dilakukan dari client atau callbackUrl berupa URL eksternal.

Artikel Terkait