Add Two Factor Authentication for Vue Starter Kit (#176)

* feat: implement two-factor authentication functionality and UI enhancements (#147)

* refactor: extract two-factor authentication logic to composable for better reusability and cleanup (#148)

* refactor: move two-factor authentication logic from composable to page component and simplify implementation logic (#149)

* refactor: simplify two-factor authentication logic with form components and improve conditional rendering

* feat: add PinInput component and update TwoFactor UI with reka-ui 2.4.1 enhancements

* refactor: replace reka-ui PinInput with custom implementation and optimize TwoFactor UI components

* refactor: revert unneeded changes

* refactor: simplify two-factor authentication

* feat: update two-factor authentication to delay login until confirmation

* wip

* wip

* refactor: centralize two-factor authentication logic, improve UI state and

* refactor: streamline TwoFactor components, simplify form handling, and improve UI logic consistency

* refactor: centralize clipboard and two-factor authentication logic, enhance state management, and optimize TwoFactor UI components

* refactor: enhance TwoFactor UI components with reusable Card layout, improve recovery codes visibility toggle, and standardize spacing

* fix: use `hasEnabledTwoFactorAuthentication` for improved logic clarity in session handling

* refactor: streamline TwoFactor UI logic, improve recovery mode toggle, and standardize naming conventions

* refactor: simplify TwoFactor test structure, replace manual assertions with Inertia assertions, and improve naming consistency

* chore: add newline to end of TwoFactorAuthenticationTest file

* refactor: enhance TwoFactor UI with conditional enable button logic, refine recovery codes handling

* refactor: enhance TwoFactor UI with conditional enable button logic, refine recovery codes handling

* refactor: inline two-factor authentication composable logic into TwoFactor component to simplify structure

* refactor: remove unused `ref` and `focus` logic from Input component to simplify structure

* refactor: enhance two-factor authentication flow with middleware checks, improved UI spacing, and expanded test coverage

* refactor: simplify TwoFactor component with async/await, refine recovery codes handling, and standardize UI consistency

* refactor: reset setup data on modal close, improve form handling, and simplify PinInput structure

* refactor: add reusable reset methods for reactive states, simplify TwoFactor logic, and enhance PinInput handling

* fix: formatting issue

* fix: conditionally apply password confirmation middleware

* chore: update lock file

* fix: make component reactive

* wip

* refactor: split the component

* refactor: use composable

* refactor: remove redundant type definition

* refactor: remove custom useClipboard composable

* refactor: simplify recovery codes visibility logic

* fix: merge issues

* refactor: update two-factor authentication forms to use route helpers

* refactor: test

* refactor: improve two-factor authentication tests and enhance readability

* refactor: update two-factor authentication tests for consistency and improve code readability

* wip

* Move conditional middleware from route to controller

* Fix tests to be consistent based on config

* Remove comments

* refactor: simplify toggleRecoveryCodesVisibility function signature

* remove duplicate type defination

* fix type definition

* More Fixes

* fix types

* fix wayfinder routes

* refactor ui to use defineModal and remove unnecessary things

* remove unneeded async attribute

* remove redundant attribute action

* fix: finish state

* fix: merge conflicts

* state cleanup

* fix typo

* use arrow functions

* Move trait to form-request

* Formatting

* various formatting tweaks

* Update TwoFactorSetupModal.vue

* Bump Fortify

* Use ensure state is valid from Fortify

* Refactor TwoFactorAuthenticationRequest namespace

* Formatting

* Formatting

* Refactor Test

* formatting

* Fix Text Jarring Issue

* Add hasSetupData to avoid enabling 2FA again

* Update useTwoFactorAuth.ts

---------

Co-authored-by: Taylor Otwell <[email protected]>

Author: pushpak1300

.gitignore

@@ -10,6 +10,7 @@
 /resources/js/routes
 /resources/js/wayfinder
 /vendor
+.DS_Store
 .env
 .env.backup
 .env.production

app/Http/Controllers/Auth/AuthenticatedSessionController.php

@@ -10,6 +10,7 @@
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 use Inertia\Response;
+use Laravel\Fortify\Features;
 
 class AuthenticatedSessionController extends Controller
 {
@@ -29,7 +30,18 @@ public function create(Request $request): Response
      */
     public function store(LoginRequest $request): RedirectResponse
     {
-        $request->authenticate();
+        $user = $request->validateCredentials();
+
+        if (Features::enabled(Features::twoFactorAuthentication()) && $user->hasEnabledTwoFactorAuthentication()) {
+            $request->session()->put([
+                'login.id' => $user->getKey(),
+                'login.remember' => $request->boolean('remember'),
+            ]);
+
+            return to_route('two-factor.login');
+        }
+
+        Auth::login($user, $request->boolean('remember'));
 
         $request->session()->regenerate();
 

app/Http/Controllers/Auth/ConfirmablePasswordController.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Settings\TwoFactorAuthenticationRequest;
+use Illuminate\Routing\Controllers\HasMiddleware;
+use Illuminate\Routing\Controllers\Middleware;
+use Inertia\Inertia;
+use Inertia\Response;
+use Laravel\Fortify\Features;
+
+class TwoFactorAuthenticationController extends Controller implements HasMiddleware
+{
+    /**
+     * Get the middleware that should be assigned to the controller.
+     */
+    public static function middleware(): array
+    {
+        return Features::optionEnabled(Features::twoFactorAuthentication(), 'confirmPassword')
+            ? [new Middleware('password.confirm', only: ['show'])]
+            : [];
+    }
+
+    /**
+     * Show the user's two-factor authentication settings page.
+     */
+    public function show(TwoFactorAuthenticationRequest $request): Response
+    {
+        $request->ensureStateIsValid();
+
+        return Inertia::render('settings/TwoFactor', [
+            'twoFactorEnabled' => $request->user()->hasEnabledTwoFactorAuthentication(),
+            'requiresConfirmation' => Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm'),
+        ]);
+    }
+}

app/Http/Controllers/Settings/TwoFactorAuthenticationController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Requests\Auth;
 
+use App\Models\User;
 use Illuminate\Auth\Events\Lockout;
 use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Facades\Auth;
@@ -32,15 +33,18 @@ public function rules(): array
     }
 
     /**
-     * Attempt to authenticate the request's credentials.
+     * Validate the request's credentials and return the user without logging them in.
      *
      * @throws \Illuminate\Validation\ValidationException
      */
-    public function authenticate(): void
+    public function validateCredentials(): User
     {
         $this->ensureIsNotRateLimited();
 
-        if (! Auth::attempt($this->only('email', 'password'), $this->boolean('remember'))) {
+        /** @var User $user */
+        $user = Auth::getProvider()->retrieveByCredentials($this->only('email', 'password'));
+
+        if (! $user || ! Auth::getProvider()->validateCredentials($user, $this->only('password'))) {
             RateLimiter::hit($this->throttleKey());
 
             throw ValidationException::withMessages([
@@ -49,6 +53,8 @@ public function authenticate(): void
         }
 
         RateLimiter::clear($this->throttleKey());
+
+        return $user;
     }
 
     /**
@@ -75,7 +81,7 @@ public function ensureIsNotRateLimited(): void
     }
 
     /**
-     * Get the rate limiting throttle key for the request.
+     * Get the rate-limiting throttle key for the request.
      */
     public function throttleKey(): string
     {

app/Http/Requests/Auth/LoginRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests\Settings;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Laravel\Fortify\Features;
+use Laravel\Fortify\InteractsWithTwoFactorState;
+
+class TwoFactorAuthenticationRequest extends FormRequest
+{
+    use InteractsWithTwoFactorState;
+
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return Features::enabled(Features::twoFactorAuthentication());
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [];
+    }
+}

app/Http/Requests/Settings/TwoFactorAuthenticationRequest.php

@@ -6,11 +6,12 @@
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Laravel\Fortify\TwoFactorAuthenticatable;
 
 class User extends Authenticatable
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
-    use HasFactory, Notifiable;
+    use HasFactory, Notifiable, TwoFactorAuthenticatable;
 
     /**
      * The attributes that are mass assignable.

app/Models/User.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Cache\RateLimiting\Limit;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\Support\ServiceProvider;
+use Inertia\Inertia;
+use Laravel\Fortify\Fortify;
+
+class FortifyServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(): void
+    {
+        Fortify::twoFactorChallengeView(fn () => Inertia::render('auth/TwoFactorChallenge'));
+        Fortify::confirmPasswordView(fn () => Inertia::render('auth/ConfirmPassword'));
+
+        RateLimiter::for('two-factor', function (Request $request) {
+            return Limit::perMinute(5)->by($request->session()->get('login.id'));
+        });
+    }
+}

app/Providers/FortifyServiceProvider.php

@@ -2,4 +2,5 @@
 
 return [
     App\Providers\AppServiceProvider::class,
+    App\Providers\FortifyServiceProvider::class,
 ];

bootstrap/providers.php

@@ -11,6 +11,7 @@
     "require": {
         "php": "^8.2",
         "inertiajs/inertia-laravel": "^2.0",
+        "laravel/fortify": "^1.30",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1",
         "laravel/wayfinder": "^0.1.9"