Protect Frontend Routes and Components (React)

In this section, you'll add client-side protection using the React Client Auth SDK to secure your frontend routes and components during navigation.

Install the React SDK

The first thing you'll need to do is 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

After installing the React Client Auth SDK, you'll need to create an instance of the WristbandAuthProvider and add it to your root layout. This component manages authentication state across your frontend by calling your Session Endpoint to retrieve the user's session data. If the request succeeds, the session data is stored in the provider's React Context. If the Session Endpoint returns a 401 Unauthorized response, the WristbandAuthProvider redirects the user to your application'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.

Create an Auth Provider Wrapper

Since Next.js's App Router uses Server Components by default and React Context providers are client-side only, you need to create a Client Component wrapper.

Create a new file for the wrapper Client Component (e.g., src/components/AuthProvider.tsx) and configure the WristbandAuthProvider with the following URLs:

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

// src/components/AuthProvider.tsx

'use client';

import { ReactNode } from 'react';
import { WristbandAuthProvider } from '@wristband/react-client-auth';

export function AuthProvider({ children }: { children: ReactNode }) {
  return (
    <WristbandAuthProvider
      loginUrl="/api/auth/login"
      sessionUrl="/api/auth/session"
    >
      {children}
    </AuthProvider>
  );
}

Add the Provider to Your Root Layout

Now add the AuthProvider Client Component to your root layout (src/app/layout.tsx) to ensure the user's authenticated state is available throughout the application and verified on initial load.

// src/app/layout.tsx

import { ReactNode } from 'react';
import { AuthProvider } from 'src/components/AuthProvider';
import './globals.css';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Protect Frontend Routes and Components

Once the WristbandAuthProvider is set up, you can begin securing your routes and components. The React Client Auth SDK includes hooks and utility functions that support common authentication patterns, such as conditional rendering of authenticated and unauthenticated views, protecting routes, and dynamically updating the UI based on the user's authentication status.

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.

In the sections below, we'll show how to use these hooks and functions to implement common authentication patterns.

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;