Haloo.. kali ini admin mau bahas tentang keamanan website dengan Google Authenticator, aplikasi gratis dari Google yang digunakan untuk mengaktifkan 2FA (Two-Factor Authentication). Jadi, setelah kamu login dengan username dan password, kamu juga harus memasukkan kode unik 6 digit dari aplikasi ini. Kode ini berubah setiap 30 detik, jadi hampir mustahil ditebak atau dicuri.

Sebelumnya kamu harus punya Aplikasi Google Authenticator yang bisa kamu unduh di Google Playstore. Aplikasi ini akan memberikan token yang digunakan untuk validasi website kamu ketika login.

Setelah itu, kamu bisa membuat codenya di laravel.. siapin kopi dulu karena agak panjang dan lumayan ribet..  . berikut stepnya :

1. Install Library Pihak Ketiga

pakai package seperti pragmarx/google2fa lalu install dengan menjalankan perintah :

composer require pragmarx/google2fa

2. Buat table migration

Jalankan perintah ini untuk membuat file migration

php artisan make:migration add_google2fa_to_users_table --table=users

Nama table, silahkan kalian sesuaikan sendiri ya..

3. Edit table migration

Laravel akan membuat file migration seperti ini :
database/migrations/2025_07_25_123456_add_google2fa_to_users_table.php

Ubah isinya menjadi seperti ini, nama tablenya jangan lupa kalian sesuaikan ya.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    public function up(): void
    {
        Schema::table('users', function (Blueprint $table) {
           $table->string('google2fa_secret')->nullable();
        });
    }

    public function down(): void
    {
        Schema::table('users', function (Blueprint $table) {
           $table->dropColumn('google2fa_secret');
        });
    }
};

Setelah itu jalankan perintah

php artisan migrate

4. Buat controller untuk menyimpan secret key

Code berikut akan membuat secret key dan menampilkan form yang berisi QR code yang harus kita scan untuk mendapatkan token

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use PragmaRX\Google2FA\Google2FA;
use App\Models\Users;
use BaconQrCode\Renderer\ImageRenderer;
use BaconQrCode\Renderer\Image\SvgImageBackEnd;
use BaconQrCode\Writer;

class Google2FAController extends Controller
{
    protected $google2fa;

    public function __construct()
    {
        $this->google2fa = new Google2FA();
    }

    // Step 1: Tampilkan QR Code untuk setting 2FA
    public function show2faForm()
    {
        $user= auth()->user(); 
        if (!$user) abort(403);

        if (!$user->google2fa_secret) {
            $secret = $this->google2fa->generateSecretKey();
            $user->google2fa_secret = $secret;
            $user->save();
        } else {
            $secret = $user->google2fa_secret;
        }

        $company = 'MyApp'; // ganti sesuai nama aplikasi kamu
        $email = $user->email;

        $otpAuthUrl = $this->google2fa->getQRCodeUrl(
            $company,
            $email,
            $secret
        );

        // Generate QR Code SVG
        $renderer = new ImageRenderer(
            new \BaconQrCode\Renderer\RendererStyle\RendererStyle(200),
            new SvgImageBackEnd()
        );
        $writer = new Writer($renderer);
        $qrCodeSvg = $writer->writeString($otpAuthUrl);

        return view('google2fa.setup', [
            'qrCodeSvg' => $qrCodeSvg,
            'secret' => $secret,
        ]);
    }

    // Step 2: Verifikasi kode OTP dari Google Authenticator
    public function verify2fa(Request $request)
    {
        $request->validate([
            'otp' => 'required|digits:6',
        ]);

        $user = auth()->user();
        $secret = $user->google2fa_secret;

        $valid = $this->google2fa->verifyKey($secret, $request->otp);

        if ($valid) {
            // Simpan flag atau session bahwa 2FA sudah berhasil
            session(['2fa_verified' => true]);

            return redirect()->route('home')->with('success', '2FA berhasil diaktifkan!');
        } else {
            return redirect()->back()->withErrors(['otp' => 'Kode OTP salah']);
        }
    }
}

Function show2faForm ini pada intinya mau mengupdate table user dan mengisi field google2fa_secret dengan secretkey dari google authenticator. Field google2fa_secret terbentuk otomatis ketika kita menjalankan perintah migration tadi.

Setelah itu akan tampil barcode yang bisa di scan oleh aplikasi Google Authenticator.

Function verify2fa digunakan untuk memvalidasi apakah token yang dimasukkan sama seperti yang kita punya di aplikasi Google Authenticator.

5. Buat view untuk scan barcode Google Authentication

Contoh view simplenya seperti ini, nanti silahkan kalian rapihkan sendiri ya..

<!DOCTYPE html>
<html>
<head>
    <title>Setup Google Authenticator 2FA</title>
</head>
<body>
    <h1>Setup Google Authenticator</h1>

    <p>Scan QR code berikut di aplikasi Google Authenticator di HP kamu:</p>

    <div>{!! $qrCodeSvg !!}</div>

    <p>Atau masukkan kode manual ini:</p>
    <code>{{ $secret }}</code>

    <form method="POST" action="{{ route('google2fa.verify') }}">
        @csrf
        <label for="otp">Masukkan kode 6 digit dari Google Authenticator:</label>
        <input type="text" name="otp" id="otp" required autofocus>
        @error('otp')
            <div style="color:red;">{{ $message }}</div>
        @enderror
        <br><br>
        <button type="submit">Verifikasi</button>
    </form>
</body>
</html>

View ini akan mengenerate QR code, dan untuk memasukkan token untuk validasi.

6. Tambahkan route untuk mengakses halamannya.

use App\Http\Controllers\Google2FAController;

Route::middleware('auth')->group(function () {
    Route::get('/2fa/setup', [Google2FAController::class, 'show2faForm'])->name('google2fa.setup');
    Route::post('/2fa/verify', [Google2FAController::class, 'verify2fa'])->name('google2fa.verify');
});

Selesai deh, cara mencobanya :

1. Jalankan route 2fa/setup
2. Scan QR code dengan aplikasi Google Authenticator
3. Masukkan kode 6 digit di form verifikasi
4. Jika benar, 2FA aktif dan kamu bisa pakai mekanisme pengecekan session('2fa_verified') untuk middleware atau proteksi route tertentu.

Note : kalau ketika kamu jalan ada pesan error : Class
"BaconQrCode\Renderer\ImageRenderer" not found

Install bacon-qr-code dengan jalankan perintah : 

composer require bacon/bacon-qr-code

Selesai deh, semoga lancar yang ketika mencoba.. see you.