Autentikasi Modal AJAX & OTP Email

Masalahnya dulu

Pengunjung biasanya baru tertarik membuat akun ketika mereka sudah selesai mengisi preferensi di halaman Trip Planner dan menekan tombol 'Buat rencana perjalanan dengan AI'. Jika pada titik itu mereka dilempar (redirect) ke halaman registrasi terpisah, lalu harus cek email dan kembali lagi, seluruh isian formulir yang sudah dipilih akan hilang dan menurunkan konversi pengguna.

Autentikasi berbasis state di dalam satu modal

Alih-alih menggunakan halaman terpisah, alur Daftar, Masuk, dan Verifikasi OTP 6 digit dibangun di dalam satu komponen modal interaktif yang berkomunikasi dengan Public\AuthController melalui fetch JSON. Ketika pengguna mendaftar, server membuat akun dengan status is_active = false, membangkitkan angka acak 6 digit yang berlaku 10 menit, dan mengirimkannya lewat OtpMail. Begitu OTP cocok, server langsung mengaktifkan akun dan memanggil Auth::login($user) dalam satu langkah.

Jangan paksa pengguna meninggalkan halaman tempat mereka sedang berinteraksi hanya untuk membuktikan identitasnya.

Implementasi di ngodingan ini

Potongan kode di Public\AuthController.php yang menangani pembuatan OTP, rollback otomatis saat pengiriman email gagal, serta verifikasi masa berlaku kode:

$otp     = str_pad(random_int(0, 999999), 6, '0', STR_PAD_LEFT);
$expires = now()->addMinutes(10);

$user = User::create([
    'name' => $request->name, 'email' => $request->email,
    'password' => Hash::make($request->password), 'role' => 'user',
    'is_active' => false, 'otp_code' => $otp, 'otp_expires_at' => $expires,
]);

try {
    Mail::to($user->email)->send(new OtpMail($otp, $user->name));
} catch (\Exception $e) {
    $user->delete(); // Rollback agar email tidak terkunci dalam status gagal
    return response()->json(['success' => false, 'message' => 'Gagal mengirim email. Coba lagi.'], 500);
}

Jebakan dan detail yang harus dijaga

• Jika koneksi ke server SMTP terputus setelah User::create() berhasil dijalankan, baris user akan tertinggal di database. Tanpa blok catch yang memanggil $user->delete(), percobaan daftar ulang oleh pengguna yang sama akan langsung ditolak oleh validasi unique:users,email.
• Pengguna yang sudah mendaftar tetapi menutup browser sebelum memasukkan OTP tetap ditangani dengan mulus: saat mereka mencoba login, server mendeteksi !user->is_active, mengembalikan kode HTTP 403 dengan penanda step: 'otp', dan modal di frontend otomatis berpindah ke layar input 6 kotak OTP.