DEV Community

Cover image for JWT Authentication in React
Sivasubramaniyam
Sivasubramaniyam

Posted on

6 1 3 2

JWT Authentication in React

Introduction:

  • Briefly introduce the concept of authentication and its importance in web applications.
  • Explain the role of JWT (JSON Web Tokens) in managing authentication and authorization within React applications.

What is JWT?

  • Define JWT, detailing its three parts: Header, Payload, and Signature.
  • Discuss why JWT is favored in modern web applications, especially in Single Page Applications (SPAs) like those built with React.

How JWT Works:

  • Illustrate the JWT authentication flow specifically in the context of React and a backend (like Node.js/Express).
  • Included a simple flow diagram.

JWT

  1. User Authentication:

    • The user provides credentials such as username and password.
    • Outputs: User credentials.
  2. Validate Credentials:

    • The server validates the provided credentials against its database.
    • Outputs: Validation result.
  3. Generate JWT:

    • If credentials are valid, the server generates a JWT. This token includes claims like user ID, role, and expiration time, and is signed with a secret key.
    • Outputs: Signed JWT.
  4. Send JWT to Client:

    • The server sends the JWT back to the client.
    • Outputs: JWT sent via HTTP response.
  5. Store JWT on Client:

    • The client stores the JWT, typically in local storage or as a cookie.
    • Outputs: JWT storage location.
  6. Client Request with JWT:

    • For subsequent requests, the client sends the JWT in the request header to access protected routes or resources.
    • Outputs: HTTP request with JWT in the Authorization header.
  7. Server JWT Verification:

    • The server verifies the JWT's validity using the secret key. It checks the signature, the expiration time, and other claims.
    • Outputs: Verification result.
  8. Access Granted or Denied:

    • Based on the verification, the server either grants or denies access to the requested resource.
    • Outputs: Access response.

Setting Up JWT Authentication in React:

  1. Backend Setup (using Node.js/Express):
    • Code to create an authentication route that issues JWTs.
   const jwt = require('jsonwebtoken');
   const express = require('express');
   const app = express();

   app.post('/login', (req, res) => {
       const { username, password } = req.body;
       // User validation logic here
       const token = jwt.sign({ username }, 'your_secret_key', { expiresIn: '1h' });
       res.json({ token });
   });
Enter fullscreen mode Exit fullscreen mode
  1. React Setup:
    • Installation of dependencies (axios for HTTP requests).
    • Creating a login form component.
    • Handling the JWT on client side (storing, sending with requests).
   import React, { useState } from 'react';
   import axios from 'axios';

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

       const handleSubmit = async (event) => {
           event.preventDefault();
           const { data } = await axios.post('http://localhost:3000/login', { username, password });
           localStorage.setItem('token', data.token); // Storing the token in localStorage
           // Redirect or handle login success
       };

       return (
           <form onSubmit={handleSubmit}>
               <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>
       );
   }

   export default LoginForm;
Enter fullscreen mode Exit fullscreen mode
  1. Protecting Routes in React:
    • Using React Router to protect routes that require authentication.
    • Example of a private route component.
   import { Route, Redirect } from 'react-router-dom';

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

Security Considerations:

  • Discuss securing the secret key and the significance of HTTPS.
  • Address common security concerns like XSS (Cross-Site Scripting) and CSRF (Cross-Site Request Forgery) in the context of a React application.

Best Practices:

  • Use environment variables to manage secrets.
  • Set an expiration time for tokens.
  • Use secure and HttpOnly cookies if applicable.

Conclusion:

  • Summarize the key points about implementing JWT in React projects.
  • Emphasize the importance of security in authentication mechanisms.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 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