---
updatedAt: 2026-10-13T18:57:15.000Z
agentTools:
  projectIndex: https://docs.wristband.dev/llms.txt
---

# Protect Frontend Routes and Components (React)

Learn how to protect authenticated routes and components using Wristband's React SDK.

This section explains how to use the <Anchor target="_blank" href="https://github.com/wristband-dev/react-client-auth">React Client Auth SDK</Anchor> to protect frontend routes and components that require authentication.

## Install the React SDK

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

```shell npm
npm install @wristband/react-client-auth
```
```shell yarn
yarn add @wristband/react-client-auth
```
```shell
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 <Anchor target="_blank" href="https://docs.wristband.dev/docs/aspnet-add-auth-endpoints#session-endpoint">Session Endpoint</Anchor> 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.

<Callout icon="far fa-circle-info" theme="info">
  ### 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.
</Callout>

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.

```jsx WristbandAuthProvider Configuration
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

```jsx JSX
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

```jsx
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;

```

<br />

<HTMLBlock>{`
<style>
.UpdatedAt {
  display: none;
}
</style>
`}</HTMLBlock>