What is the best way to store authentication tokens in React?

The best practice is to store tokens in HttpOnly cookies to protect against XSS attacks. Avoid storing tokens in localStorage or sessionStorage if possible.

How do protected routes work in React?

Protected routes check if a user is authenticated before rendering a component. If not authenticated, users are redirected to a login page.

Can React handle authentication without a backend?

React can manage UI state for authentication, but secure authentication requires a backend to verify credentials and issue tokens.

Topic 19818 min readStructured Tutorial

React Authentication Examples

Quick Answer

React authentication involves managing user login state, protecting routes, and handling tokens. Practical examples include creating login forms, storing JWT tokens securely, and implementing protected routes using React Router to restrict access based on authentication status.

Learning Objectives

Understand how to implement user login forms in React.
Learn how to protect routes based on authentication state.
Manage authentication tokens securely in React applications.

Introduction

Authentication is a critical part of many React applications to ensure secure access to resources.

This tutorial covers practical examples demonstrating how to implement authentication flows in React.

Security is not a product, but a process.

Course Progress0%

Was this topic helpful?

Your feedback helps us improve this lesson.

Topic information

Author

RPATechnology Team

Last Updated

June 2026

Suggested learning path

Related Courses

Continue learning with related technologies and tracks.

Programming LanguagesBeginner FriendlyCareer Focused

C# Programming Course for Beginners to Advanced | Learn C# and .NET

Master C# programming with a complete beginner-to-advanced course covering OOP, collections, LINQ, async programming, Entity Framework Core, ASP.NET Core, Web APIs, design patterns, and real-world projects.

Structured lessons

View Course

Examples

Simple React Login Form

import React, { useState } from 'react';

function LoginForm({ onLogin }) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    try {
      // Simulate API call
      if (username === 'user' && password === 'pass') {
        onLogin('fake-jwt-token');
      } else {
        setError('Invalid credentials');
      }
    } catch {
      setError('Login failed');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        required
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit">Login</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
}

export default LoginForm;

This component implements a controlled login form that validates hardcoded credentials and calls onLogin with a token on success.

PrivateRoute Component with React Router

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

export default PrivateRoute;

PrivateRoute checks if the user is authenticated; if not, it redirects to the login page.

Using JWT Token in API Calls

import axios from 'axios';

const apiClient = axios.create({ baseURL: 'https://api.example.com' });

export function setAuthToken(token) {
  if (token) {
    apiClient.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  } else {
    delete apiClient.defaults.headers.common['Authorization'];
  }
}

export default apiClient;

This example shows how to set the Authorization header with a JWT token for API requests using Axios.

Learning Objectives

Introduction

Was this topic helpful?

Topic information

Recommended Next Topics

JWT Authentication

Related Topics

Related Courses

C# Programming Course for Beginners to Advanced | Learn C# and .NET

Creating a Simple Login Form

Example: Login Form Component

Implementing Protected Routes

Example: PrivateRoute Component

Handling Authentication Tokens

Example: Storing and Using JWT Tokens

Practical Example

Examples

Best Practices

Common Mistakes

Hands-on Exercise

Build a Login Form

Implement Protected Routes

Manage JWT Token

Interview Questions

How do you protect routes in a React application?

What are common ways to store authentication tokens in React?

How can React manage authentication state across components?

MCQ Quiz

1. In the provided React login form example, which React feature is primarily used to manage the input fields for username and password?

2. What is the purpose of the PrivateRoute component in React authentication examples?

3. Why is storing JWT tokens in HttpOnly cookies recommended in React authentication?

4. In the login form example, what happens when the user submits invalid credentials?

5. How does the React authentication example ensure that API calls are authorized after login?

Key Takeaways

Frequently Asked Questions

What is the best way to store authentication tokens in React?

How do protected routes work in React?

Can React handle authentication without a backend?

Summary

Java Programming Course for Developers and Interview Success | RPATechnology.in

Complete JavaScript Tutorial for Beginners to Advanced | JavaScript Programming Course

Complete MongoDB Tutorial for Beginners to Advanced | MongoDB Course

Complete MySQL Tutorial for Beginners to Advanced | MySQL Database Course

Complete Python Tutorial for Beginners to Advanced | Python Programming Course