Integrating JWT Authentication in React and Node.js (MERN Stack)

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const dotenv = require('dotenv');
dotenv.config();

const app = express();
const port = 5000;

app.use(express.json());

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Set Up JWT Secret in .env: Create a .env file in the root of your project and add a secret key for JWT:

JWT_SECRET=your_jwt_secret_key

2. Implementing User Registration and Login

User Registration will involve hashing the password before saving it to the database, while User Login will involve comparing the entered password with the stored hash and issuing a JWT upon successful authentication.

Steps to Implement Registration and Login:

1. Create a User Model: For simplicity, we'll use an in-memory array to simulate the database:

let users = [];

// User Registration Route
app.post('/api/register', async (req, res) => {
  const { username, password } = req.body;

  // Check if user already exists
  const userExists = users.find(user => user.username === username);
  if (userExists) {
    return res.status(400).json({ message: 'User already exists' });
  }

  // Hash the password
  const hashedPassword = await bcrypt.hash(password, 10);

  // Create and save the new user
  const newUser = { username, password: hashedPassword };
  users.push(newUser);
  res.status(201).json({ message: 'User registered successfully' });
});

// User Login Route
app.post('/api/login', async (req, res) => {
  const { username, password } = req.body;

  const user = users.find(user => user.username === username);
  if (!user) {
    return res.status(404).json({ message: 'User not found' });
  }

  // Check if password is correct
  const isMatch = await bcrypt.compare(password, user.password);
  if (!isMatch) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  // Generate JWT token
  const token = jwt.sign({ username: user.username }, process.env.JWT_SECRET, { expiresIn: '1h' });

  res.json({ token });
});

Protect Routes with JWT Middleware: You can protect any route by verifying the JWT in the request header:

// Middleware to verify JWT token
const authenticateToken = (req, res, next) => {
  const token = req.header('Authorization')?.split(' ')[1];
  if (!token) {
    return res.status(403).json({ message: 'Access denied' });
  }

  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) {
      return res.status(403).json({ message: 'Invalid token' });
    }
    req.user = user;
    next();
  });
};

// Protected Route
app.get('/api/protected', authenticateToken, (req, res) => {
  res.json({ message: 'Protected content', user: req.user });
});

3. Setting Up the React Frontend

Now, let’s set up the React frontend to interact with the backend for user registration, login, and accessing protected routes.

Steps to Set Up React:

1. Create a React Application: Create a new React app using Create React App:

npx create-react-app jwt-auth-frontend
cd jwt-auth-frontend

Install Axios: Install Axios for making HTTP requests:

npm install axios

Set Up User Registration and Login Forms: Create Register.js and Login.js components to handle user registration and login:

Register.js:

import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/api/register', { username, password });
      alert(response.data.message);
    } catch (error) {
      alert(error.response.data.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" required />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" required />
      <button type="submit">Register</button>
    </form>
  );
};

export default Register;

Access Protected Routes in React: In your App.js, after a successful login, you can store the JWT token in local storage and use it for authenticated requests.

import React, { useState } from 'react';
import Register from './Register';
import Login from './Login';

const App = () => {
  const [token, setToken] = useState(localStorage.getItem('token'));

  return (
    <div>
      {!token ? (
        <>
          <Register />
          <Login setToken={setToken} />
        </>
      ) : (
        <div>
          <h2>Welcome!</h2>
          <p>You are logged in</p>
        </div>
      )}
    </div>
  );
};

export default App;

4. Testing the Full App

1. Test the Backend: Use Postman or Insomnia to test the registration, login, and protected routes.

2. Test the Frontend: Ensure that the React frontend allows users to register, log in, and access protected routes using the JWT token.

Conclusion

Integrating JWT authentication in a React and Node.js (MERN stack) application is an essential feature for securing user data and resources. In this tutorial, you learned how to set up a JWT-based authentication system, from user registration and login to creating protected routes on the backend.

By following this guide, you can ensure that your application is secure, scalable, and ready for production with JWT-based authentication.