Author: sick skills

This tutorial has a React NodeJS example for building a full-stack CRUD application. It gives easy guidelines to design the frontend and backend. The frontend React connects the NodeJS API controllers to interact for creating, reading, updating, and deleting. This will provide persistent storage with a MySQL database connected via API DAOs.

Add form design and user creation with NodeJS and MySQL

The user-create form contains only two fields to simplify the example. So, the React frontend assets manages states and props to carry these inputs’ data to post.

The addUser() props triggers the add action request to post the form data to the server.

It executes the insert query on clicking the ‘Add User’ button. The response will have the auto-generated key created on successful insert action of the CRUD functionality.

src/components/form/AddUserForm.jsx

import { useState } from 'react'
const AddUserForm = props => { const initialFormState = { id: null, name: '', username: '' } const [ user, setUser ] = useState(initialFormState) const handleInputChange = event => { const { name, value } = event.target setUser({ ...user, [name]: value }) }
return ( <form onSubmit={event => { event.preventDefault() if (!user.name || !user.username) return props.addUser(user) setUser(initialFormState) }}> <label>Name</label> <input type="text" name="name" value={user.name} onChange={handleInputChange} /> <label>Username</label> <input type="text" name="username" value={user.username} onChange={handleInputChange} /> <div className="action-buttons"> <button type="submit">Add User</button> </div> </form>
)
}
export default AddUserForm

part of userControllers.js

export const addUser = (req, res) => { const { name, username } = req.body; db.query("INSERT INTO users (name, username) VALUES (?, ?)", [name, username], (err, result) => { if (err) return res.status(500).json({ error: err.message }); res.json({ id: result.insertId, name, username }); });
};

Displaying user data rows with edit and delete action controls

The UserTable component displays the data table dynamically from the MySQL database. The prop.users tree map is used to form these rows to the UI.

Each row contains edit and delete controls that are bound to editRow and deleteUser functions respectively.

src/components/table/UserTable.jsx

import React from 'react'
const UserTable = props => ( <table> <thead> <tr> <th>Name</th> <th>Username</th> <th>Actions</th> </tr> </thead> <tbody> {props.users.length > 0 ? ( props.users.map(user => ( <tr key={user.id}> <td>{user.name}</td> <td>{user.username}</td> <td> <button onClick={() => { props.editRow(user) }} className="button muted-button" > Edit </button> <button onClick={() => props.deleteUser(user.id)} className="button muted-button" > Delete </button> </td> </tr> )) ) : ( <tr> <td colSpan={3}>No users</td> </tr> )} </tbody> </table>
)
export default UserTable

In NodeJS the getUsers() module reads all users into an JSON response array as built below.

part of userControllers.js

export const getUsers = (req, res) => { db.query("SELECT * FROM users", (err, results) => { if (err) return res.status(500).json({ error: err.message }); res.json(results); });
};

Updating current user by ID using update API in NodeJS

The add and edit forms are exactly same except that this edit form populated the existing user data. The currentUser props contains the exiting user details read by id.

On clicking the ‘Edit’ button the user id is passed to send the read request with the id.

Once the enduser edits the detail and submit, it request the NodeJS API to perform the update operation of the CRUD module.

Both add and edit button clicks prevents the default submit and requests the API via network call.

The edit form is used to view or edit the user details. When clicking cancel the editing directive is set to false to switch to the view mode.

src/components/form/EditUserForm

import { useState, useEffect } from 'react'
const EditUserForm = props => { const [user, setUser] = useState(props.currentUser) useEffect( () => { setUser(props.currentUser) }, [props] ) const handleInputChange = event => { const { name, value } = event.target setUser({ ...user, [name]: value }) }
return ( <form onSubmit={event => { event.preventDefault() props.updateUser(user.id, user) }} > <label>Name</label> <input type="text" name="name" value={user.name} onChange={handleInputChange} /> <label>Username</label> <input type="text" name="username" value={user.username} onChange={handleInputChange} /> <div className="action-buttons"> <button type="submit">Update User</button> <button onClick={() => props.setEditing(false)} className="button muted-button"> Cancel </button> </div> </form>
)
}
export default EditUserForm

In the NodeJS, the backend user controller has an exclusive handle to prepare the user update query.

It binds the request parameter to the update query to go with the update operation.

part of userControllers.js

export const updateUser = (req, res) => { const { id } = req.params; const { name, username } = req.body; db.query("UPDATE users SET name=?, username=? WHERE id=?", [name, username, id], (err) => { if (err) return res.status(500).json({ error: err.message }); res.json({ id, name, username }); });
};

Deleting a user row via NodeJS controller

As like as an edit request, the delete action is also receives the user’s unique id in the request parameter.

The backend Node API receives the id and process the delete operation.

In the React frontend, it shows confirmation message in a toast box to avoid the mistakes.

part of userControllers.js

export const deleteUser = (req, res) => { const { id } = req.params; db.query("DELETE FROM users WHERE id=?", [id], (err) => { if (err) return res.status(500).json({ error: err.message }); res.json({ message: "User deleted" }); });
};

How to run the React + NodeJS example?

Set up the MySQL database:

First find the /api/sql/users.sql file from the downloadable source code given in this React + NodeJS CRUD example.

Create a database and import that SQL script into that. Then Configure the database details to the db.js file in the NodeJS API root.
Start the backend NodeJS server:

Go to the NodeJS api path and start the server via npm. It will return the server running path http://localhost:5000/

In this example this backend api URL is configured with a specific constant for convenience. It avoid the overhead of changing in multiple places based on the environment.

cd /path/api npm install npm start node server.js

Start the frontend React dev:

Go to the app location path and start the dev server. This will start the dev server http://localhost:5173/

cd react-node-mysql-crud-full-stack-tutorial npm install npm run dev

Conclusion

This tutorial built a simple code for React + Node.js + MySQL CRUD. The code for designing frontend and connecting the NodeJS API together gives a full stack execution sample. I hope, you learned how to read and display dynamic data from backend to React components and also how to manipulate them. The server controller is with appropriate cases to handle the CRUD with MySQL to store, retrieve, update, and delete data. With this base, it is easy to add more features to this CRUD utility.

References:

1. Installing MySQL client in NodeJS
2. Secured database accessing with prepared statements.

Download

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

↑ Back to Top

The JWT authentication is a secure way of implementing a web login process without session management. This tutorial is for implementing React JWT authentication with PHP. It has the following steps to understand the process easily.

Additionally, this example code provides a user registration code to create new user to the database. With the registration and login code you are getting a base for your websites authentication module from this tutorial.

1. React login form submits the registered username and password.
2. PHP backend script validates the login details with the database.
3. PHP login success case generates JWT signed encoded user profile data.
4. React frontend receives the JWT token and stores to localStorage.
5. React validates the existence of the token with the ProtectedRoutes component.
6. If the ProtectedRoutes failed to find the JWT token, it denies the access.

React User Registration

This registration code helps to create data for your login process. Also, with registration this authentication example will be a more complete version to deploy in your application.

This example has a registration form with very few fields. React builds the formData state when the user enters the data. On submit, it passes the entered data to the PHP page register-action.php. It stores the user login name, email and the password to the database.

In the below JSX script, the formData, success/error state variables are managed. The handleSubmit hook handles the client-side form validation. This hook posts the data to the server once the validation returns true.

Part of RegisterForm.jsx with React states and hooks

import axios from "axios";
import { useNavigate } from "react-router-dom";
import SERVER_SIDE_API_ROOT from "../config";
import "../styles/style.css";
const RegisterForm = () => { const [formData, setFormData] = useState({ username: "", email: "", password: "", confirmPassword: "", }); const [errorMessage, setErrorMessage] = useState(""); const [successMessage, setSuccessMessage] = useState(""); const navigate = useNavigate(); const handleSubmit = async (e) => { e.preventDefault(); const { username, email, password, confirmPassword } = formData; if (!username || !email || !password || !confirmPassword) { setErrorMessage("Please fill in all fields"); setSuccessMessage(""); return; } const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { setErrorMessage("Please enter a valid email address"); return; } if (password.length < 6) { setErrorMessage("Password must be at least 6 characters"); return; } if (password !== confirmPassword) { setErrorMessage("Passwords do not match"); setSuccessMessage(""); return; } try { const res = await axios.post( `${SERVER_SIDE_API_ROOT}/registration-action.php`, { username, email, password }, { headers: { "Content-Type": "application/json" } } ); console.log("Server response:", res.data); if (res.data.status === "success") { setSuccessMessage(res.data.message); setErrorMessage(""); setFormData({ username: "", email: "", password: "", confirmPassword: "", }); setTimeout(() => { navigate("/login"); }, 2000); } else { setErrorMessage(res.data.message || "Registration failed"); setSuccessMessage(""); } } catch (err) { console.error("Axios Error:", err); setErrorMessage("Server error or CORS issue"); setSuccessMessage(""); }
};

Returning Form UI code with RegisterForm.jsx

<div className="admin-wrapper"> <div className="card-container" style={{ maxWidth: "400px", margin: "95px auto" }}> <h2>User Registration</h2> <form onSubmit={handleSubmit}> <div> <label>Username:</label> <input value={formData.username} onChange={(e) => setFormData({ ...formData, username: e.target.value }) }/> </div> <div> <label>Email:</label> <input type="email" value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value }) } /> </div> <div> <label>Password:</label> <input type="password" value={formData.password} onChange={(e) => setFormData({ ...formData, password: e.target.value }) } /> </div> <div> <label>Confirm Password:</label> <input type="password" value={formData.confirmPassword} onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value, }) }/> </div> {errorMessage && ( <div className="alert alert-danger" role="alert"> {errorMessage} </div> )} {successMessage && ( <div className="alert alert-success" role="alert"> {successMessage} </div> )} <button type="submit">Register</button> <p style={{ textAlign: "center", marginTop: "10px" }}> Already have an account?{" "} <a href="/login" style={{ color: "#232323", fontWeight: "600",textDecoration: "none" }}> Login here </a> </p> </form> </div> </div>
);
};
export default RegisterForm;

PHP backend handles the registration request and stores the entered password in an encrypted form. It validates the user email uniqueness. If the entered email is already in the database, then this code rejects the user’s insertion.

react-jwt-login-register-api/registration-action.php

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Content-Type: application/json"); if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(200); exit; }
include "db.php";
$input = file_get_contents("php://input");
$data = json_decode($input);
if ( !isset($data->username) || !isset($data->email) || !isset($data->password)
) { echo json_encode(["status" => "error", "message" => "Invalid input"]); exit;
}
$username = mysqli_real_escape_string($conn, $data->username);
$email = mysqli_real_escape_string($conn, $data->email);
$password = password_hash($data->password, PASSWORD_BCRYPT);
$check = $conn->query("SELECT * FROM users WHERE email='$email'");
if ($check->num_rows > 0) { echo json_encode(["status" => "error", "message" => "Email already exists"]); exit;
}
$sql = "INSERT INTO users (username, email, password) VALUES ('$username', '$email', '$password')";
if ($conn->query($sql) === TRUE) { echo json_encode(["status" => "success", "message" => "Registration successful"]);
} else { echo json_encode(["status" => "error", "message" => $conn->error]);
}
?>

React login JWT authentication

If the user submits the correct username and password, the client receives success response from the server. The response will contain a JWT signed user profile data array.

In the client-side, the jwt-decode is used to decode the JWT response. The jwt-decode is the JavaScript library which can read and decode the JWT encoded string.

Run the following command to install this library into the application repository.

npm install jwt-decode [OR] yarn add jwt-decode

In the below script, if the response status is success it sets the JWT authentication token to a JavaScript localStorage. Then, it redirects to the dashboard. The dashboard is a protected page that can be accessed if a user is JWT-authenticated.

src/components/LoginForm.jsx

import React, { useState } from "react";
import { Link } from "react-router-dom";
import SERVER_SIDE_API_ROOT from "../config";
import "../styles/style.css";
import axios from "axios"; const LoginForm = () => { const [formData, setFormData] = useState({ username: "", password: "", }); const [errorMessage, setErrorMessage] = useState(""); const handleLogin = (e) => { e.preventDefault(); const { username, password } = formData; if (!username || !password) { setErrorMessage("Please enter both username and password"); return; } axios.post(`${SERVER_SIDE_API_ROOT}/login-action.php`, { username, password, }) .then((res) => { if (res.data.status === "success") { localStorage.setItem("token", res.data.token); setErrorMessage(""); setTimeout(() => { window.location.href = "/dashboard"; }, 1000); } else { setErrorMessage(res.data.message); } }) .catch((err) => { setErrorMessage("Server error: " + err.message); });
};
return (
<div className="admin-wrapper"> <div className="card-container" style={{ maxWidth: "400px", margin: "154px auto" }}> <h2>Login</h2> <form onSubmit={handleLogin}> <div> <label>Username:</label> <input value={formData.username} onChange={(e) => setFormData({ ...formData, username: e.target.value })} /> </div> <div> <label>Password:</label> <input type="password" value={formData.password} onChange={(e) => setFormData({ ...formData, password: e.target.value }) } /> </div> {errorMessage && ( <div className="alert alert-danger" role="alert"> {errorMessage} </div> )} <button type="submit">Login</button> <p style={{ textAlign: "center", marginTop: "10px" }}> Don’t have an account?{" "} <Link to="/registerform" style={{ color: "#232323", fontWeight: "600", textDecoration: "none" }}> Register here </Link> </p> </form> </div>
</div>
);
};
export default LoginForm;

In PHP the firebase/php-jwt library is installed by using this composer command. Once the logged-in details matched, this library is used to generate the JWT token with the profile array.

composer require firebase/php-jwt

react-jwt-login-register-api/login-action.php

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Content-Type: application/json"); include "db.php";
require 'vendor/autoload.php'; use Firebase\JWT\JWT;
use Firebase\JWT\Key; $secret_key = "MY_SECRET_KEY_12345"; if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { http_response_code(200); exit;
}
$data = json_decode(file_get_contents("php://input"));
if (!isset($data->username) || !isset($data->password)) { echo json_encode(["status" => "error", "message" => "Missing credentials"]); exit;
}
$username = $conn->real_escape_string($data->username);
$password = $data->password;
$result = $conn->query("SELECT * FROM users WHERE username = '$username' LIMIT 1");
if ($result->num_rows === 0) { echo json_encode(["status" => "error", "message" => "Invalid Username or Password"]); exit;
}
$user = $result->fetch_assoc();
if (!password_verify($password, $user['password'])) { echo json_encode(["status" => "error", "message" => "Invalid password"]); exit;
}
$payload = [ "iss" => "http://localhost", "aud" => "http://localhost", "iat" => time(), "exp" => time() + (60 * 60), "user" => [ "id" => $user['id'], "username" => $user['username'], "email" => $user['email'] ]
];
$jwt = JWT::encode($payload, $secret_key, 'HS256');
echo json_encode([ "status" => "success", "message" => "Login successful", "token" => $jwt
]);
?>

Protected Route Component that validates JWT token to permit

This component validates if the localStorage has the JWT token. If not, then it will stop the user from accessing a requested page. Instead, it redirects to the login page.

src/components/ProtectedRoute.js

import { Navigate } from "react-router-dom"; const ProtectedRoute = ({ children }) => { const token = localStorage.getItem("token"); if (!token) { return <Navigate to="/login" replace />; } return children;
}; export default ProtectedRoute; 

Dashboard with profile information

The React main App component imports the ProtectedRoutes to bring the validation process at the top layer. This ProtectedRoutes wrapper around the Dashboard will help to permit only a JWT-authenticated user to the dashboard.

This React dashboard script gets the user details from the decoded JWT token. Then, those details are rendered to the UI as shown below.

A simple header is created for this dashboard view with a logout option. On clicking logout, it clears the localStorage and redirects to the login page.

src/pages/Dashboard.jsx

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { jwtDecode } from "jwt-decode";
import "../styles/style.css"; const Dashboard = () => { const [user, setUser] = useState(null); const navigate = useNavigate(); useEffect(() => { const token = localStorage.getItem("token"); if (!token) { navigate("/login"); return; } try { const decoded = jwtDecode(token); setUser(decoded.user); } catch (error) { console.error("Invalid token:", error); localStorage.removeItem("token"); navigate("/login"); } }, [navigate]); if (!user) return <p>Loading...</p>; const handleLogout = () => { localStorage.removeItem("token"); navigate("/login"); }; return ( <div className="dashboard-wrapper"> <nav className="navbar"> <div className="navbar-left"> <h2>Dashboard</h2> </div> <div className="navbar-right"> <button className="logout-btn" onClick={handleLogout}> <img src="./logout.svg" alt="Logout" className="logout-icon" /> </button> </div> </nav> <div className="card"> <img src="/profile.jpg" alt="" className="profile-pic" /> <h2>Welcome, {user.username}</h2> <p> <strong>Email:</strong> {user.email} </p> </div> </div> );
};
export default Dashboard;

conclusion

With this login authentication base, you can have a good start to create a React JWT login. The user registration involves PHP and MySQL connection to generate backend data for this login. It can be enhanced by adding server-side JWT validation to improve the security. The concept of securing application pages with protected routes helps to reuse the wrapper for more components.

References:

1. About JWT (JSON Web Token)
2. PHP JWT backend library to encode decode JWT token
3. Client side JWT decoding library

Download

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

↑ Back to Top