Download the PHP package scriptoshi/livewire-2fa without Composer

Laravel Livewire 2FA

A simple and elegant two-factor authentication package for Laravel 12 using Livewire and Flux components. Built to work seamlessly with Laravel 12's authentication stack.

Overview

Laravel 2FA provides an easy way to add Google Authenticator compatible two-factor authentication to your Laravel 12 application. Built with Livewire and Flux components, it offers a modern, interactive user experience with minimal configuration.

Features

• 🔒 Google Authenticator compatible (TOTP)
• ⚡ Livewire-powered interactive components
• 🎨 Beautiful UI with Flux components
• 🌓 Full dark mode support
• 🛠️ Simple integration with existing authentication systems
• 🔑 Recovery codes for account access backup
• 🛡️ On-demand password and 2FA confirmation modals
• 🔄 Compatible with Laravel 12 and Livewire 3

Requirements

• PHP 8.2+
• Laravel 12.x
• Livewire 3.x
• Flux components

Installation

1. Install the package via Composer

2. (optional) If you need to customize, publish the assets

3. Run the migrations

This will add the required columns to your users table.

4. Include the TwoFactorAuthenticatable trait in your User model

Configuration

The package comes with sensible defaults, but you can customize it using the corresponding .env variables. Add the following lines to your .env to customise the config

Basic Usage

Adding 2FA Management to User Profile

Add the Livewire component to your user profile page:

On Laravel 12 Starter kit:

1. Edit resources/views/components/settings/layout.blade.php and add:

2. Create the two factor auth view: resources/views/livewire/settings/twofactor.blade.php

3. Add the route to routes/web.php:

Integrating with Login (Laravel 12 Starter Kit)

The easiest way to integrate 2FA with Laravel 12's Livewire login is by adding the WithTwoFactorAuthentication trait directly to your login component:

1. Update your resources/views/livewire/auth/login.blade.php Volt component:

update the Login method on the form submit from wire:submit="login" to wire:submit="twoFactorLogin"

Include the 2FA Modal after the form closing tag.

That's it! The login component will now:

1. Attempt normal login with email/password
2. Check if the user has 2FA enabled
3. If 2FA is enabled, show the 2FA modal for code verification
4. Complete the login process after successful 2FA verification

Using Confirmation Modals

For sensitive actions in your application, you can require password or 2FA verification:

Password Confirmation Modal

1. Wrap the sensitive action in your component:

2. Include the trait in your Livewire component:

Two-Factor Confirmation Modal

For even higher security, you can require 2FA confirmation for critical operations:

1. Include the modal component in your template:

2. Include the trait in your Livewire component:

Customization

Views

Customize the views by publishing them and modifying as needed:

This will publish the views to resources/views/vendor/two-factor-auth/.

Styling

The components use Flux components and support dark mode out of the box. You can customize the appearance by:

1. Publishing the views (as shown above)
2. Modifying the Flux component usage or class attributes
3. For more extensive customization, you can extend or override the Livewire components

Using the Facade Directly

You can use the TwoFactorAuth facade directly for advanced use cases:

License

This package is open-sourced software licensed under the MIT license.