README

Laravel Jetstream React Shadcn Multi-Login

A modern Laravel starter kit with multiple authentication methods

🚀 About

This project extends the excellent Laravel Jetstream React Shadcn starter kit by adding multiple authentication methods for enhanced user experience and security.

🔐 Authentication Methods

🔑 Traditional Form Login - Classic email/password authentication
✨ Magic Link Login - Passwordless authentication via email
🔒 Passkey Authentication - Modern WebAuthn with biometrics, patterns, and security keys

✨ Features

🎨 Modern Tech Stack

Laravel 12 - Robust PHP backend framework
Laravel Jetstream - Application scaffolding with teams support
React - Modern frontend library with TypeScript
Inertia.js - Modern monolith approach
shadcn/ui - Beautiful, accessible UI components
Tailwind CSS - Utility-first CSS framework

🔐 Advanced Authentication

Laragear WebAuthn - Passkey authentication (fingerprints, Face ID, security keys)
Magic Link Authentication - Secure, passwordless login via email
Two-Factor Authentication - Built-in 2FA support via Jetstream
Session Management - View and manage active browser sessions
Account Security - Password updates, account deletion

🎯 User Experience

Tabbed Login Interface - Clean, organized authentication options
Responsive Design - Works perfectly on all devices
Dark/Light Mode - Theme switching with system preference detection
Toast Notifications - Real-time feedback using Sonner
Loading States - Smooth interactions with loading indicators

🛡️ Security Features

Rate Limiting - Protection against brute force attacks
CSRF Protection - Built-in security tokens
Encrypted Credentials - WebAuthn public keys encrypted in database
Session Security - Secure session management
Email Verification - Verified email requirement option

🔐 Authentication Setup

Magic Link Configuration

Magic link authentication is ready to use out of the box. Just ensure your mail configuration is set up correctly in your .env file.

Features:

Rate limiting (3 attempts per email/5 minutes)
Secure, time-limited tokens
Clean email templates
Automatic login on link click

WebAuthn/Passkey Setup

Passkeys work with HTTPS in production. For local development:

Use Laravel Valet with TLS (recommended for macOS)
```
valet secure your-app-name
```
Use localhost with appropriate browser flags
Or use Laravel Herd with secure site enabled (SSL) (For Windows/macOS)

Supported Authenticators:

📱 Face ID / Touch ID (iOS/macOS)
🔒 Windows Hello
📱 Android Biometrics
🔑 Hardware Security Keys (YubiKey, etc.)
📱 Platform Authenticators

Adding More Authentication Methods

The tabbed login interface makes it easy to add more authentication methods:

Add a new tab in resources/js/pages/Auth/Login.tsx
Create the corresponding controller
Add routes in routes/web.php
Implement the frontend logic

📁 Project Structure

├── app/
│   ├── Http/Controllers/
│   │   ├── MagicLinkController.php      # Magic link authentication
│   │   ├── PasskeyController.php        # Passkey management
│   │   └── WebAuthn/                    # WebAuthn controllers
│   ├── Models/
│   │   └── User.php                     # Extended user model
│   └── Notifications/
│       └── MagicLinkNotification.php    # Magic link emails
├── resources/js/
│   ├── components/ui/
│   │   └── login-tabs.tsx               # Custom login tabs
│   ├── pages/Auth/
│   │   └── Login.tsx                    # Multi-method login page
│   └── pages/Profile/
│       └── Passkey.tsx                  # Passkey management
└── database/migrations/
    └── *_create_webauthn_credentials.php # WebAuthn database schema

🙏 Acknowledgments

gwl12345/laravel-jetstream-react-shadcn - Base starter kit
Laragear/WebAuthn - WebAuthn implementation for Laravel
Laravel Team - For the amazing framework and Jetstream
shadcn - For the beautiful UI components
Vercel - For the React ecosystem

gwl12345 / laravel-jetstream-react-shadcn-multilogin

Maintainers

Details