Create UI Auth Scaffolding Using Bootstrap in Laravel 9

Laravel provides a couple of auth scaffolding packages for the user. These packages consist User Register, Login, and Password Reset options. For any user-based authentication system, these three functionalities are almost required. If you will be creating these features in your application, you will have to write a couple of lines of code. That will be a time taking thing. So, why don’t we choose some in-built packages which provide these functionalities? Let’s take a look at the UI Auth in Laravel 9. You can use UI Auth in Laravel 9 with Bootstrap, React, and Vue as well. In this post, we are going to cover UI Auth using Bootstrap.

We will be achieving the below results.

You will have Auth options in the top right corner of the homepage. On click on Register, you will have the Register page.

There is a Login option as well. On click on that, it will open the login page as shown here.

There is a Rest password option. So, you can reset the password as well. But, it will require an email configuration through which the email will be triggered.

Let’s start by creating the Laravel project.

Use Yajra Datatable in Laravel 9 with Server Side Processing

Prerequisites

We will be implementing Bootstrap UI Auth using Auth Scaffolding in Laravel 9. Therefore, you will require the following configurations.

• PHP >=8.0.2
• Composer
• Apache/Nginx Server
• VS Code Editor (Optional)
• MySQL (version > 5)

Create Project For UI Auth in Laravel 9

If you don’t have a Laravel project setup, then you can go ahead with this step. Open the terminal and hit the below command.

composer create-project --prefer-dist laravel/laravel blog

Once, the project setup is completed, create a database for it.

How to Upload Multiple Images Using Ajax in Laravel 9

Create and Configure Database

The project will require a database configuration. Hence, create a database first in MySQL. Then look at the .env file in the project. Under DB options, replace the database credentials.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DATABASE_NAME
DB_USERNAME=DATABASE_USERNAME
DB_PASSWORD=DATABASE_PASSWORD

Once, you have done, let’s install the UI Auth package.

How to Upload Image Using Ajax in Laravel 9 with Validation

Install UI Auth Package in Laravel 9

Open the terminal and hit the below command.

composer require laravel/ui

It will take a couple of seconds to install.

Once the installation is completed, you will have to add the authentication scaffolding.

How to Create a CRUD Application Using Ajax in Laravel 9

Add Bootstrap Auth Scaffolding in Laravel

Stay ahead to the terminal and hit the below command. Here, we are going to install Bootstrap auth scaffolding. Laravel provides other options as well like – React and Vue auth. We will see it in other posts.

php artisan ui bootstrap --auth

This auth system requires some UI dependencies. So, in order to install that, you have to hit the below command.

npm install && npm run dev

It will generate some CSS and JS files for the auth scaffolding. Let it be completed. On the success of the build, it will generate the CSS and JS files.

That’s it. Now, you have to migrate the tables into the database.

How to Upload Multiple Files in Laravel 9 with Validation

Migrate Tables in Laravel 9

For migrating the tables, hit the below command in the terminal.

php artisan migrate

Once, the migration is completed, you can run the application to see the results.

How to Upload File in Laravel 9 With Validation

Configure Email For Sending Password Reset Link

For sending a password reset link email, you have to add the email configuration. So, look at the .env file and add these credentials.

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME={{YOUR_MAIL_USERNAME}}
MAIL_PASSWORD={{YOUR_MAIL_PASSWORD}}
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS={{FROM_ADDRESS}}
MAIL_FROM_NAME="${APP_NAME}"

After adding the email configuration, you will be able to trigger an email for the password reset link.

Conclusion

We covered the Bootstrap UI auth in Laravel 9. Using the auth scaffolding we have the Register, login, and Password Reset link functionalities. You can customize the design of the forms and enhance the functionalities as well. That’s it for this post.