DEV Community

Cover image for How to Implement Authentication in React Using JWT (JSON Web Tokens)
Ayush Kumar Vishwakarma
Ayush Kumar Vishwakarma

Posted on

1

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: '$2a$10$...' }]; // 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'));
Enter fullscreen mode Exit fullscreen mode

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>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

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" />}
    />
  );
};
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs