Laravel 12 E-Commerce Project Tutorial

Implementing Google Two-Factor Authentication (2FA)

Hi everyone, welcome back to the Laravel E-Commerce Tutorial. This video covers implementing Google Two-Factor Authentication (2FA) using the `pragmarx/google2fa-laravel` package to enhance application security.

  1. Install Necessary Packages

    Install the required Laravel Google 2FA package and the QR code generator using Composer:

    composer require pragmarx/google2fa-laravel
    composer require bacon/bacon-qr-code
  2. Create and Run Migration for `users` Table

    Generate a new migration to add the required columns to the `users` table for storing the 2FA secret key and enabling status:

    php artisan make:migration add_google2fa_secret_and_google2fa_enabled_to_users_table

    In the migration file's`up()` method, add the columns:

    public function up(): void
    {
    Schema::table("users", function (Blueprint $table) {
    $table->text("google2fa_secret")->nullable();
    $table->boolean("google2fa_enabled")->default(false);
    });
    }

    Then, run the migration:

    php artisan migrate

  3. Add Routes and Controller Functions

    Create routes and corresponding controller methods for showing the 2FA setup page, handling the setup process (generating and verifying the secret), and managing the verification during login. This typically includes:

    • A function to generate the QR code and secret key for the user.
    • A function to enable/disable 2FA after verification.
    • A function to show the 2FA verification form during login.
    • A function to verify the 2FA code.
  4. Modify the Login Logic (Redirect to 2FA Check)

    Update the application'slogin handler (e.g., the `authenticated` method in a custom `LoginController` or where the login logic resides). Before redirecting the user, check if 2FA is enabled (`$user->google2fa_enabled`). If it is, redirect them to the 2FA verification page, halting the login process temporarily.

    // ... inside the custom login authenticated method ...
    // Restore Cart and Wishlist (from previous parts)
    // Cart::instance("cart")->restore(Auth::user()->email);
    // Cart::instance("wishlist")->restore(Auth::user()->email);
    // Check if user has 2FA enabled
    $user = $request->user();
    if ($user->google2fa_enabled) {
    // Don'tlog in yet, redirect to 2FA verification
    return redirect()->route(route: "2fa.verify.show")->with(key: "status", value: "Please verify with your 2FA code");
    }
    // Redirect the user to the intended or default page if 2FA is NOT enabled
    return redirect()->intended(default: route(name: "home.index", absolute: false));
  5. Apply 2FA Middleware to Protected Routes

    Apply the `Ensure2FAVerified` middleware (provided by the package) to your protected route groups (`admin` and regular user routes) to ensure users who have 2FA enabled are verified before accessing these areas.

    For Admin Routes:

    Route::middleware(["auth",AuthAdmin::class, Ensure2FAVerified::class])->group(function(){
    // ... Admin routes here ...
    });

    For User Routes:

    Route::middleware(["auth",Ensure2FAVerified::class])->group(function(){
    // ... User routes here ...
    });

Verification and Testing 🔐

1. Log in to the application.
2. Navigate to the 2FA setup page and scan the generated QR code using the Google Authenticator app on your mobile device.
3. Enter the 6-digit code provided by the app to successfully enable 2FA.
4. Log out.
5. Upon logging in again, you should be redirected to a dedicated verification page asking for the 6-digit code before being granted access to the application.