Creating Authentication Context | CodeSignal Learn

Creating Authentication Context | CodeSignal Learn

Introduction: Why Authentication Context Matters

Welcome back! In the last few lessons, you learned how to set up an API client, build a login form, protect routes, and create a registration flow. Now, you are ready to make your authentication logic more organized and accessible throughout your React app. In a real-world application, you often need to know whether a user is logged in or not in many different places — like the navigation bar, protected pages, or even when making API requests. If you try to pass this information down through props, your code can get messy and hard to manage. This is where React Context comes in. By using an authentication context, you can keep track of the user's login state and make it available anywhere in your app without having to pass it through every component.

Example: Prop Drilling vs. Context

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Understanding React Context For Authentication

App Bootstrap & Provider Placement (Using AuthContext Across Routes)

To use AuthContext, the provider must wrap the entire subtree that calls useAuth() —that includes your routed pages and guards. The simplest, reliable setup is to wrap the RouterProvider with AuthProvider at the root: This guarantees that all routes, layout components, and utilities like ProtectedRoute can access useAuth() . If AuthProvider is mounted inside a page instead, anything outside that page (e.g., other routes or top-level nav) won’t see auth state. Order matters only in terms of ancestry: the provider must be an ancestor of consumers. Wrapping RouterProvider is the most straightforward way to ensure that. Below is a minimal example for your entry point. ///src/index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import { RouterProvider } from 'react-router-dom'; import { AuthProvider } from './features/auth/AuthContext'; // Use the precompiled Tailwind CSS (full utilities) import './tailwind.css'; import { router } from './routes/router'; import reportWebVitals from './reportWebVitals'; const container = document.getElementById('root'); if (!container) throw new Error('Root container missing'); const root = ReactDOM.createRoot(container); root.render(<React.StrictMode> <AuthProvider> <RouterProvider router={router} /> </AuthProvider> </React.StrictMode>); reportWebVitals(); Why this placement works: Every routed screen and navigation element is now a child of AuthProvider, so useAuth() is available everywhere—header, pages, protected routes, etc.

Step-by-Step: Building the AuthContext

Using AuthContext In Your App

LoginForm (Revisited): Using login() from useAuth

We previously built the login component. Everything should look familiar except the call to login(token)—that’s what wires the UI to the context you just created. Here is the full component you provided; we’ll annotate how useAuth().login is used. //src/features/auth/LoginForm.tsx import { useState, FormEvent } from 'react'; import { useNavigate } from 'react-router-dom'; import { apiClient, paths } from '../../api/client'; import { useAuth } from './AuthContext'; export default function LoginForm() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const { login } = useAuth(); const navigate = useNavigate(); const handleSubmit = async (e: FormEvent) => { e.preventDefault(); setError(''); try { const res: any = await apiClient.post(paths.auth('/login'), { username, password }); const token = res?.data?.data?.access_token; if (!token) throw new Error('Token missing in response'); // <— This is the crucial piece provided by AuthContext login(token); navigate('/shelf'); } catch (err: any) { setError(err?.data?.message || 'Invalid username or password.'); } }; return ( <form onSubmit={handleSubmit} className="space-y-4 max-w-sm mx-auto"> {error && <p className="text-red-400 bg-red-900/50 p-3 rounded-md">{error}</p>} <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" required className="w-full bg-slate-800 p-2 rounded-md" /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" required className="w-full bg-slate-800 p-2 rounded-md" /> <button type="submit" className="w-full bg-sky-500 hover:bg-sky-600 p-2 rounded-md font-semibold"> Login </button> </form> ); } How login(token) integrates After a successful POST to /auth/login, we extract the token from the backend envelope. login(token): Saves the token to localStorage. Updates AuthContext state so isAuthenticated becomes true. Causes all useAuth() consumers (nav, guards) to re-render and reflect the logged-in state. Finally, we navigate('/shelf') to land the user on a protected page.

TypeScript

///src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { AuthProvider } from './features/auth/AuthContext';
// Use the precompiled Tailwind CSS (full utilities)
import './tailwind.css';
import { router } from './routes/router';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
if (!container) throw new Error('Root container missing');
const root = ReactDOM.createRoot(container);
root.render(
  <React.StrictMode>
    <AuthProvider>
      <RouterProvider router={router} />
    </AuthProvider>
  </React.StrictMode>
);

reportWebVitals();

TypeScript

// src/features/auth/AuthContext.tsx
import { createContext, useState, useContext, ReactNode } from 'react';
import { getToken, removeToken, saveToken } from '../../utils/auth';

interface AuthContextType {
  isAuthenticated: boolean;
  login: (token: string) => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [token, setToken] = useState<string | null>(getToken());

  // No interceptor needed; our fetch-based client reads token directly from localStorage

  const login = (newToken: string) => {
    saveToken(newToken);
    setToken(newToken);
  };

  const logout = () => {
    removeToken();
    setToken(null);
  };

  const value = { isAuthenticated: !!token, login, logout };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) throw new Error('useAuth must be used within an AuthProvider');
  return context;
};

TypeScript

// src/App.tsx
import { Outlet, NavLink, Link, useNavigate } from 'react-router-dom';
import { useAuth } from './features/auth/AuthContext';

function App() {
  const { isAuthenticated, logout } = useAuth();
  const navigate = useNavigate();
  const linkStyles = ({ isActive }: { isActive: boolean }) =>
    `px-3 py-2 rounded-md transition-colors ${
      isActive ? 'text-white bg-sky-600' : 'hover:text-sky-400'
    }`;

  return (
    <div className="bg-slate-900 text-white min-h-screen font-sans">
      <header className="bg-slate-800 shadow-lg">
        <nav className="container mx-auto px-6 py-4 flex justify-between items-center">
          <NavLink to="/" className="text-2xl font-bold text-sky-400 hover:text-sky-300">
            ShelfPilot
          </NavLink>
          <div className="flex gap-2 items-center">
            <NavLink to="/" className={linkStyles} end>
              Home
            </NavLink>
            <NavLink to="/catalog" className={linkStyles}>
              Catalog
            </NavLink>
            {isAuthenticated && (
              <NavLink to="/shelf" className={linkStyles}>
                My Shelf
              </NavLink>
            )}
            <NavLink to="/reading-list" className={linkStyles}>
              Reading List
            </NavLink>
            <div className="ml-4 flex gap-2">
              {isAuthenticated ? (
                <button
                  onClick={() => { logout(); navigate('/'); }}
                  className="px-3 py-2 rounded-md bg-slate-700 hover:bg-slate-600"
                >
                  Logout
                </button>
              ) : (
                <>
                  <Link to="/login" className="px-3 py-2 rounded-md bg-slate-700 hover:bg-slate-600">
                    Login
                  </Link>
                  <Link to="/register" className="px-3 py-2 rounded-md bg-sky-500 hover:bg-sky-600">
                    Register
                  </Link>
                </>
              )}
            </div>
          </div>
        </nav>
      </header>
      <main className="container mx-auto p-6">
        <Outlet />
      </main>
      <footer className="container mx-auto px-6 py-8 text-sm text-slate-400">
        © {new Date().getFullYear()} ShelfPilot
      </footer>
    </div>
  );
}

export default App;

TypeScript

// src/components/ProtectedRoute.tsx
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../features/auth/AuthContext";

export default function ProtectedRoute() {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <Outlet />;
}

TSX

//src/features/auth/LoginForm.tsx
import { useState, FormEvent } from 'react';
import { useNavigate } from 'react-router-dom';
import { apiClient, paths } from '../../api/client';
import { useAuth } from './AuthContext';

export default function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError('');
    try {
      const res: any = await apiClient.post(paths.auth('/login'), { username, password });
      const token = res?.data?.data?.access_token;
      if (!token) throw new Error('Token missing in response');

      // <— This is the crucial piece provided by AuthContext
      login(token);

      navigate('/shelf');
    } catch (err: any) {
      setError(err?.data?.message || 'Invalid username or password.');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm mx-auto">
      {error && <p className="text-red-400 bg-red-900/50 p-3 rounded-md">{error}</p>}
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
        required
        className="w-full bg-slate-800 p-2 rounded-md"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
        className="w-full bg-slate-800 p-2 rounded-md"
      />
      <button type="submit" className="w-full bg-sky-500 hover:bg-sky-600 p-2 rounded-md font-semibold">
        Login
      </button>
    </form>
  );
}