React Sign-In Quickstart

This quickstart uses the official @guardhouse/react package to redirect users to Guardhouse, restore the authenticated session, and obtain an access token for your API.

1. Register the Application

Create a public browser client in the Guardhouse dashboard and configure:

• redirect URI: http://localhost:5173
• logout redirect URI: http://localhost:5173
• your API resource and its audience
• the identity and API scopes the application may request

The redirect URI must match exactly. Do not create or copy a client secret for a browser application.

2. Install the SDK

npm install @guardhouse/react

3. Add the Provider

Wrap the application with GuardhouseProvider:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { GuardhouseProvider } from "@guardhouse/react";
import { App } from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <GuardhouseProvider
      config={{
        authority: "https://your-tenant.guardhouse.cloud",
        clientId: "YOUR_BROWSER_CLIENT_ID",
        redirectUri: window.location.origin,
        audience: "YOUR_API_AUDIENCE",
      }}
    >
      <App />
    </GuardhouseProvider>
  </React.StrictMode>,
);

authority is the tenant issuer. audience must match the API resource that will validate the access token.

4. Add Sign-In and Sign-Out

src/App.tsx

import { useAuth } from "@guardhouse/react";

export function App() {
  const { isLoading, isAuthenticated, user, loginWithRedirect, logout } = useAuth();

  if (isLoading) return <p>Loading session...</p>;

  if (!isAuthenticated) {
    return <button onClick={() => loginWithRedirect()}>Sign in</button>;
  }

  return (
    <main>
      <p>Signed in as {user?.name ?? user?.email ?? user?.sub}</p>
      <button onClick={() => logout()}>Sign out</button>
    </main>
  );
}

Start the application and select Sign in. Guardhouse hosts the authentication UI and returns the browser to the registered redirect URI.

5. Call Your Protected API

Use getAccessToken() and send the resulting access token as a bearer token:

import { useAuth } from "@guardhouse/react";

export function OrdersButton() {
  const { getAccessToken } = useAuth();

  async function loadOrders() {
    const token = await getAccessToken();
    if (!token) throw new Error("No access token is available");

    const response = await fetch("https://api.example.com/orders", {
      headers: { Authorization: `Bearer ${token}` },
    });

    if (!response.ok) throw new Error(`API returned ${response.status}`);
    console.log(await response.json());
  }

  return <button onClick={loadOrders}>Load orders</button>;
}

The API must independently validate the token's issuer, audience, lifetime, and required access. Hiding a React route is a user-interface behavior, not an authorization boundary.

Production Checklist

• Register the exact production redirect and logout URLs.
• Use HTTPS outside local development.
• Keep the browser client free of secrets.
• Request only the scopes the application needs.
• Configure CORS on your API for the application origin; CORS does not replace token validation.

See the full React SDK reference and Protect an API.