Laravel 10 - UI Authentication
Laravel 10 - UI Authentication
In this tutorial, we will discuss how to implement UI Auth in Laravel 10. Laravel UI Auth is a package that provides a simple way to scaffold basic authentication views and routes (such as login, registration, and password reset) for a Laravel project. It is commonly used to quickly set up authentication in Laravel applications.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we walk you through setting up a basic authentication system in a Laravel 10 application using the Laravel UI package. Starting with a fresh Laravel project, we navigate into the project folder, install the Laravel UI package, and scaffold the authentication views using Bootstrap. Then we run database migrations to prepare the necessary tables for login, registration, and password resets. After that, we compile the frontend assets with Vite and launch the development server. By the end of this guide, your app will be fully equipped with a working authentication system, complete with login, registration, password recovery, and email verification pages, all styled with Bootstrap and ready to be customized for your needs.
Step # 1 : Set Up a Fresh Laravel Project.
To get started, you'll first need a new Laravel project. If you already have Laravel installed globally on your system, you can quickly scaffold a new application by running the following command.
laravel new auth
Alternatively, if you prefer using Composer (which works regardless of whether Laravel is installed globally), you can create the project with.
composer create-project laravel/laravel --prefer-dist auth
We’re starting from scratch to make sure everything is clean and easy to manage. Creating a new Laravel project gives us a blank canvas, free from any leftover code or potential conflicts. This is especially helpful when trying out new features like authentication or experimenting with third-party packages. The new project will be created inside a folder named auth, containing all the core Laravel files and a well-structured foundation to build on. Whether you're testing or working on something real, starting fresh gives you full control and peace of mind.
Step # 2 : Navigate to Your Laravel Project.
Once the project is created, open your terminal (such as Git Bash, Command Prompt, or Terminal on macOS/Linux) and move into your Laravel project’s root directory. For example.
cd c:xampp/htdocs/auth
This command takes you inside the newly created auth project folder. From here, you’ll be able to run all Laravel and Artisan commands, set up authentication, and manage other development tasks. Make sure you're in the correct directory before continuing, as all project-specific commands depend on being inside this root folder.
Step # 3 : Install Laravel UI.
To add basic authentication scaffolding (like login and registration forms), install the Laravel UI package by running the following Composer command.
composer require laravel/ui
The Laravel UI package offers a quick way to scaffold traditional authentication views and routes in Laravel using Blade templates. While Laravel Breeze and Jetstream are newer alternatives, Laravel UI is lightweight and ideal for projects that don’t need advanced features like two-factor authentication or team support. This step prepares your application to generate the front-end boilerplate for user auth using Bootstrap, Vue, or React.
Step # 4 : Install UI Auth Scaffolding.
After installing the Laravel UI package, you can scaffold the authentication system with Bootstrap styling by running.
php artisan ui bootstrap --auth
This command automatically generates all the necessary front-end files and routes for user authentication, including login, registration, password reset, and email verification views. It also sets up a basic Bootstrap layout with navigation links that appear based on the user’s authentication state. This saves time and provides a ready-to-use starting point for building secure sections of your application. Once this is done, you'll have a familiar, responsive UI to work with right out of the box.
Step # 5 : Run the Database Migrations.
Once the authentication scaffolding is in place, it's time to set up the database tables by running.
php artisan migrate
Running php artisan migrate sets up your database with all the essential tables for user authentication, including users, password_resets, and email_verifications. If the database defined in your .env file doesn’t exist yet, just create it using phpMyAdmin or the MySQL CLI, then rerun the migration. This step gets your app’s authentication system ready to go.
Step # 6 : Set Up and Run the Vite Dev Server.
To compile your frontend assets like JavaScript and CSS, run the following command.
npm install && npm run dev
This installs all the required Node dependencies and starts Laravel’s Vite development server, which handles real-time asset bundling and hot module replacement. It ensures your Bootstrap styles and authentication views are properly compiled and up to date while you're developing.
Step # 7 : Launch the Laravel Development Server.
Now that your frontend assets are compiled and your database is set up, it’s time to launch the Laravel development server so you can test your authentication features in the browser. Open a new terminal window (such as Git Bash, Command Prompt, or Terminal on macOS/Linux) and navigate to your project root if you're not already there. Then run the following command.
php artisan serve
This command will start Laravel's built-in development server and make your application accessible at http://localhost:8000 on your local machine. Once the server is running, open that URL in your web browser to see your Laravel app in action.
You can now explore the full authentication system through these default routes:
- Login Page: /login – Allows existing users to securely sign in using their email and password.
- Register Page: /register – Enables new users to create an account with basic credentials.
- Forgot Password Page: /forgot-password – Provides a form to request a password reset link via email.
- Email Verification Page: /email/verify – Displays a prompt asking users to verify their email address after registration.
With all of these routes set up and functioning, your Laravel app is now equipped with a complete, working authentication system. Users can sign up, log in, reset passwords, and verify their email, all without writing a single line of authentication logic manually.
Conclusion
By following this step-by-step guide, you’ve successfully set up a basic authentication system in your Laravel 10 application using the Laravel UI package. Starting from a clean Laravel install, you installed the UI scaffolding, configured Bootstrap styling, ran migrations, and compiled your frontend assets using Vite. With everything in place, your app now includes ready-to-use login, registration, password reset, and email verification functionality. This setup is perfect for quickly bootstrapping authentication in lightweight projects or prototypes without the overhead of more complex starter kits.
For more details, please refer to the laravel/ui package 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