Laravel 13 – Laravel UI Bootstrap Authentication.
Laravel 13 – Laravel UI Bootstrap Authentication.
In this tutorial, we will learn how to set up authentication in Laravel 13 using Laravel UI and Bootstrap. We will cover login, registration, database setup, and dashboard with a clean and practical workflow.
Quick Overview
This guide walks you through setting up a fresh Laravel 13 application with Laravel UI and Bootstrap authentication. You’ll begin by installing Laravel globally and creating a new project while selecting basic setup options such as the testing framework, database type, and skipping default frontend builds to keep full control over configuration. After the project is created, you’ll navigate into the project directory, install the Laravel UI package, and generate Bootstrap based authentication scaffolding that provides login, registration, and password reset features. Next, you’ll configure your database connection and run migrations to automatically generate all required tables for the authentication system. Once the backend is ready, you’ll start the frontend development process and run the Laravel development server to make the application accessible in the browser. Finally, you’ll open the application in your browser to test registration, login, and dashboard access, completing a fully working Laravel 13 setup with Bootstrap authentication, ready for further development and customization.
Step # 1 : Setting Up a New Laravel 13 Application.
Before getting started, make sure Composer is installed on your system, as it is required to manage Laravel and its dependencies. Also ensure the Laravel Installer is available globally. If it’s not installed yet, run.
composer global require laravel/installer
Once the Installer is ready, create a new Laravel 13 project using.
laravel new laravel13ui
After running the command, Laravel will guide you through a few setup prompts. Choose the following options.
- Which starter kit would you like to install? → Type none since we will install Laravel UI with Bootstrap manually in later steps.
- Which testing framework do you prefer? → Select Pest for a modern and simplified testing experience.
- Do you want to install Laravel Boost to improve AI-assisted coding? → Select No to keep the setup minimal.
- Which database will your application use? → Select MySQL as we will configure it manually later.
- Would you like to run the default database migrations? → Select No as we will run the migrations in later step.
- Would you like to run npm install and npm run build? → Select No as we will handle frontend dependencies in a later step.
After completing these steps, you will have a fresh Laravel 13 application installed with a clean setup and no additional starter kits or frontend dependencies. This gives you full control to install and configure Laravel UI with Bootstrap in the next steps without any conflicts or unnecessary pre-installed features.
Step # 2 : Navigate to Your Laravel 13 Project Directory.
Open your terminal (Git Bash, Command Prompt, or your system’s default terminal) and move to the root directory of your Laravel project.
cd c:/xampp/htdocs/laravel13ui
This ensures you are inside your project folder, where all Laravel commands should be executed.
Step # 3 : Install Laravel UI Package.
To set up Laravel UI authentication in your application, install the Laravel UI package using the following Composer command.
composer require laravel/ui
Laravel UI provides a simple way to generate authentication features such as login, registration, and password reset using Blade templates. It offers a minimal and straightforward approach compared to newer starter kits, making it ideal when you only need basic authentication without extra complexity.
Step # 4 : Generate Laravel UI Authentication Scaffolding.
After installing the Laravel UI package, generate the authentication scaffolding with Bootstrap styling by running.
php artisan ui bootstrap --auth
You will see a prompt like below.
The [Controller.php] file already exists. Do you want to replace it? (yes/no)
Just type Yes and continue. Once the scaffolding is generated, install the frontend dependencies so everything works properly in the browser.
npm install
Laravel usually installs most of the required packages automatically, but in some cases a few dependencies might be missing. In my case, I had to install Axios manually to avoid errors. You can run the following command to do so.
npm install axios
And to make sure Bootstrap components like the dropdown and navbar work correctly, install Bootstrap along with Popper.
npm install bootstrap @popperjs/core
Now open resources/js/app.js and make sure it includes the following line. If it’s not there, simply add it.
import './bootstrap';
Then open welcome.blade.php and remove the default Vite conditional block (@if, @else, and @endif around @vite), while keeping the existing Tailwind CSS content inside the file, and save it.
From:
@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
@vite(['resources/css/app.css', 'resources/js/app.js'])
@else
/*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */ ......
@endif
To:
/*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */ .....
After completing this step, the authentication scaffolding with Bootstrap will be generated, and the unnecessary default Vite conditional block will be removed from the welcome.blade.php file.
Step # 5 : Run the Database Migrations.
After finishing the authentication setup, the next step is to configure your database connection. Make sure your database credentials are set correctly in the .env file. Then run the migration command.
php artisan migrate
If the database does not exist, Laravel will display a prompt like.
WARN The database 'laravel13ui' does not exist on the 'mysql' connection.
Would you like to create it? (yes/no)
Type Yes to allow Laravel to automatically create the database for you. Running this command will generate all the required tables for your application. In a Laravel 13 setup, this includes tables such as users, password_reset_tokens, sessions, cache, cache_locks, jobs, job_batches, and failed_jobs, along with the migrations table, which Laravel uses to track all executed migrations.
Step # 6 : Start Development Server and Run the Application.
Now that the database is ready, we need to run the application in the browser. Start the frontend development process.
npm run dev
Next, start the Laravel development server.
php artisan serve
Once both are running, open your browser and visit: http://127.0.0.1:8000. If everything has been set up correctly, you should see your Laravel 13 application running with the Bootstrap authentication system fully functional.
From http://127.0.0.1:8000/register, you can register a new user and will be redirected to the dashboard.
After completing registration, you can log in with your credentials at http://127.0.0.1:8000/login. Once logged in, you will be redirected to the dashboard where you can confirm that the authentication system is working properly and all routes are functioning as expected.
At this point, your Laravel UI setup is complete and you now have a solid foundation to start building additional features on top of it.
Conclusion
By following this guide, you have successfully set up a fresh Laravel 13 application with Laravel UI and Bootstrap authentication, configured the database, and completed the full authentication system including registration, login, and dashboard access. You also started the frontend development process and ran the Laravel development server to ensure the application runs correctly in the browser. Laravel 13 provides a clean and flexible structure that makes it easy to manage both backend and frontend setup while keeping the workflow simple and organized. With this foundation in place, you can now extend your project by adding new features, customizing the UI, integrating real data, or building more advanced functionality based on your requirements. Whether you are working on a small project or a larger application, Laravel gives you the tools needed to scale efficiently and maintain clean architecture.
For more details, refer to the official Laravel documentation and the Laravel UI 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