{"id":56594,"date":"2025-09-01T08:13:00","date_gmt":"2025-09-01T01:13:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=56594"},"modified":"2026-02-16T10:18:21","modified_gmt":"2026-02-16T03:18:21","slug":"cara-mengaktifkan-fitur-2fa-login-di-laravel","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-mengaktifkan-fitur-2fa-login-di-laravel\/","title":{"rendered":"Cara Mengaktifkan Fitur 2FA Login di Laravel"},"content":{"rendered":"\n

Pernah khawatir password login ke aplikasi Laravel Anda mudah dibobol? Faktanya, serangan cyber <\/em>kini semakin pintar dan login dengan kata sandi saja tidak lagi aman. Di sinilah 2FA login di Laravel berperan, menambah lapisan verifikasi sehingga akun terlindungi lebih kuat. <\/p>\n\n\n\n

Dalam artikel ini, kami akan berbagi tentang apa itu two-factor authentication<\/em> login, hingga cara mengaktifkan 2FA login di Laravel agar aplikasi semakin aman dan profesional.<\/p>\n\n\n\n

Mengenal Two Factor Authentication Login<\/h2>\n\n\n\n

Two Factor Authentication<\/em> (2FA) adalah sistem keamanan tambahan yang mengharuskan user untuk melewati dua tahap verifikasi sebelum berhasil login. Biasanya, tahap pertama adalah memasukkan password<\/em>, lalu dilanjutkan dengan kode unik yang dikirim melalui aplikasi autentikator, SMS, atau email. <\/p>\n\n\n\n

Dengan cara ini, meski password <\/em>bocor sekalipun, akun tetap sulit diakses tanpa kode verifikasi kedua. Dalam pengembangan aplikasi berbasis PHP, 2FA login di Laravel bisa diintegrasikan dengan mudah menggunakan package atau library tambahan, sehingga keamanan login semakin terjamin tanpa mengurangi kenyamanan pengguna.<\/p>\n\n\n\n

Selengkapnya tentang apa itu two-factor authentication<\/em> login bisa Anda pelajari di artikel berikut<\/a>.<\/p>\n\n\n\n

Mengaktifkan 2FA Login di Laravel<\/h2>\n\n\n\n

Berikut adalah cara untuk mengaktifkan fitur 2FA login di framework <\/em>Laravel.<\/p>\n\n\n\n

Step 1. Install Breeze Laravel<\/h3>\n\n\n\n

Penting!<\/p>Sebelum memulai, kami sarankan Anda untuk backup file webnya. Panduan ini menggunakan Laravel Framework 10.48.29.<\/cite><\/blockquote><\/figure>\n\n\n\n

Tahap pertama, pastikan aplikasi Laravel Anda sudah jalan. Selanjutnya, akses folder web melalui terminal dan jalankan perintah berikut:<\/p>\n\n\n\n

composer require laravel\/breeze --dev\nphp artisan breeze:install<\/code><\/pre>\n\n\n
\n
\"Install<\/a><\/figure>\n<\/div>\n\n\n
Pada php artisan breeze, silahkan pilih blade<\/strong> seperti gambar diatas dan pilihlah PHPUnit<\/strong> untuk pilihan berikutnya. Langkah selanjutnya, jalankan perintah npm berikut:<\/p>\n\n\n\n
npm install && npm run dev<\/code><\/pre>\n\n\n\n
Step 2. Migrate Database Laravel<\/h3>\n\n\n\n
Proses selanjutnya yaitu melengkapi tabel database yang sudah ada. Jalankan perintah berikut:<\/p>\n\n\n\n
php artisan make:migration add_otp_columns_to_users_table<\/code><\/pre>\n\n\n\n
Silahkan update isi file add_otp_columns_to_users_table<\/em><\/strong> dalam folder database\\migrations<\/em><\/strong> dengan script <\/em>dibawah:<\/p>\n\n\n\n
<?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nreturn new class extends Migration\n{\n    public function up(): void\n    {\n        Schema::table('users', function (Blueprint $table) {\n        $table->boolean('otp_enabled')->default(false);\n        $table->string('otp_code')->nullable();\n        $table->timestamp('otp_expires_at')->nullable();\n        });\n    }\n\n    public function down(): void\n    {\n        Schema::table('users', function (Blueprint $table) {\n        });\n    }\n};<\/code><\/pre>\n\n\n\n
Perhatikan bagian “Schema::table(‘users’<\/span><\/strong>“, silahkan disesuaikan dengan nama table database Anda jika tidak menggunakan users<\/strong>. Jalankan perintah berikut jika kodenya telah disesuaikan:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\n
jika proses migrate database tidak mengalami kendala, silahkan lanjutkan ke langkah berikutnya.<\/p>\n\n\n\n
Step 3. Aktifkan SendOTP Laravel dan View Emails<\/h3>\n\n\n\n
Langkah berikutnya dengan mengaktifkan sendOTP yang berfungsi sebagai metode pengiriman kode ke emailnya. Jalankan perintah berikut:<\/p>\n\n\n\n
php artisan make:mail SendOTP<\/code><\/pre>\n\n\n\n
Proses berikutnya silahkan Anda masuk ke folder resources\\views<\/em><\/strong> , buatlah folder baru dengan nama emails<\/strong> dengan isi file bernama otp.blade.php<\/strong><\/p>\n\n\n\n
Berikut isi dari script <\/em>otp.blade.php yang bisa Anda gunakan:<\/p>\n\n\n\n
<div style=\"font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 30px; color: #333;\">\n    <div style=\"max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 30px;\">\n\n        <h1 style=\"font-size: 24px; color: #4F46E5; text-align: center; margin-bottom: 20px;\">Verifikasi Kode OTP Anda<\/h1>\n        <p style=\"font-size: 16px; text-align: center;\">Berikut adalah kode OTP yang Anda minta untuk verifikasi:<\/p>\n\n        <div style=\"text-align: center; margin: 30px 0;\">\n            <span style=\"display: inline-block; background-color: #4F46E5; color: #ffffff; font-size: 32px; font-weight: bold; padding: 12px 24px; border-radius: 8px; letter-spacing: 4px;\">\n                {{ $otp }}\n            <\/span>\n        <\/div>\n\n        <p style=\"font-size: 14px; text-align: center; color: #666;\">\n            Kode ini berlaku selama <strong>5 menit<\/strong>. Jangan berikan kode ini kepada siapa pun.\n        <\/p>\n\n        <hr style=\"margin: 30px 0; border: none; border-top: 1px solid #e0e0e0;\">\n\n        <p style=\"font-size: 12px; text-align: center; color: #999;\">\n            Jika Anda tidak meminta kode ini, Anda bisa mengabaikan email ini atau menghubungi admin: admin@fredriclesomar.id\n        <\/p>\n\n    <\/div>\n<\/div><\/code><\/pre>\n\n\n
\n
\"Mengaktifkan<\/a><\/figure>\n<\/div>\n\n\n
Tampilan diatas adalah form ketika kode OTP dikirimkan ke email terdaftar.<\/p>\n\n\n\n
Step 4. Buat file View Auth<\/h3>\n\n\n\n
Langkah berikutnya dengan membuat file baru dengan nama otp-verify.blade.php<\/strong> di dalam folder resources\\views\\auth<\/strong>.<\/p>\n\n\n\n
<x-guest-layout>\n    <div class=\"min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900\">\n        <div class=\"w-full max-w-md bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg space-y-6\">\n\n            {{-- Header --}}\n            <div class=\"text-center\">\n                <div class=\"mx-auto w-16 h-16 flex items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-500 text-indigo-600 dark:text-white mb-4\">\n                    <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n                         viewBox=\"0 0 24 24\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                              d=\"M16 12a4 4 0 01-8 0m8 0a4 4 0 00-8 0m8 0V6a4 4 0 00-8 0v6m8 0l4 4m-4-4l-4 4\"\/>\n                    <\/svg>\n                <\/div>\n                <h2 class=\"text-xl font-semibold text-gray-800 dark:text-white\">Verifikasi OTP<\/h2>\n                <p class=\"mt-1 text-sm text-gray-600 dark:text-gray-400\">\n                    Periksa email Anda untuk mendapatkan kode OTP.\n                <\/p>\n            <\/div>\n\n            {{-- Alert Jika Link Terkirim --}}\n            @if (session('status') == 'verification-link-sent')\n                <div class=\"p-3 text-sm text-green-700 bg-green-100 rounded dark:bg-green-700 dark:text-green-100\">\n                    Tautan verifikasi baru telah dikirim ke email Anda.\n                <\/div>\n            @endif\n\n            {{-- Form OTP --}}\n            <form method=\"POST\" action=\"{{ route('otp.verify') }}\" class=\"space-y-4\">\n                @csrf\n\n                <div>\n                    <label for=\"otp\" class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\n                        Masukkan Kode OTP\n                    <\/label>\n                    <input\n                        type=\"text\"\n                        name=\"otp\"\n                        id=\"otp\"\n                        required\n                        placeholder=\"Contoh: 123456\"\n                        class=\"mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white dark:bg-gray-700 focus:ring-indigo-500 focus:border-indigo-500\"\n                    >\n                <\/div>\n\n                <button\n                    type=\"submit\"\n                    class=\"w-full inline-flex justify-center items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md shadow focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n                >\n                    Verifikasi\n                <\/button>\n            <\/form>\n\n            {{-- Kirim Ulang --}}\n            <form method=\"POST\" action=\"{{ route('verification.send') }}\" class=\"text-center\">\n                @csrf\n                <button type=\"submit\"\n                        class=\"text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200 hover:underline mt-2\">\n                    Kirim Ulang Kode OTP\n                <\/button>\n            <\/form>\n\n            {{-- Logout --}}\n            <form method=\"POST\" action=\"{{ route('logout') }}\" class=\"text-center\">\n                @csrf\n                <button type=\"submit\"\n                        class=\"text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-white underline\">\n                    Log Out\n                <\/button>\n            <\/form>\n\n        <\/div>\n    <\/div>\n<\/x-guest-layout><\/code><\/pre>\n\n\n
\n
\"Contoh<\/a><\/figure>\n<\/div>\n\n\n
Step 5. Buat File Mail SendOTP<\/h3>\n\n\n\n
Langkah berikutnya dengan mengupdate isi file SendOTP.php<\/strong> dalam folder app\/Mail\/<\/code> yang sudah Anda buat di step 3 sebelumnya.<\/p>\n\n\n
\n
\"Buat<\/a><\/figure>\n<\/div>\n\n\n
<?php\n\nnamespace App\\Mail;\n\nuse Illuminate\\Bus\\Queueable;\nuse Illuminate\\Contracts\\Queue\\ShouldQueue;\nuse Illuminate\\Mail\\Mailable;\nuse Illuminate\\Mail\\Mailables\\Content;\nuse Illuminate\\Mail\\Mailables\\Envelope;\nuse Illuminate\\Queue\\SerializesModels;\nuse Illuminate\\Http\\Request;\n\nclass SendOTP extends Mailable\n{\n    use Queueable, SerializesModels;\n\n\tpublic $otp;\n\tpublic function __construct($otp) { $this->otp = $otp; }\n\n\tpublic function build()\n{\n\t\treturn $this->subject('Kode OTP Login')->view('emails.otp');\n\t}\n\n\n    public function envelope(): Envelope\n    {\n        return new Envelope(\n            subject: 'Send O T P',\n        );\n    }\n\n    public function content(): Content\n    {\n        return new Content(\n            view: 'emails.otp',\n        );\n    }\n\n    public function attachments(): array\n    {\n        return [];\n    }\n}<\/code><\/pre>\n\n\n\n
File diatas berkaitan dengan proses pengiriman email, dan bagian subject: <\/strong>adalah subject <\/em>email yang akan dikirimkan. Sedangkan view:<\/strong> adalah lokasi dari body\/template email yang telah dibuat sebelumnya dalam folder emails <\/strong>> otp.blade.php<\/strong><\/p>\n\n\n\n
Step 6. Perbarui Routes Laravel<\/h3>\n\n\n\n
Untuk memastikan semua fungsi email dapat berjalan dengan baik, silahkan update routes <\/em>Laravel Anda di file web.php<\/strong> dengan menambahkan konfig berikut:<\/p>\n\n\n\n
<?php\n\nuse App\\Http\\Controllers\\ProfileController;\nuse Illuminate\\Support\\Facades\\Route;\nuse Illuminate\\Support\\Facades\\Auth;\nuse Illuminate\\Http\\Request;\n\n{routes lama Anda}\n...\nRoute::get('\/otp-verify', function () {\n    return view('auth.otp-verify');\n})->name('otp.verify.form');\n\nRoute::post('\/otp-verify', function (Request $req) {\n    $req->validate(['otp' => 'required|numeric']);\n\n    $user = \\App\\Models\\User::find(session('otp_user_id'));\n\n    if (!$user || $user->otp_code !== $req->otp || now()->gt($user->otp_expires_at)) {\n        return back()->withErrors(['otp' => 'OTP salah atau kadaluarsa']);\n    }\n\n    \/\/ aktifkan reset OTP disini\n    $user->otp_code = null;\n    $user->otp_expires_at = null;\n    $user->save();\n\n    Auth::login($user);\n    session()->forget('otp_user_id');\n\n    return redirect()->route('dashboard');\n})->name('otp.verify');\n\nrequire __DIR__.'\/auth.php';\n<\/code><\/pre>\n\n\n\n
Silahkan sesuaikan script <\/em>diatas dalam routes <\/em>Laravel Anda, pastikan bagian OTP berada dibagian bawah setelah route <\/em>login.<\/p>\n\n\n\n
Step 7. Perbarui Controller Auth<\/h3>\n\n\n\n
Di langkah ke tujuh ini, Anda perlu update file AuthenticatedSessionController.php<\/strong> di folder app\\Http\\Controllers\\Auth<\/strong>. Silahkan sesuaikan default <\/em>kodenya dengan script <\/em>di bawah:<\/p>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers\\Auth;\n\nuse App\\Models\\User;\nuse App\\Http\\Controllers\\Controller;\nuse App\\Http\\Requests\\Auth\\LoginRequest;\nuse App\\Providers\\RouteServiceProvider;\nuse Illuminate\\Http\\RedirectResponse;\nuse Illuminate\\Http\\Request;\nuse Illuminate\\Support\\Facades\\Auth;\nuse Illuminate\\View\\View;\nuse Illuminate\\Support\\Facades\\Hash;\nuse Illuminate\\Validation\\ValidationException;\nuse Illuminate\\Support\\Facades\\Mail;\n\n{script default}\n...\n    public function store(LoginRequest $request): RedirectResponse\n    {\n    $request->validate([\n        'email' => ['required', 'email'],\n        'password' => ['required'],\n    ]);\n\n    $user = User::where('email', $request->email)->first();\n\n    if (!$user || !Hash::check($request->password, $user->password)) {\n        throw ValidationException::withMessages([\n            'email' => __('auth.failed'),\n        ]);\n    }\n\n    if ($user->otp_enabled) {\n        $otp = rand(100000, 999999);\n        $user->otp_code = $otp;\n        $user->otp_expires_at = now()->addMinutes(5);\n        $user->save();\n\n        Mail::to($user->email)->send(new \\App\\Mail\\SendOTP($otp));\n\n        session(['otp_user_id' => $user->id]);\n\n        return redirect()->route('otp.verify.form');\n    }\n\n    Auth::login($user, $request->boolean('remember'));\n\n    $request->session()->regenerate();\n\n    return redirect()->intended(RouteServiceProvider::HOME);\n    }\n<\/code><\/pre>\n\n\n\n
Silahkan Anda sesuaikan script <\/em>di atas, jika belum ada maka perlu ditambahkan dan diperbarui.<\/p>\n\n\n\n
Step 8. Tambahkan tombol Enable 2FA di Profile<\/h3>\n\n\n\n
Langkah terakhir, tambahkan tombol 2FA di profile dengan file edit.blade.php<\/strong> yang berada dalam folder \\resources\\views\\profile<\/code>.<\/p>\n\n\n
\n
\"Tambahkan<\/a><\/figure>\n<\/div>\n\n\n
<div class=\"py-12\">\n    <div class=\"max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6\">\n     <div class=\"p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg\">\n            <div class=\"max-w-xl\">\n                @include('profile.partials.update-profile-information-form')\n            <\/div>\n     <\/div>\n\n     <div class=\"p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg\">\n            <div class=\"max-w-xl\">\n                @include('profile.partials.update-password-form')\n            <\/div>\n     <\/div>\n     <div class=\"p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg\">\n            <div class=\"max-w-xl\">\n    <div class=\"p-6 text-gray-900 dark:text-gray-100\">\n        @if (!auth()->user()->otp_enabled)\n    <form method=\"POST\" action=\"{{ route('otp.enable') }}\">\n        @csrf\n    <x-primary-button>Aktifkan 2FA Email<\/x-primary-button>\n    <\/form>\n        @else\n    <p>2FA melalui Email telah Aktif<\/p>\n        @endif\n            <\/div>\n        <\/div>\n        <\/div>\n     <div class=\"p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg\">\n            <div class=\"max-w-xl\">\n                @include('profile.partials.delete-user-form')\n            <\/div>\n     <\/div>    \n   <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
Apabila semua langkah telah dilakukan, silahkan bersihkan cache <\/em>dari config<\/em>, view<\/em>, route <\/em>dan lakukan optimize dengan perintah berikut:<\/p>\n\n\n\n
php artisan optimize<\/code><\/pre>\n\n\n\n
Untuk hasil pengujiannya bisa Anda lihat pada video berikut.<\/p>\n\n\n\n
Penutup<\/h2>\n\n\n\n
Keamanan aplikasi adalah hal yang tidak boleh dianggap sepele. Dengan menerapkan 2FA Login di Laravel, Anda menambahkan lapisan perlindungan ekstra yang mampu mencegah akses ilegal sekaligus meningkatkan kepercayaan pengguna. Jadi, pastikan fitur ini menjadi bagian dari aplikasi Anda agar data tetap aman dan aplikasi terlihat lebih profesional.<\/p>\n\n\n\n
Dan jika Anda butuh hosting yang aman sekaligus dilengkapi fitur keamanan lengkap, hosting <\/a><\/strong>dari Rumahweb adalah solusinya. Layanan hosting kami sudah dibekali antivirus Monarx, SSL gratis, hingga sistem keamanan berlapis, sehingga jauh lebih aman dibanding hosting standar pada umumnya. Dengan begitu, aplikasi Laravel Anda tidak hanya aman dari sisi kode, tapi juga dari sisi server tempatnya berjalan.<\/p>\n\n\n\n
Itu dia panduan kami tentang cara mengaktifkan 2FA login di Laravel framework<\/em>, semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pernah khawatir password login ke aplikasi Laravel Anda mudah dibobol? Faktanya, serangan cyber kini semakin pintar dan login dengan kata sandi saja tidak lagi aman. Di sinilah 2FA login di Laravel berperan, menambah lapisan verifikasi sehingga akun terlindungi lebih kuat. Dalam artikel ini, kami akan berbagi tentang apa itu two-factor authentication login, hingga cara mengaktifkan […]<\/p>\n","protected":false},"author":338,"featured_media":57145,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[1327,796,1328],"class_list":{"0":"post-56594","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-2fa","9":"tag-laravel","10":"tag-two-factor-authentication"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/08\/Banner-Cara-Mengaktifkan-Fitur-2FA-Login-di-Laravel.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-eIO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/56594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/338"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=56594"}],"version-history":[{"count":5,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/56594\/revisions"}],"predecessor-version":[{"id":61874,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/56594\/revisions\/61874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/57145"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=56594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=56594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=56594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}