How to Create Auth Scaffolding Using React JS in Laravel 10

Laravel provides React Auth scaffolding for managing authentication. The React auth scaffolding provides the User Registration, Login, Logout, and Forgot password. These features are inbuilt into Laravel if you install the front-end scaffolding. It will install CSS and JS automatically. Laravel Vite bundles all the CSS and JS which are required to load the auth scaffolding. It makes the application faster. We already implemented Auth scaffolding using Bootstrap and Vue JS as well. But in this post, today, I will show you to implement React auth scaffolding in Laravel 10.

This is the result that we are going to achieve in this post using React Auth scaffolding.

By default, in the landing page of Laravel, you will have Register and Login option.

By clicking on Register, you can create a new account.

The auth scaffolding redirects automatically to the Dashboard page after a successful registration.

Similarly, by clicking on the Login page, you will be redirected to the Login page.

So, let’s start quickly to achieve the above results in this post using React Auth Scaffolding in Laravel.

Prerequisites

I assume, you already have a Laravel 10 application setup. However, if you don’t have then you can create a new one. But, for that, your system must meet the below requirements.

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

Once, you are ready with the Project setup and Database configuration, then you can jump to the next step.

Install Laravel UI Package in Laravel 10

You need to install the Laravel UI package for the Auth scaffolding. Laravel UI package consists of authentication functionalities like Register, Login, Forgot Password, and Logout with Session management.

composer require laravel/ui

So, this will take a couple of seconds to install this package.

Install React Auth Scaffolding in Laravel 10

You need to install auth scaffolding in Laravel 10 using React js. Hence, you have to hit the below command.

php artisan ui react --auth

After installing the React auth package, it will add Auth functionalities like Controller, Route, View, and component.

However, auth scaffolding requires npm in order to run the front-end dependencies.

Install npm in Laravel 10

While running the application without the npm package, it will throw an error. Hence, you need to run the below command.

npm install && npm run dev

The command will generate the assets like CSS and JS as dependencies. The npm run dev command will compile the CSS and JS. While running this command, Laravel vite will be running out in order to bundle the assets.

That’s it. Now, you will be able to run the application to check Auth Registration, Login, etc features.

If you come to the project folder, you will be able to see the app.js component in the components folder.

The app.js component will render other components. For example, you can see the example component is already imported here. Similarly, you can add more components here.

That’s it for this post. I hope you will be able to implement the auth features easily in Laravel 10.