Protect Frontend Routes and Components (React)

This section shows you how to secure your authenticated frontend routes and components using the React Client Auth SDK.

Install the React SDK

First, install the React Client Auth SDK using your preferred package manager CLI:

npm install @wristband/react-client-auth

yarn add @wristband/react-client-auth

pnpm add @wristband/react-client-auth

Configure the Wristband Auth Provider

The WristbandAuthProvider component orchestrates frontend session management by calling your backend Session Endpoint. Valid sessions are persisted in React Context, whereas a 401 Unauthorized response triggers an automatic redirect to your app's Login Endpoint.

Disabling Automatic Redirects
You can configure the WristbandAuthProvider to not redirect to the Login Endpoint when it receives a 401 Unauthorized response from the Session Endpoint by setting disableRedirectOnUnauthenticated=true.
When redirects are disabled, use the isAuthenticated state returned by the useWristbandAuth hook to determine whether the user is logged in.

To configure the WristbandAuthProvider, provide the following URLs:

loginUrl: The URL of your application's Login Endpoint.
sessionUrl: The URL of your application's Session Endpoint.

Place the WristbandAuthProvider at your app's root to ensure the user's authenticated state is available throughout the application and verified on initial load.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { WristbandAuthProvider } from '@wristband/react-client-auth';

import './index.css';

import { App } from 'app';

const root = createRoot(document.getElementById('root'));

root.render(
  <StrictMode>
    <WristbandAuthProvider
      loginUrl='<your-login-endpoint-url>'
      sessionUrl='<your-session-endpoint-url>'
    >
      <App />
    </WristbandAuthProvider>
  </StrictMode>
);

Protect Frontend Routes and Components

With the WristbandAuthProvider configured, you can now secure your routes and components using the SDK's built-in hooks and utilities.

These tools support essential authentication patterns—including conditional view rendering, route protection, and dynamic UI updates—based on the user's current authentication status.

Here are a few alternate options depending on the structure of your guide:

Hooks

useWristbandAuth(): Access the user's authentication status throughout your app.
useWristbandSession(): Access user data returned from your backend server's Session Endpoint.

Utility Functions

redirectToLogin(): Redirects the user to your backend server's Login Endpoint.
redirectToLogout(): Redirects the user to your backend server's Logout Endpoint.

Use the examples below to start adding authentication patterns to your application.

Pattern 1: Conditional Rendering Based on User's Auth State

import React from 'react';
import {
  useWristbandAuth, useWristbandSession, redirectToLogin, redirectToLogout
} from '@wristband/react-client-auth';

function App() {
  const { isAuthenticated, isLoading } = useWristbandAuth();
  const { userId, tenantId } = useWristbandSession();
  
  if (isLoading) {
    return <div>Loading...</div>;
  }

  const AuthenticatedView = () => (
    <>
      <h1>Welcome to Wristband Auth</h1>
      <p>Your User ID: USERID</p>
      <p>Your Tenant ID: {tenantId}</p>
      <button onClick={() => redirectToLogout('<your-logout-endpoint-url>')}>
        Logout
      </button>
    </>
  );
  const UnauthenticatedView = () => (
    <>
      <h1>Welcome to Wristband Auth</h1>
      <button onClick={() => redirectToLogin('<your-login-endpoint-url>')}>
        Login
      </button>
    </>
  );

  return (
    <div>
      {isAuthenticated ? <AuthenticatedView /> : <UnauthenticatedView />}
    </div>
  );
};

export default App;

Pattern 2: Protect Explicit Routes with an Auth Guard Component

import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useWristbandAuth } from '@wristband/react-client-auth';

import { Dashboard, Login } from '@/components';

const AuthGuard = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated, isLoading } = useWristbandAuth();
  
  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return children;
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="<your-login-endpoint-path>" element={<Login />} />
        <Route
          path="/dashboard"
          element={
            <AuthGuard>
              <Dashboard />
            </AuthGuard>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Install the React SDK

Configure the Wristband Auth Provider

Disabling Automatic Redirects

Protect Frontend Routes and Components

Pattern 1: Conditional Rendering Based on User's Auth State

Pattern 2: Protect Explicit Routes with an Auth Guard Component

What’s Next