How to Implement JWT Authentication in React?

Secure user authentication is essential in modern web development for safeguarding sensitive data and delivering a seamless user experience. A well-liked and effective technique for handling authentication in web applications is JSON Web Tokens (JWT).

In order to improve security and user access management, we will look at how to integrate JWT authentication in a React application in this article.

What is JWT Authentication?

A condensed and self-contained method of conveying user information between two parties is through JSON Web Tokens (JWT). There are three components to them: a header, a payload, and a signature. Digital signatures on JWT tokens guarantee their integrity and guard against unwanted tampering.

JWT authentication works as follows:

  1. User login: When a user logs in with valid credentials, the server generates a JWT token containing user information, including user ID, roles, and expiration time.
  2. Token storage: The token is securely stored on the client side, typically in the browser’s local storage or an httpOnly cookie.
  3. Authorization: For each subsequent request to protected routes or APIs, the JWT token is included in the request header. The server validates the token’s signature, ensuring the user’s identity and access permissions.

Setting up the Backend Server

You must set up a backend server to handle user authentication and token creation before adding JWT authentication to a React application. This may be accomplished using widely utilized backend technologies like Node.js, Express, and MongoDB.

  1. Create user registration and login endpoints in your backend API to handle user authentication.
  2. Use a library like `jsonwebtoken` to generate and sign JWT tokens upon successful login.
  3. Ensure that your backend server includes CORS headers to allow communication with the React frontend from different domains.

Implementing JWT Authentication in React

Now that we have the backend server ready, let’s proceed with integrating JWT authentication in our React application.

  1. Install necessary packages:

npm install axios react-router-dom

  1. Create an AuthService.js file in your React application to manage authentication-related functions like login and logout.
// AuthService.js import axios from 'axios'; const API_URL = 'http://your-backend-api-url'; class AuthService { login(username, password) { return axios.post(API_URL + '/login', { username, password }) .then((response) => { if (response.data.token) { localStorage.setItem('user', JSON.stringify(response.data)); } return response.data; }); } logout() { localStorage.removeItem('user'); } getCurrentUser() { return JSON.parse(localStorage.getItem('user')); } } export default new AuthService();
Code language: JavaScript (javascript)
  1. Set up a Login component to handle user login in your React application.
// Login.js import React, { useState } from 'react'; import AuthService from './AuthService'; const Login = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleLogin = (e) => { e.preventDefault(); AuthService.login(username, password).then((user) => { console.log(user); // You can redirect the user to a protected route here. }); }; return ( <div> <h2>Login</h2> <form onSubmit={handleLogin}> <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <button type="submit">Login</button> </form> </div> ); }; export default Login;
Code language: JavaScript (javascript)
  1. Create a ProtectedRoute component to protect specific routes that require authentication.
// ProtectedRoute.js import React from 'react'; import { Route, Redirect } from 'react-router-dom'; import AuthService from './AuthService'; const ProtectedRoute = ({ component: Component, ...rest }) => { const user = AuthService.getCurrentUser(); return ( <Route {...rest} render={(props) => user ? <Component {...props} /> : <Redirect to="/login" /> } /> ); }; export default ProtectedRoute;
Code language: JavaScript (javascript)
  1. Set up the React Router in your App.js file.
// App.js import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Login from './Login'; import ProtectedRoute from './ProtectedRoute'; const Home = () => <h2>Welcome to the Home Page!</h2>; const App = () => { return ( <Router> <div> <Switch> <Route path="/login" component={Login} /> <ProtectedRoute path="/" component={Home} /> </Switch> </div> </Router> ); }; export default App;
Code language: JavaScript (javascript)

Conclusion

For managing user authentication and authorization in React apps, JWT authentication is a strong and secure technique. By implementing JWT authentication as described in this blog, you can safeguard sensitive routes and APIs and make sure that only authorized users can access limited resources within your application.

This improves user experience and overall security, strengthening the stability and dependability of your React application.


Posted

in

by

Recent Post

  • Mastering Conversational UX: Best Practices for AI-Driven Chatbots

    In today’s digital landscape, where customer engagement reigns supreme, traditional marketing strategies are giving way to more interactive and personalized approaches. The rise of conversational interfaces, often powered by Artificial Intelligence (AI) and Natural Language Processing (NLP), has transformed how businesses interact with their audiences. Whether through AI-driven chatbots on websites, virtual assistants on mobile […]

  • Mastering React Hooks for Infinite Scroll: An Advanced Tutorial

    What is Infinite Scrolling? Infinite scrolling is a widespread interaction design pattern you might’ve noticed in popular apps such as Instagram, TikTok, Facebook, and so on. The applications that need to showcase large datasets, use infinite scroll. This is because, unlike traditional pagination, infinite scrolling loads content continuously as the user scrolls down the page, […]

  • Advantages of Permissioned Blockchains for Efficiency, Security, and Collaboration

    In the last decade, blockchain has emerged as a robust technology in the digital landscape. Blockchains are continuously transforming various industries by redefining data management, data security, and decentralized collaboration. Blockchain gained popularity with the emergence of cryptocurrencies. Let’s take a look back to the year 2017 when Japan recognized Bitcoin as a legal currency […]

  • How AI Is Revolutionizing Mobile App Development in 2024?

    Introduction In a world where smartphones have become an extension of our lifestyle, mobile applications have also become a major part of our daily routines. From making shopping effortless to booking a doctor’s appointment at our fingertips, from getting our food and groceries delivered to our doorstep to managing our finances and making instant transactions, […]

  • A Comprehensive Guide to Sentiment Analysis Using NLP

    Businesses need to understand public interests, attitudes, behavior, and trigger points in today’s dynamic and competitive market. This enables them to efficiently serve their customers, grab opportunities, grow, and develop resilience in the face of a constantly shifting market. Many businesses find it challenging to process vast amounts of text-based data in order to get […]

  • How AI Is Revolutionizing Banking: Transforming Customer Experiences and Enhancing Financial Security

    Banking is a huge industry with a global Banking market likely to achieve a Net Interest Income of USD 10.34 trillion, with Traditional Banks holding a huge stake of USD 8.30 trillion. According to Statista’s projections suggest an annual growth rate of 4.82% (CAGR 2024-2028), culminating in a market volume of USD12.48 trillion by 2028. […]

Click to Copy