Protect Frontend Routes and Components (React)

This section explains how to use the React Client Auth SDK to protect frontend routes and components that require authentication.

Install the React SDK

Install the React Client Auth SDK using your preferred package manager:

npm install @wristband/react-client-auth

yarn add @wristband/react-client-auth

pnpm add @wristband/react-client-auth

Configure the Wristband Auth Provider

After installing the React Client Auth SDK, create an instance of WristbandAuthProvider. This component manages authentication state across your frontend by calling the Session Endpoint to retrieve the user's session data. On success, it stores the session data in the provider’s React Context. If the Session Endpoint returns a 401 Unauthorized response, WristbandAuthProvider redirects the user to your application's Login Endpoint.

📘
Disabling Automatic Redirects
Set disableRedirectOnUnauthenticated=true to prevent WristbandAuthProvider from redirecting to the Login Endpoint when the Session Endpoint returns a 401 Unauthorized response.
When redirects are disabled, use the isAuthenticated state returned by useWristbandAuth() to determine whether the user is logged in.

Configure WristbandAuthProvider with the following URLs:

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

Place WristbandAuthProvider at the root of your application so the user's authenticated state is available throughout the app 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

After initializing WristbandAuthProvider, use the React Client Auth SDK hooks and utility functions to protect routes, render authenticated and unauthenticated UI, and keep frontend state in sync with the active session.

Hooks

useWristbandAuth(): Returns the current authentication lifecycle and state.
useWristbandSession(): Returns the user session data retrieved from the Session Endpoint.

Utility functions

redirectToLogin(): Redirects the user to the configured backend Login Endpoint.
redirectToLogout(): Redirects the user to the backend Logout Endpoint.

The following sections show common implementation patterns for these hooks and utility functions.

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

Hooks

Utility functions

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

Pattern 2: Protect Explicit Routes with an Auth Guard Component

What’s Next