Create UI Auth Using React Auth Scaffolding in Laravel 9

You can implement Laravel UI Auth using React auth scaffolding. This is similar to using Laravel Bootstrap auth, and Laravel Vue Auth. The front-end auth scaffolding will be generated by the React auth. You will have the same auth functionalities like Login, Register, and the Forgot Password. Now, it totally depends on you to use any of these auth scaffolding in your project. You can customize its appearance. You can use any CSS framework for beautifying the UI. So, in this post, let’s see how we can implement React auth scaffolding quickly in Laravel 9.

We are going to achieve the below auth functionalities.

You will have the Login option. So, after clicking on that, you will have the Login page.

Also, you have the Reset Password functionality. So, for that, you will have the below page.

You can customize these page layouts as per your need. In this post, we will be implementing the auth only.

Use Yajra Datatable in Laravel 9 with Server Side Processing

Prerequisites

In this post, will be using Laravel UI Auth using React Auth Scaffolding. It is recommended to have the following configurations in your system.

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

Create a Project Setup For React Auth in Laravel 9

Open the terminal and create a new project using the below command.

composer create-project --prefer-dist laravel/laravel auth-app

Once the project setup is done, let’s connect it with a database.

How to Upload Multiple Images Using Ajax in Laravel 9

Create and Configure Database

Firstly, create a database. Then navigate to the project folder. Now, look for the .env file and add 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

Next, you have to install the UI auth in your project.

How to Create a CRUD Application Using Ajax in Laravel 9

Install UI Auth Package in Laravel 9 For React Auth

At the very first step, you have to install the UI auth using the below command.

composer require laravel/ui

The command may take a couple of seconds to install the package.

Install Frontend Auth Scaffolding Using React Auth

Next, you have to install Auth scaffolding. It will generate the UI for the register, login, and forgot password functionalities.

After adding React scaffolding, you will have to install frontend dependencies. It will be done using the below command.

npm install && npm run dev

It will build a mix of CSS and JS.

Lastly, you have to migrate the database.

How to Upload Multiple Files in Laravel 9 with Validation

Migrate Database For Auth Management

For handling auth system, you have to migrate the database. So, the tables will be dumped out in the database and you will be able to Register, Login, and Reset Password.

php artisan migrate

For the reset password functionality, you will have to configure your email in the .env file. After that, you will be able to trigger an email for the password reset link.

Conclusion

So, we implemented the Auth scaffolding using the Laravel UI package in Laravel 9. For the front-end UI management, we used React Auth. This is quite simple to use in the Laravel Web application. This is customizable so you can enhance the UI and other functionalities as well. I hope this will be easy for you to implement in your project.