Laravel 12 - Livewire Authentication
Laravel 12 - Livewire Authentication
In this tutorial, we will discuss how to set up Laravel 12 Livewire authentication, including login, registration, and logout. Follow this step-by-step guide to build a secure auth system in Laravel 12 using Livewire for a seamless user experience.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through setting up a fresh Laravel 12 project with Livewire, Volt, and built-in authentication. You'll install Laravel globally, create a new project, and configure essential options during installation. After setup, you'll access the project directory, start the development server, and explore Laravel 12’s new authentication system. The guide also covers enhancing the default dashboard by replacing placeholders with useful statistics like Total Users, Active Sessions, and Recent Activity, making it more informative and engaging. By the end, you'll have a fully functional Laravel 12 project with a modern, interactive dashboard ready for further development and customization.
Step # 1 : Create fresh Laravel project.
Note : If Laravel is not installed globally, you need to install it first. Assuming Composer is already installed, run.
composer global require laravel/installer
Now, create a new Laravel project using the global Laravel installer.
laravel new laravel12
After running the command, you’ll be prompted with the following options.
- Which starter kit would you like to install? → Select Livewire
- Which authentication provider do you prefer? → Select Laravel
- Would you like to use Laravel Volt? → Select Yes
- Which testing framework do you prefer? → Select Pest
- Would you like to run npm install and npm run build? → Select Yes
In Laravel 12, migrations are automatically executed during installation, eliminating the need to manually run php artisan migrate. If you selected Volt, Livewire is pre-configured, making frontend development more seamless. Additionally, if you chose to run npm install and npm run build, your frontend assets will be compiled automatically, saving you the extra setup steps. These improvements ensure that your Laravel 12 project is fully configured and ready to use right after installation, allowing you to focus on development rather than initial setup.
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash, Command Prompt, or Terminal) and navigate to your Laravel project's root directory using.
cd c:xampp/htdocs/laravel12
Once inside the project directory, you can run further commands such as starting the development server, installing dependencies, or configuring your environment.
Step # 3 : Let's see it in Action.
Start the Laravel development server.
php artisan serve
Access the URL 127.0.0.1:8000.
And just like that, we have our Laravel 12 home page up and running, ready to explore,
And just like that, we have our Laravel 12 home page up and running, ready to explore,
Registration :
Access the following URL to view the registration page.
http://127.0.0.1:8000/register
Here, you'll experience Laravel 12’s brand-new authentication system in action, featuring a modern and interactive registration form.
Simply enter your name, email, password, and confirm your password to create an account. Once registered, Laravel will seamlessly handle authentication and redirect you to the dashboard or home page—all without any additional setup. This streamlined system makes user authentication faster and more efficient than ever!
Exploring Dashboard :
After successful registration, you’ll be redirected to the dashboard, giving you an overview of your account and access to essential features for managing your profile and settings.
Easily update your personal information, such as your name and email, through the dashboard’s simple and intuitive interface. Laravel 12 ensures a seamless user experience, making it easy to manage and modify your account details whenever needed.
For added security, you can update your password from the dashboard at any time. Simply enter your current password, choose a new one, and confirm the changes. This ensures that only you have access to your account and helps keep your credentials secure.
Laravel 12 allows you to customize the dashboard’s appearance by switching between light, dark, or system themes. This ensures a comfortable viewing experience based on your preference or device settings. You can easily toggle between these modes from the dashboard, allowing for a more personalized user experience.
Customizing Dashboard :
Right now, we have Laravel 12’s default dashboard with placeholders. But what if we made it more useful? Let’s modify it to display Total Users, Active Sessions, and Recent Activity using static data for now. This will help us see how the dashboard looks with actual content before integrating real dynamic values. Now, let’s apply these changes and bring our dashboard to life!
So, Let's update dashboard.blade.php (resources/views/dashboard.blade.php) code from.
<x-layouts.app title="Dashboard">
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
</div>
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
</div>
</div>
</x-layouts.app>
To
<x-layouts.app title="Dashboard">
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
<!-- Stats Cards -->
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="relative aspect-video flex items-center justify-center bg-neutral-800 text-white p-4 rounded-xl border border-neutral-600">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-400">Total Users</h3>
<p class="text-2xl font-bold text-blue-300">1,245</p>
</div>
</div>
<div class="relative aspect-video flex items-center justify-center bg-neutral-800 text-white p-4 rounded-xl border border-neutral-600">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-400">Active Sessions</h3>
<p class="text-2xl font-bold text-green-300">320</p>
</div>
</div>
<div class="relative aspect-video flex items-center justify-center bg-neutral-800 text-white p-4 rounded-xl border border-neutral-600">
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-400">New Registrations</h3>
<p class="text-2xl font-bold text-purple-300">58</p>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-600 bg-neutral-800 text-white p-4">
<h2 class="text-xl font-semibold text-gray-400 mb-3">Recent Activity</h2>
<ul class="space-y-2">
<li class="text-sm text-gray-500">✅ John Doe registered an account.</li>
<li class="text-sm text-gray-500">✅ Admin updated site settings.</li>
<li class="text-sm text-gray-500">✅ New post added to the blog.</li>
</ul>
</div>
</div>
</x-layouts.app>
Refresh the page, and now our dashboard feels more informative and engaging, setting the stage for integrating real data in the future! With a clear overview of key metrics like user activity and registrations, this foundation allows for further enhancements, such as real-time updates and dynamic data integration.
Conclusion
By following this guide, you successfully set up a fresh Laravel 12 project, explored its authentication system, and enhanced the dashboard with useful statistics. Laravel 12 streamlines the development process with automatic migrations, built-in Livewire support, and an intuitive authentication flow. With these foundations in place, you can now expand your project by integrating real-time data, refining UI components, or adding custom features to suit your application's needs. Whether you're building a small-scale project or a full-fledged web application, Laravel 12 provides the tools and flexibility to bring your ideas to life efficiently.
For more details, refer to the official documentation.
For more details, refer to the official documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments