Laravel 13 - React Authentication & Dashboard.
Laravel 13 - React Authentication & Dashboard.
In this tutorial, we will learn how to build a Laravel 13 app with React, set up authentication, create a live dashboard, and use Vite for hot reloading to make development fast and interactive.
Quick Overview
This guide walks you through setting up a fresh Laravel 13 project with React and Laravel’s built-in authentication. You’ll install Laravel globally, create a new project, and choose key setup options like the React starter kit, authentication scaffolding, and frontend asset compilation with npm and Vite. After setup, you’ll navigate to the project directory, start the Laravel development server, and run the Vite dev server to enable hot reloading for your React components. The guide also covers registering a new user and exploring Laravel’s interactive login system, as well as customizing the dashboard by replacing placeholder blocks with meaningful stats such as Total Members, Projects Running, Pending Requests, and Monthly Revenue, along with a Latest Updates section and Quick Tasks buttons. By the end, you’ll have a fully functional Laravel 13 project with a live updating React dashboard, ready for further development and customization.
Step # 1 : Initialize a New Laravel 13 Project with React.
Before you begin, make sure Composer is installed on your system, since Laravel relies on it for managing dependencies. You should also have Laravel Installed globally. If it’s not already available, you can install it using Composer with the following command.
composer global require laravel/installer
Once everything is ready, create a fresh Laravel 13 project by running.
laravel new laravelReact
During the installation process, Laravel will prompt you to choose a few configuration options. Select the following.
- Which starter kit would you like to install? → Type React to use the React starter kit for building dynamic user interfaces.
- Which authentication provider do you prefer? → Choose Laravel to enable the built-in authentication system.
- Which testing framework do you prefer? → Select Pest for a clean and modern testing workflow.
- Do you want to install Laravel Boost to improve AI-assisted coding? → Select No unless you specifically want AI-powered coding assistance.
- Would you like to run npm install and npm run build? → Select Yes to automatically install dependencies and compile frontend assets.
With these options selected, Laravel 13 will automatically run your database migrations during the setup process, so there’s no need to manually execute php artisan migrate. Since you also chose to run npm install and npm run build, your frontend dependencies will be installed and your assets compiled as part of the installation. By the end, your project will be fully configured and ready for development, allowing you to start building your application right away.
Step # 2 : Navigate to Your Laravel 13 Project Directory.
Open your terminal whether it’s Command Prompt, PowerShell, Git Bash, or any shell you prefer and move into the root directory of your newly created Laravel project.
cd c:/xampp/htdocs/laravelReact
After switching into the project directory, you’re now working directly within your application. This is where you’ll execute Artisan commands, run your project locally, and handle tasks like installing packages or updating configurations as you continue development.
Step # 3 : Run and View Your Laravel 13 Application.
To preview your Laravel 13 project in the browser, start the development server by running.
php artisan serve
Next, open a second terminal window (Git Bash, PowerShell, or any terminal you prefer) and start the Vite development server.
npx vite
Running Vite in a separate terminal allows your React frontend to update in real time. As you make changes to your components whether it’s layout, logic, or styling those updates are reflected instantly in the browser without needing to refresh the page manually. Once both servers are up and running, open your browser and visit: http://127.0.0.1:8000. You should now see your Laravel application successfully running with the React setup in place.
Register a New User Account :
To test Laravel’s built-in authentication system, navigate to: http://127.0.0.1:8000/register. You’ll be presented with a clean and interactive registration form. Enter your name, email address, password, and confirm your password to proceed. Once the form is submitted, Laravel handles the entire process automatically your account is created, you’re logged in instantly, and redirected to the dashboard or home page without any additional steps. This seamless flow keeps the signup process quick and secure, so you can continue developing your application without worrying about authentication setup.
To test Laravel’s built-in authentication system, navigate to: http://127.0.0.1:8000/register. You’ll be presented with a clean and interactive registration form. Enter your name, email address, password, and confirm your password to proceed. Once the form is submitted, Laravel handles the entire process automatically your account is created, you’re logged in instantly, and redirected to the dashboard or home page without any additional steps. This seamless flow keeps the signup process quick and secure, so you can continue developing your application without worrying about authentication setup.
Explore and Manage Your Dashboard :
After completing registration, you’ll be redirected to the dashboard, which acts as the main hub for managing your account and interacting with key features in Laravel. The interface is simple and user-friendly, allowing you to update your name, email, or even delete your account with just a few clicks.
After completing registration, you’ll be redirected to the dashboard, which acts as the main hub for managing your account and interacting with key features in Laravel. The interface is simple and user-friendly, allowing you to update your name, email, or even delete your account with just a few clicks.
For enhanced security, head over to the Security tab to update your password. After confirming your current password, you’ll be able to set a new one and save the changes. This extra verification step ensures that sensitive updates remain protected.
You can also customize the appearance of your dashboard through the Appearance tab. From here, switch between light mode, dark mode, or match your system settings. This flexibility helps create a more comfortable working environment, whether you prefer a bright interface or a darker theme for extended sessions.
Customizing Dashboard :
The dashboard works out of the box, but at the moment it feels quite minimal and doesn’t provide much insight into your application. Let’s improve it by adding useful statistics, a Overview Stats, Latest Updates and Quick Taks sections. For now, we’ll use static data to shape the layout. Later, you can connect this to your backend in Laravel so the data updates dynamically. To get started, open the following file: resources/js/Pages/Dashboard.jsx. Replace its contents with the React component below
The dashboard works out of the box, but at the moment it feels quite minimal and doesn’t provide much insight into your application. Let’s improve it by adding useful statistics, a Overview Stats, Latest Updates and Quick Taks sections. For now, we’ll use static data to shape the layout. Later, you can connect this to your backend in Laravel so the data updates dynamically. To get started, open the following file: resources/js/Pages/Dashboard.jsx. Replace its contents with the React component below
export default function Dashboard() {
return (
<div className="flex flex-col gap-6 p-6 bg-gray-100 dark:bg-gray-900 min-h-screen">
{/* Overview Stats */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<div className="p-4 bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-blue-300">
<p className="text-sm">Total Members</p>
<h2 className="mt-2 text-2xl font-bold">340</h2>
<p className="mt-1 text-xs text-green-200">+25 this month</p>
</div>
<div className="p-4 bg-gradient-to-r from-green-400 to-green-600 text-white rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-green-300">
<p className="text-sm">Projects Running</p>
<h2 className="mt-2 text-2xl font-bold">18</h2>
<p className="mt-1 text-xs text-green-200">+2 today</p>
</div>
<div className="p-4 bg-gradient-to-r from-red-400 to-red-600 text-white rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-red-300">
<p className="text-sm">Pending Requests</p>
<h2 className="mt-2 text-2xl font-bold">12</h2>
<p className="mt-1 text-xs text-red-200">-1 from yesterday</p>
</div>
<div className="p-4 bg-gradient-to-r from-purple-400 to-purple-600 text-white rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-purple-300">
<p className="text-sm">Monthly Revenue</p>
<h2 className="mt-2 text-2xl font-bold">$8,450</h2>
<p className="mt-1 text-xs text-green-200">+18% this month</p>
</div>
</div>
{/* Latest Updates & Quick Tasks */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Latest Updates */}
<div className="col-span-2 p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700">
<h3 className="text-lg font-semibold mb-3 text-gray-900 dark:text-gray-100 border-b pb-2">Latest Updates</h3>
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
<li className="hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded">Olivia launched a new campaign <span className="float-right text-xs text-gray-400">15 min ago</span></li>
<li className="hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded">Liam completed a task <span className="float-right text-xs text-gray-400">45 min ago</span></li>
<li className="hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded">You updated your profile picture <span className="float-right text-xs text-gray-400">2 hours ago</span></li>
<li className="hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded">New member joined the team <span className="float-right text-xs text-gray-400">3 hours ago</span></li>
</ul>
</div>
{/* Quick Tasks */}
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-200 dark:border-gray-700">
<h3 className="text-lg font-semibold mb-3 text-gray-900 dark:text-gray-100 border-b pb-2">Quick Tasks</h3>
<button className="w-full mb-2 py-2 px-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">Start New Project</button>
<button className="w-full mb-2 py-2 px-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors">Submit Report</button>
<button className="w-full py-2 px-3 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">Invite Team Member</button>
</div>
</div>
</div>
);
}
With Vite running, your changes will be reflected instantly in the browser no manual refresh required. Even with static content, this updated layout gives your dashboard a more realistic and structured feel, making it easier to expand with dynamic data later.
Conclusion
By following this guide, you have successfully set up a fresh Laravel 13 project, explored its interactive registration and login system, and built a React powered dashboard with meaningful statistics, Overview Stats, Latest Updates, and Quick Tasks. Laravel 13 streamlines the development workflow with built in React support, optional authentication scaffolding, automatic migrations, and compiled frontend assets via Vite, allowing you to focus on building features rather than setup. With these foundations in place, you can now expand your project by connecting the dashboard to real backend data, customizing UI components, or adding new functionality to suit your application’s needs. Whether you are building a small project or a complex web application, Laravel 13 combined with React and Vite provides the flexibility and tools to bring your ideas to life efficiently.
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