How to Implement Authentication in React Using JWT (JSON Web Tokens)

Authentication is a critical part of many web applications, and securing routes in React requires an understanding of how tokens, such as JSON Web Tokens (JWT), work. JWT allows you to securely transmit information between the client and the server, which is particularly useful for implementing user authentication in modern web applications. In this article, we’ll learn how to implement authentication in React using JWT.

What is JWT?

JSON Web Tokens (JWT) are compact, URL-safe tokens used to represent claims between two parties. JWT is a popular choice for authentication in single-page applications (SPAs) because it is lightweight, stateless, and easy to implement.

A typical JWT consists of three parts:
1. Header: Contains metadata about the token, including the signing algorithm.
2. Payload: Contains the claims (data) that you want to transmit, such as user information.
3. Signature: Used to verify that the sender is who it says it is and to ensure that the message wasn’t changed along the way.

Steps to Implement JWT Authentication in React

1. Backend Setup (Node.js Express JWT)

• Install required dependencies: express, jsonwebtoken, bcryptjs.
• Set up a simple Express server and create routes for login and protected data access.
• Generate a JWT token upon successful login. Example backend code (Node.js Express JWT):

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const app = express();
const users = [{ username: 'test', password: 'a$...' }]; // Example user data

app.use(express.json());

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

  // Verify user credentials
  const user = users.find(u => u.username === username);
  if (user && bcrypt.compareSync(password, user.password)) {
    const token = jwt.sign({ username: user.username }, 'secretKey', { expiresIn: '1h' });
    return res.json({ token });
  } else {
    return res.status(401).send('Invalid credentials');
  }
});

app.listen(5000, () => console.log('Server running on port 5000'));

2. Frontend Setup (React JWT):

• Use React’s useState and useEffect hooks to manage authentication state.
• Store the JWT token in local storage or cookies after successful login.
• Use the JWT token to make authenticated requests to the backend API. Example frontend code (React JWT):

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

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('http://localhost:5000/login', { username, password });
      localStorage.setItem('token', response.data.token); // Store the JWT
      alert('Login successful');
    } catch (error) {
      alert('Login failed');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      axios.get('http://localhost:5000/protected', {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then(response => setData(response.data))
      .catch(error => console.error(error));
    }
  }, []);

  return (
    <div>
      <h1>Protected Dashboard</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); }

Copy after login

3. Protecting Routes:

• Use React Router to create private routes that require authentication.
• Check if the JWT token exists before allowing access to protected routes. Example:

const PrivateRoute = ({ component: Component, ...rest }) => {
  const token = localStorage.getItem('token');
  return (
    <Route
      {...rest}
      render={props => token ? <Component {...props} /> : <Redirect to="/login" />}
    />
  );
};

Conclusion
Implementing JWT authentication in React is a straightforward process that involves creating a secure backend, generating a token on successful login, and managing the authentication state in React. JWT provides a scalable and stateless way of managing authentication in modern web applications.

The above is the detailed content of How to Implement Authentication in React Using JWT (JSON Web Tokens). For more information, please follow other related articles on the PHP Chinese website!