Verified Dashboard with the React SDK

Build a multi-page dashboard with popup sign-in, protected routes, and content gating using the React SDK — covers HumanityProvider, HumanityGate, and HumanityProfile in a Vite + React App

This guide uses the sandbox environment.

The SDK QuickStart gets auth working on one page. This adds routing, a protected dashboard gated on real preset data, and a profile page listing every identity:read preset's status.

Full list is under SDK OAuth Scopes and Presets.

---

Before you start

You need:

• Node 18 or higher
• Bun
• A Humanity Developer Account — register at developers.humanity.org
• A sandbox Palm Print credential — generate one at the Sandbox Credential Generator

New to this? See the Generating Mock Credentials guide.

---

01. Create the project

bun create vite verified-dashboard-react-sdk --template react-ts
cd verified-dashboard-react-sdk
bun add @humanity-org/react-sdk react-router-dom
bun add -d vite-plugin-node-polyfills @types/node

Update vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [react(), nodePolyfills()],
});

---

02. Configure the Developer Portal

Go to developers.humanity.org, open your application, and switch to the Sandbox tab in Settings.

• Add http://localhost:5173/ as a redirect URI
• Under scopes, enable:

  • OpenID Connect (openid)
  • Identity Information (identity:read)

The SDK matches the callback by origin + path only, ignoring the query string — so your redirect URI can point straight at /. No dedicated callback route needed.

---

03. Set up environment variables

Create .env.local at the project root:

VITE_HUMANITY_CLIENT_ID=your_sandbox_client_id
VITE_HUMANITY_REDIRECT_URI=http://localhost:5173/

Get your client_id from the Developer Portal under your application's Sandbox tab.

---

04. Set up the folder structure

mkdir -p src/components src/pages

---

05. Wire up HumanityProvider and routing

HumanityProvider must sit inside BrowserRouter.

Replace src/main.tsx:

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { HumanityProvider } from '@humanity-org/react-sdk';
import '@humanity-org/react-sdk/styles.css';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <HumanityProvider
      clientId={import.meta.env.VITE_HUMANITY_CLIENT_ID}
      redirectUri={import.meta.env.VITE_HUMANITY_REDIRECT_URI}
      environment="sandbox"
      storage="sessionStorage"
    >
      <App />
    </HumanityProvider>
  </BrowserRouter>
);

---

06. Add the protected route

Create src/components/ProtectedRoute.tsx:

import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '@humanity-org/react-sdk';

export function ProtectedRoute() {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) return <div className="loading">Loading...</div>;
  if (!isAuthenticated) return <Navigate to="/" replace />;

  return <Outlet />;
}

---

07. Build the app routes

Replace src/App.tsx:

import { Routes, Route } from 'react-router-dom';
import { Home } from './pages/Home';
import { Dashboard } from './pages/Dashboard';
import { Profile } from './pages/Profile';
import { ProtectedRoute } from './components/ProtectedRoute';

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route element={<ProtectedRoute />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
      </Route>
    </Routes>
  );
}

---

08. Build the Home page

Create src/pages/Home.tsx:

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { HumanityConnect, useAuth } from '@humanity-org/react-sdk';

export function Home() {
  const { isAuthenticated, error } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (isAuthenticated) navigate('/dashboard');
  }, [isAuthenticated, navigate]);

  return (
    <div className="home">
      <h1>Verified Dashboard</h1>
      <p>Sign in with Humanity to access your dashboard.</p>
      <HumanityConnect
        scopes={['openid', 'identity:read']}
        mode="redirect"
        onError={(error) => console.error('Login failed:', error)}
      />
      {error && <p className="error">{error.message}</p>}
    </div>
  );
}

The useEffect covers the case where an already-authenticated user lands on / — they skip the login screen and go straight to the dashboard.

---

09. List the identity presets

identity:read covers 12 presets — Profile lists all of them. Both pages also share a couple of small helpers for working with batch results, so this is worth its own file instead of duplicating them.

Create src/presets.ts:

// All presets available under the identity:read scope.
export const IDENTITY_PRESETS = [
  'humanity_uuid',
  'humanity_score',
  'is_human',
  'country_of_residence',
  'nationality',
  'residency_region',
  'email',
  'phone',
  'social_accounts',
  'primary_wallet_address',
  'palm_verified',
  'proof_of_residency',
] as const;

export interface PresetResult {
  preset: string;
  verified: boolean;
  value?: unknown;
}

export const PRESET_BATCH_LIMIT = 10;

export function chunk<T>(items: readonly T[], size: number): T[][] {
  const chunks: T[][] = [];
  for (let i = 0; i < items.length; i += size) {
    chunks.push(items.slice(i, i + size));
  }
  return chunks;
}

export function verifyAllBatched(
  verifyAll: (presets: string[]) => Promise<unknown[]>,
  presets: readonly string[]
): Promise<PresetResult[]> {
  return Promise.all(chunk(presets, PRESET_BATCH_LIMIT).map((batch) => verifyAll(batch))).then((batches) =>
    batches.flat()
  ) as Promise<PresetResult[]>;
}

export function findPresetResult(results: PresetResult[] | null, preset: string): PresetResult | undefined {
  return results?.find((r) => r.preset === preset || (r as { presetName?: string }).presetName === preset);
}

export function isPassed(result: PresetResult | undefined): boolean {
  return result?.verified === true && Boolean(result.value);
}

Batch limit: verifyAll() caps at 10 presets per call — requesting all 12 fails. verifyAllBatched() splits into batches of PRESET_BATCH_LIMIT, runs them in parallel, and flattens the results.

10. Build the Dashboard

Create src/pages/Dashboard.tsx:

Each social card asks two separate questions: is this platform linked at all, and if it is, does the link actually carry any data?.

Three states instead of two — not-linked, linked-empty, linked — a linked-but-empty account is a real case, not an edge case then humanVerified runs through isPassed() .

Once it flips true, the heading drops "Linked accounts" and welcomes the user by their humanity_uuid instead, falling back to "Verified human" only if that specific preset didn't come back verified.

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { usePresets, useAuth } from '@humanity-org/react-sdk';
import { verifyAllBatched, findPresetResult, isPassed, type PresetResult } from '../presets';

interface SocialAccount {
  provider: string;
  username?: string;
  displayName?: string;
  emails?: string[];
}

const SOCIAL_PLATFORMS = [
  { id: 'twitter', label: 'Twitter' },
  { id: 'discord', label: 'Discord' },
  { id: 'telegram', label: 'Telegram' },
  { id: 'github', label: 'GitHub' },
  { id: 'google', label: 'Google' },
  { id: 'linkedin', label: 'LinkedIn' },
] as const;

function SocialCard({ label, account }: { label: string; account?: SocialAccount }) {
  const hasValue = Boolean(account?.username || account?.displayName);
  const state = !account ? 'not-linked' : hasValue ? 'linked' : 'linked-empty';

  return (
    <div className={`social-card social-card--${state}`}>
      <h3>{label}</h3>
      {state === 'not-linked' && <p>Not linked</p>}
      {state === 'linked-empty' && <p>Linked, no data returned</p>}
      {state === 'linked' && (
        <p>
          under username: <span className="username-value">{account?.displayName ?? account?.username}</span>
        </p>
      )}
    </div>
  );
}

export function Dashboard() {
  const { logout } = useAuth();
  const { verifyAll } = usePresets();
  const [results, setResults] = useState<PresetResult[] | null>(null);

  useEffect(() => {
    verifyAllBatched(verifyAll, ['is_human', 'social_accounts', 'humanity_uuid']).then(setResults);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const humanVerified = results !== null && isPassed(findPresetResult(results, 'is_human'));
  const socialResult = findPresetResult(results, 'social_accounts');
  const accounts = (
    socialResult?.verified && Array.isArray(socialResult.value) ? socialResult.value : []
  ) as SocialAccount[];
  const accountFor = (id: string) => accounts.find((a) => a.provider?.toLowerCase() === id);

  const uuidResult = findPresetResult(results, 'humanity_uuid');
  const uuidValue = uuidResult?.verified ? String(uuidResult.value ?? '') : null;

  return (
    <div className="dashboard">
      <header>
        <h1>Dashboard</h1>
        <nav>
          <Link to="/profile">Profile</Link>
          <button onClick={logout}>Sign out</button>
        </nav>
      </header>

      <section>
        <h2>Public content</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Visible to any authenticated user, verified or
          not.
        </p>
      </section>

      <section>
        {results === null ? (
          <>
            <h2>Linked accounts</h2>
            <p>Checking verification...</p>
          </>
        ) : !humanVerified ? (
          <>
            <h2>Linked accounts</h2>
            <p>Human verification required to see linked accounts.</p>
          </>
        ) : (
          <>
            <h2>Welcome {uuidValue ?? 'Verified human'}</h2>
            <p className="caption">You can prove your humanity across the following social profiles</p>
            <div className="social-grid">
              {SOCIAL_PLATFORMS.map((platform) => (
                <SocialCard key={platform.id} label={platform.label} account={accountFor(platform.id)} />
              ))}
            </div>
          </>
        )}
      </section>
    </div>
  );
}

verifyAll returns the preset field in camelCase — request is_human and the response comes back as isHuman. Because of this, looking up a result using the exact string you requested won't match through usePresets's built-in isVerified() / getResult(). findPresetResult() handles this by matching on presetName instead, which preserves the original request string.

---

11. Build the Profile page

Create src/pages/Profile.tsx:

resultFor reuses the Dashboard's findPresetResult(), so the lookup logic stays in one place. Most values are rendered with a plain JSON.stringify. social_accounts gets its own table instead — one row per account beats scanning a JSON blob for who's linked.

import { Link } from 'react-router-dom';
import { HumanityProfile } from '@humanity-org/react-sdk';
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { usePresets } from '@humanity-org/react-sdk';
import { IDENTITY_PRESETS, verifyAllBatched, findPresetResult, type PresetResult } from '../presets';

interface SocialAccount {
  provider: string;
  username?: string;
  displayName?: string;
  emails?: string[];
}

function SocialAccountsTable({ accounts }: { accounts: SocialAccount[] }) {
  if (accounts.length === 0) return <span>—</span>;

  return (
    <table className="sub-table">
      <thead>
        <tr>
          <th>Provider</th>
          <th>Username</th>
          <th>Display name</th>
          <th>Emails</th>
        </tr>
      </thead>
      <tbody>
        {accounts.map((account, i) => (
          <tr key={`${account.provider}-${i}`}>
            <td>{account.provider}</td>
            <td>{account.username ?? '—'}</td>
            <td>{account.displayName ?? '—'}</td>
            <td>{account.emails?.length ? account.emails.join(', ') : '—'}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export function Profile() {
  const { verifyAll } = usePresets();
  const [results, setResults] = useState<PresetResult[] | null>(null);

  useEffect(() => {
    verifyAllBatched(verifyAll, IDENTITY_PRESETS).then(setResults);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const resultFor = (preset: string) => findPresetResult(results, preset);

  const formatValue = (value: unknown) => {
    if (value === undefined || value === null) return '—';
    if (typeof value === 'object') return JSON.stringify(value);
    return String(value);
  };

  const renderValue = (preset: string, result: PresetResult | undefined) => {
    if (!result?.verified) return '—';
    if (preset === 'social_accounts' && Array.isArray(result.value)) {
      return <SocialAccountsTable accounts={result.value as SocialAccount[]} />;
    }
    return formatValue(result.value);
  };

  return (
    <div className="profile">
      <header>
        <Link to="/dashboard">← Dashboard</Link>
      </header>

      <h1>Profile</h1>

      <section>
        {results === null ? (
          <p>Checking verification...</p>
        ) : (
          <table className="preset-table">
            <thead>
              <tr>
                <th>Preset</th>
                <th>Value</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {IDENTITY_PRESETS.map((preset) => {
                const result = resultFor(preset);
                return (
                  <tr key={preset}>
                    <td>{preset}</td>
                    <td>{renderValue(preset, result)}</td>
                    <td>{result?.verified ? '✅' : '❌'}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </section>
    </div>
  );
}

---

12. Add styles

Replace src/index.css:

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, sans-serif;
  background: #0f0f0f;
  color: #f0f0f0;
  min-height: 100vh;
}

.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1.5rem;
  text-align: center;
}

.home h1 { font-size: 2rem; }
.home p { color: #999; }
.error { color: #f87171; }

.dashboard, .profile {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #2a2a2a;
}

nav { display: flex; gap: 1rem; align-items: center; }

section {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
section h2 { margin-bottom: 1rem; }

button {
  background: #1a1a1a;
  color: #f0f0f0;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

button:hover { border-color: #555; }

a { color: #888; text-decoration: none; }
a:hover { color: #f0f0f0; }

.loading { display: flex; justify-content: center; padding: 2rem; color: #888; }

.profile h1 { font-size: 1.5rem; margin-bottom: 1rem; }

.caption { color: #888; font-size: 0.85rem; margin-bottom: 1rem; }

.social-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.social-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.social-card h3 { font-size: 1rem; }
.social-card p { font-size: 0.85rem; color: #999; }
.social-card--not-linked { opacity: 0.4; }
.social-card--linked-empty { border-color: #666; }
.social-card--linked { border-color: #4ade80; background: rgba(74, 222, 128, 0.08); }
.social-card--linked p { color: #f0f0f0; }
.username-value { color: #4ade80; }

.preset-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.preset-table th {
  text-align: left;
  color: #888;
  font-weight: 500;
  padding: 0.5rem;
  border-bottom: 1px solid #2a2a2a;
}
.preset-table td {
  padding: 0.5rem;
  border-bottom: 1px solid #2a2a2a;
  font-family: ui-monospace, monospace;
}
.preset-table tr:last-child td { border-bottom: none; }

.sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0.25rem 0;
}
.sub-table th {
  text-align: left;
  color: #666;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #333;
}
.sub-table td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #222;
}
.sub-table tr:last-child td { border-bottom: none; }

---

12. Run it

bun dev

Open http://localhost:5173. Click Sign in with Humanity, complete consent, and you'll land on the Dashboard.

• Once is_human passes, the heading swaps to your humanity_uuid and each platform gets its own card, color-coded by link status
• /profile lists all 12 identity:read presets — status, value, and the full social_accounts breakdown
• Sign out clears the session and drops you back at /

⚠️ Firefox and Safari users: both can clear sessionStorage mid-redirect during cross-domain OAuth. The SDK always stores the PKCE verifier and OAuth state there, regardless of the storage prop — so a clear mid-flow breaks the callback with a state/PKCE mismatch.

Switch to Chrome or Brave if you hit this in testing.

---

How it works

The SDK owns the full OAuth flow internally — PKCE, token exchange, storage. On your side: isAuthenticated for route protection, user for profile data, usePresets().verifyAll() for a batch check across every preset you care about, and a simple count or per-preset lookup for gating.

Compare with the Frontend OAuth with the Connect SDK guide — there you call buildAuthUrl(), exchangeCodeForToken(), and verifyPresets() directly. Here you drop in components.

Next steps

The Human First Content Platform App builds on this same project — same HumanityProvider setup, same usePresets pattern — but swaps the single is_human gate for four content tiers, each unlocked by its own preset.