React.js + PHP Login Application Project

Here I will share with you a React.js project which is backend based login and registration system that uses PHP API.

Download the React.js Login app

• Download the React.js Login App

Steps to Setup this Project:

1. Setup the PHP Login API:

First you have to setup the Login & Registration API which is written in PHP as it will be used in this react.js application.

Here is the guild to Setup PHP Login & Registration API.

2. Setup the React.js app:

After completing the setup of PHP API, download or clone the chandan-tudu/react-php-login-app from github.

Then go inside the project folder which is react-php-login-app and run the npm install or pnpm install to install the necessary packages.

Now the project is ready to test. Run the following command to start the application:

npm run dev

# OR

pnpm dev

---

Information about this application:

• This project is setup using vite:

npm create vite@latest

• react-router-dom has been used for routing:

npm i react-router-dom

#OR

pnpm add react-router-dom

• Here’s the structure of this project:

src/
├── components/
│   ├── Login.jsx
│   ├── Register.jsx
│   └── Profile.jsx
├── App.jsx
├── main.jsx
└── index.css

• Register.jsx: This component contains a simple registration form for that interacts with the backend PHP API for user registration.
• Login.jsx: This react component contains login form that sends user credentials to a backend PHP API for authentication, manages form submission state, and navigates between login and signup routes.
• Profile.jsx: This is for displaying users profile fetched from a backend PHP API using an authentication token stored in local storage, with functionality for logging out and redirecting to the login page.
• App.jsx: It sets up React Router for handling routes, with conditional rendering based on the user’s authentication status, displaying either a user profile, login, or registration component, and handling redirects appropriately.