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.
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
- 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.
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.
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.
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.
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.