If you are looking to implement user authentication features such as login, registration, logout, profile, dashboard, etc., in your Laravel web application using React Auth scaffolding, this tutorial is the perfect guide for you. In this comprehensive tutorial, you will learn how to create the necessary pages, including Login, Register, Logout, Forgot Password, Profile, and Reset Password, using React Authentication scaffolding in Laravel 10 applications.
Laravel 10 React Authentication Scaffolding Example Tutorial
Steps to create user authentication features such as login, registration, logout, forgot password, reset password, dashboard, etc., in your Laravel 10 web application using React Auth scaffolding:
- Step 1 – Setup New Laravel 10 App
- Step 2 – Setup Database with Laravel App
- Step 3 – Install Laravel UI
- Step 4 – Install and Setup React Auth Scaffolding
- Step 5 – Install Npm Packages
- Step 6 – Run PHP artisan Migrate
- Step 7 – Run Development Server
Step 1 – Setup New Laravel 10 App
In step 1, open your terminal and navigate to your local web server directory using the following command:
//for windows user cd xampp/htdocs //for ubuntu user cd var/www/html
Then install laravel latest application using the following command:
composer create-project --prefer-dist laravel/laravel Laravel9Auth
Step 2 – Setup Database with Laravel App
Once you have installed Laravel app on your server. Now, you need to configure the database with Laravel app.
So, find .env file in your laravel app root directory and configure database detail like the following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Install Laravel UI
In step 3, install LARAVEL ui package in laravel app by using the following command:
composer require laravel/ui
Step 4 – Install and Setup React Auth Scaffolding
In step 4, install auth scaffolding react package in laravel app by using the following command:
php artisan ui react --auth
Step 5 – Install Npm Packages
In step 5, open again command prompt and type the following command to install node js:
npm install
Then type the following command on cmd to run npm:
npm run dev
Step 6 – Run php artisan Migrate
In step 6, open terminal and type the following command on it to create database table:
php artisan migrate
Step 7 – Run Development Server
In step 7, use the following command to start development server:
php artisan serve
Now, open browser and hit the following url on it:
http://127.0.0.1:8000/
