Protect Frontend Routes and Components (React)
Learn how to protect authenticated routes and componentes using Wristband's React SDK.
In this section, we'll show how to use the React Client Auth SDK to secure your frontend routes and components that require authentication.
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-authyarn add @wristband/react-client-authpnpm add @wristband/react-client-authConfigure the Wristband Auth Provider
After installing the React Client Auth SDK, you'll need to create an instance of the WristbandAuthProvider. This component manages authentication state across your frontend by calling the 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 RedirectsYou can configure the
WristbandAuthProviderto not redirect to the Login Endpoint when it receives a401 Unauthorizedresponse from the Session Endpoint by settingdisableRedirectOnUnauthenticated=true.When redirects are disabled, use the
isAuthenticatedstate returned by theuseWristbandAuthhook 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
Once the WristbandAuthProvider is configured, 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;
Updated 17 days ago
Once you've finished securing your frontend routes and components, the next step is to protect your backend endpoints.