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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay