Download the PHP package scriptoshi/livewire-webauthn without Composer
On this page you can find all versions of the php package scriptoshi/livewire-webauthn. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download scriptoshi/livewire-webauthn
More information about scriptoshi/livewire-webauthn
Files in scriptoshi/livewire-webauthn
Package livewire-webauthn
Short Description WebAuthn authentication package for Laravel 12 using Livewire
License MIT
Informations about the package livewire-webauthn
Laravel Livewire WebAuthn
A modern WebAuthn (FIDO2) authentication package for Laravel 12 using Livewire and Flux components. Enables passwordless and two-factor authentication using security keys, biometrics, and mobile devices.
Overview
Laravel Livewire WebAuthn provides an easy way to integrate WebAuthn (Web Authentication) capabilities into your Laravel 12 application. Built with Livewire and Flux components, it offers a modern, interactive user experience with minimal configuration.
Features
- 🔐 FIDO2 WebAuthn standard compliant
- 🔑 Support for security keys (YubiKey, Titan, etc.)
- 👆 Support for biometrics (TouchID, FaceID, Windows Hello)
- 📱 Support for mobile devices as authenticators
- ⚡ Livewire-powered interactive components
- 🎨 Beautiful UI with Flux components
- 🌓 Full dark mode support
- 🛠️ Simple integration with existing authentication systems
- 🛡️ On-demand WebAuthn confirmation modals
- 🔄 Compatible with Laravel 12 and Livewire 3
Requirements
- PHP 8.2+
- Laravel 12.x
- Livewire 3.x
- Flux components
- A browser that supports WebAuthn (most modern browsers)
Installation
1. Install the package via Composer
2. (Optional) Publish the assets if you need to customize them
3. Run the migrations
This will add the required columns to your users table and create the credentials table.
4. Include the WebAuthnAuthenticatable 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 customize the configuration:
Basic Usage
Integrating with Login as Second factor Auth.
Add the middleware to intercept your login logic. Note: this is the route for POST
when users submit the login form. In volt components this route is missing !.
- Add this to your
routes/web.php
:
Adding WebAuthn Management to User Profile
Add the Livewire component to your user profile or settings page:
With Laravel 12 Starter Kit, you can add a new section for WebAuthn management:
-
Edit
resources/views/components/settings/layout.blade.php
to add the menu item: -
Then Create a WebAuthn view:
resources/views/livewire/settings/webauthn.blade.php
- Add the route to
routes/web.php
:
That's it! The component will handle registering, managing, and using WebAuthn credentials.
Configure Tailwind CSS
To ensure that Tailwind CSS properly processes the component styles, add this package to your content sources in your CSS file (typically resources/css/app.css
):
For example, your CSS file might look similar to this:
Using WebAuthn Confirmation Modals
For enhanced security, you can require WebAuthn confirmation for sensitive operations. This is similar to password confirmation but uses a security key or biometric instead. You can then call call $this->ensureWebAuthnIsConfirmed();
before performing any critical actions.
-
Include the trait in your Livewire component:
- In the components blade, Wrap the sensitive action.
Advanced Usage
Using the Facade Directly
You can use the WebAuthn
facade directly for advanced use cases:
Event Handling
The package dispatches Livewire events that you can listen for:
webauthn-registration-started
- When registration beginswebauthn-credential-registered
- When a credential is registeredwebauthn-credential-removed
- When a credential is removedwebauthn-authentication-started
- When authentication beginswebauthn-confirmed
- When WebAuthn verification is confirmed
Use these events in your Livewire components to respond to WebAuthn actions.
Client-Side Implementation
The package includes all necessary JavaScript for interacting with the WebAuthn API. The included functions handle:
- Base64 URL Encoding/Decoding: Converts between ArrayBuffer and Base64URL format
- Credential Registration: Handles the WebAuthn credential creation process
- Credential Authentication: Handles the WebAuthn assertion process
- Error Handling: Manages and logs WebAuthn errors
Security Considerations
- WebAuthn is designed to be phishing-resistant by binding credentials to specific origins
- User verification (PIN/biometric) can be required for high-security operations
- Attestation can be used to verify the authenticity of authenticator devices
- The package includes protection against replay attacks
Browser Compatibility
WebAuthn is supported in all major modern browsers:
- Chrome 67+
- Firefox 60+
- Safari 13+
- Edge 18+
Mobile support:
- iOS 13+
- Android 7+ with Google Play Services
Troubleshooting
Common Issues
- "navigator.credentials is undefined": The browser doesn't support WebAuthn or the page isn't served over HTTPS.
- "SecurityError": The origin or relying party ID configuration is incorrect or the request is not made from a secure context.
- "Not allowed error": The user rejected the request or the authenticator is already registered.
SSL Requirements
WebAuthn requires HTTPS in production. For local development, localhost is considered a secure context by most browsers.
Contributing
Contributions are welcome! Please feel free to submit a pull request.
License
This package is open-sourced software licensed under the MIT license.
All versions of livewire-webauthn with dependencies
illuminate/support Version ^12.0
livewire/livewire Version ^3.0
web-auth/webauthn-lib Version ^5.1
ramsey/uuid Version ^4.7
symfony/serializer Version ^7.0
symfony/property-access Version ^7.0
symfony/property-info Version ^7.0
symfony/clock Version ^7.0