# Frontend OAuth with the Connect SDK {% hint style="info" %} This guide uses the sandbox environment. {% endhint %} Build a React app that authenticates users with Humanity's OAuth and gates access based on the `isHuman` biometric credential. The Connect SDK gives you three core methods that you can use to control the flow with no pre-built components or abstraction layer. After this guide you'll have: * A working Vite + React app that runs locally * The complete OAuth + PKCE flow wired up yourself * Biometric credential verification with live status display * A full sandbox test using mock credentials Use this approach if you want granular control over authentication, need to understand the flow before abstracting it, or are building a custom integration. Full source {% embed url="" %} ## Before you start You need: * [Node 18](https://nodejs.org/en) or higher * [Bun](https://bun.sh) (used throughout this guide) * A Humanity Developer Account to access the [Developer Portal](https://developers.humanity.org) and [Sandbox Dashboard](https://app.sandbox.humanity.org) If you haven't registered an application yet, follow the [Developer Portal setup guide](https://docs.humanity.org/developer-portal) first. You'll need your `clientId` and `redirectUri`. ## 01. Create the project ```bash mkdir connect-sdk-vite-biometric-quick-start && cd connect-sdk-vite-biometric-quick-start echo "node_modules\n.env.local" >> .gitignore git init ``` Create `package.json`: ```json { "name": "humanity-biometric-gating", "version": "1.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "preview": "vite preview" }, "dependencies": { "@humanity-org/connect-sdk": "latest", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.0.0" }, "devDependencies": { "@types/node": "^24.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", "@vitejs/plugin-react": "^5.0.0", "typescript": "~5.9.0", "vite": "^7.0.0", "vite-plugin-node-polyfills": "^0.22.0" } } ``` Install dependencies: ```bash bun install ``` {% hint style="info" %} The Connect SDK uses Node.js APIs (crypto, buffer, stream) internally. In browser environments, these must be polyfilled. The `vite-plugin-node-polyfills` package handles this automatically. {% endhint %} Create `vite.config.ts`: ```typescript import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import { nodePolyfills } from 'vite-plugin-node-polyfills' export default defineConfig({ plugins: [ react(), nodePolyfills({ include: ['crypto', 'buffer', 'stream', 'util'], globals: { Buffer: true, process: true, }, }), ], }) ``` Create `tsconfig.json`: ```json { "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] } ``` Create `tsconfig.app.json`: ```json { "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2022", "useDefineForClassFields": true, "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "types": ["vite/client"], "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src"] } ``` Create `tsconfig.node.json`: ```json { "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", "target": "ES2023", "lib": ["ES2023"], "module": "ESNext", "types": ["node"], "skipLibCheck": true, "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true, "strict": true }, "include": ["vite.config.ts"] } ``` Create `index.html` at the project root: ```html Biometric Access with Humanity
``` ## 02. Configure the Developer Portal Go to [developers.humanity.org](https://developers.humanity.org), open your application, and switch to the **Sandbox** tab in Settings. * Add `http://localhost:5173/oauth/callback` as a redirect URI * Under scopes, enable: * **OpenID Connect** (`openid`) — required for the OAuth flow * **Identity Information** (`identity:read`) — includes ***Palm Verified*** credential ## 03. Generate a sandbox credential Before testing the flow, generate ***a mock Palm Vein Biometric Scan credential*** in the Sandbox Dashboard. 1. Go to [app.sandbox.humanity.org](https://app.sandbox.humanity.org) and sign in 2. Open the **Create** tab 3. Search for **Palm Vein** and select it ## 04. Set up environment variables Create `.env.local` at the project root: ```bash VITE_HUMANITY_CLIENT_ID=your_client_id_here VITE_HUMANITY_REDIRECT_URI=http://localhost:5173/oauth/callback VITE_HUMANITY_ENVIRONMENT=sandbox ``` Get these values from the Developer Portal under your application's sandbox settings. {% hint style="warning" %} Don't commit `.env.local`. The `.gitignore` step above prevents this, but double-check before pushing. {% endhint %} ## 05. Build the app Create the folder structure: 
src/
├── components/
│   ├── Button.tsx
│   └── LoginButton.tsx
├── hooks/
│   └── useAuth.tsx
├── lib/
│   └── humanity.ts
├── pages/
│   ├── Dashboard.tsx
│   ├── Home.tsx
│   └── OAuthCallback.tsx
├── App.tsx
├── main.tsx
├── index.css
└── ...
### SDK initialization — `src/lib/humanity.ts` Initialize the Connect SDK with your credentials. Store and retrieve the PKCE code verifier in session storage. ```typescript import { HumanitySDK } from '@humanity-org/connect-sdk' export const sdk = new HumanitySDK({ clientId: import.meta.env.VITE_HUMANITY_CLIENT_ID, redirectUri: import.meta.env.VITE_HUMANITY_REDIRECT_URI, environment: import.meta.env.VITE_HUMANITY_ENVIRONMENT, }) const CODE_VERIFIER_KEY = 'humanity_code_verifier' export function storeCodeVerifier(codeVerifier: string) { sessionStorage.setItem(CODE_VERIFIER_KEY, codeVerifier) } export function getCodeVerifier() { return sessionStorage.getItem(CODE_VERIFIER_KEY) } export function clearCodeVerifier() { sessionStorage.removeItem(CODE_VERIFIER_KEY) } ``` ### Auth context — `src/hooks/useAuth.tsx` This context holds your access token, credentials, and metadata. Session storage keeps everything across page reloads during testing. ```typescript import { createContext, useContext, useState } from 'react' import type { ReactNode } from 'react' interface AuthState { accessToken: string | null isAuthenticated: boolean presets: any[] | null tokenData: any | null } interface AuthContextType extends AuthState { setAuth: (token: string, presets: any[], tokenData: any) => void logout: () => void } const AuthContext = createContext(null) export function AuthProvider({ children }: { children: ReactNode }) { const [auth, setAuthState] = useState({ accessToken: sessionStorage.getItem('humanity_access_token'), isAuthenticated: !!sessionStorage.getItem('humanity_access_token'), presets: JSON.parse( sessionStorage.getItem('humanity_presets') || 'null', ) as any[] | null, tokenData: JSON.parse( sessionStorage.getItem('humanity_token_data') || 'null', ), }) const setAuth = (token: string, presets: any[], tokenData: any) => { sessionStorage.setItem('humanity_access_token', token) sessionStorage.setItem('humanity_presets', JSON.stringify(presets)) sessionStorage.setItem('humanity_token_data', JSON.stringify(tokenData)) setAuthState({ accessToken: token, isAuthenticated: true, presets, tokenData, }) } const logout = () => { sessionStorage.removeItem('humanity_access_token') sessionStorage.removeItem('humanity_presets') sessionStorage.removeItem('humanity_token_data') setAuthState({ accessToken: null, isAuthenticated: false, presets: null, tokenData: null, }) } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (!context) throw new Error('useAuth must be used within AuthProvider') return context } ``` ### Button component — `src/components/Button.tsx` A reusable button with multiple style variants. ```typescript import type { ReactNode } from 'react' interface ButtonProps { onClick?: () => void children: ReactNode variant?: 'primary' | 'outline' | 'ghost' className?: string } export function Button({ onClick, children, variant = 'primary', className = '', }: ButtonProps) { const baseStyles = 'px-6 py-2 font-semibold transition-colors' const variantStyles = { primary: 'bg-primary text-primary-foreground rounded-md hover:bg-primary/90', outline: 'border border-border rounded-md hover:bg-muted', ghost: 'rounded-md hover:bg-muted hover:text-foreground', } return ( ) } ``` ### Login button — `src/components/LoginButton.tsx` This generates the SDK auth URL with PKCE and stores the code verifier before redirecting to Humanity. ```typescript import { sdk, storeCodeVerifier } from '../lib/humanity' import { Button } from './Button' export function LoginButton() { const handleLogin = () => { const { url, codeVerifier } = sdk.buildAuthUrl({ scopes: ['openid', 'identity:read'], }) storeCodeVerifier(codeVerifier) window.location.href = url } return ( ) } ``` ### Home page — `src/pages/Home.tsx` Display the verification card and redirect authenticated users to the dashboard. ```typescript import { LoginButton } from '../components/LoginButton' import { useAuth } from '../hooks/useAuth' import { Navigate } from 'react-router-dom' const HUMANITY_LOGO = ( ) export function Home() { const { isAuthenticated } = useAuth() if (isAuthenticated) { return } return (
{/* Humanity logo SVG here */}

Biometric gating flow using{' '} connect-sdk

Requested scopes: openid and{' '} identity:read

Implementation note

Request the preset as is_human, but read the SDK response using isHuman or{' '} presetName: is_human.

) } ``` ### OAuth callback — `src/pages/OAuthCallback.tsx` This page handles the redirect back from Humanity. It exchanges your authorization code for an access token and checks for the `is_human` credential. ```typescript import { useEffect, useState } from 'react' import { useNavigate, useSearchParams } from 'react-router-dom' import { sdk, getCodeVerifier, clearCodeVerifier } from '../lib/humanity' import { useAuth } from '../hooks/useAuth' export function OAuthCallback() { const [searchParams] = useSearchParams() const navigate = useNavigate() const { setAuth } = useAuth() const [error, setError] = useState(null) useEffect(() => { async function handleCallback() { const oauthError = searchParams.get('error') const errorDescription = searchParams.get('error_description') if (oauthError) { setError( `OAuth Error: ${oauthError}${errorDescription ? ` — ${errorDescription}` : ''}`, ) return } const code = searchParams.get('code') const codeVerifier = getCodeVerifier() if (!code) { setError('Missing authorization code from callback URL') return } if (!codeVerifier) { setError('Missing PKCE code verifier from session storage') return } try { const token = await sdk.exchangeCodeForToken({ code, codeVerifier, }) const verification = await sdk.verifyPresets({ accessToken: token.accessToken, presets: ['is_human'], }) setAuth(token.accessToken, verification.results, token) clearCodeVerifier() navigate('/dashboard') } catch (err) { setError(err instanceof Error ? err.message : 'Authentication failed') } } handleCallback() }, [searchParams, navigate, setAuth]) if (error) { return (

Authentication Error

{error}

Try again
) } return (

Processing authentication...

) } ``` ### Dashboard — `src/pages/Dashboard.tsx` Display the biometric status. The `is_human` credential can be `true`, `false`, or missing—the dashboard shows all three. ```typescript import { Navigate } from 'react-router-dom' import { useAuth } from '../hooks/useAuth' import { Button } from '../components/Button' function normalizeCredentialBoolean(value: unknown): boolean | null { if (typeof value === 'boolean') return value if (typeof value === 'string') { const normalized = value.trim().toLowerCase() if (normalized === 'true') return true if (normalized === 'false') return false } if (typeof value === 'number') { if (value === 1) return true if (value === 0) return false } return null } export function Dashboard() { const { isAuthenticated, logout, tokenData, presets } = useAuth() const environment = import.meta.env.VITE_HUMANITY_ENVIRONMENT || 'sandbox' if (!isAuthenticated) { return } const expiresIn = tokenData?.expiresIn ? Math.floor(tokenData.expiresIn / 60) : 0 const authorizationId = tokenData?.authorizationId || tokenData?.authorization_id || '—' const isHumanPreset = presets?.find((preset: any) => { const presetKey = preset?.preset const presetName = preset?.presetName return ( presetKey === 'is_human' || presetKey === 'isHuman' || presetName === 'is_human' ) }) const credentialValue = normalizeCredentialBoolean(isHumanPreset?.value) const hasCredential = isHumanPreset?.status === 'valid' && credentialValue !== null const isHumanValid = hasCredential && credentialValue === true const statusLabel = isHumanValid ? 'Human verified' : 'Not verified' const statusDescription = isHumanValid ? 'Biometric credential is valid and access is granted.' : credentialValue === false ? 'Biometric credential was found, but the is_human value is false.' : 'Biometric credential is missing or could not be evaluated for gated access.' const statusClassName = isHumanValid ? 'biometric-status-card biometric-status-card-valid' : 'biometric-status-card biometric-status-card-invalid' const statusDotClassName = isHumanValid ? 'status-dot status-dot-valid' : 'status-dot status-dot-invalid' const statusBadgeClassName = isHumanValid ? 'status-badge status-badge-valid' : 'status-badge status-badge-invalid' const valueLabel = credentialValue === null ? '—' : credentialValue ? 'true' : 'false' return (

Biometric Access

BIOMETRIC STATUS

{statusLabel}

{isHumanValid ? 'valid' : 'invalid'}

{statusDescription}

PRESET
is_human
VALUE
{valueLabel}
AUTHORIZATION ID
{authorizationId}
ACCESS TOKEN EXPIRES IN
{expiresIn} min
REQUESTED SCOPE
identity:read
SDK ENVIRONMENT
{environment}
) } ``` ### App routing — `src/App.tsx` ```typescript import { BrowserRouter, Routes, Route } from 'react-router-dom' import { AuthProvider } from './hooks/useAuth' import { Home } from './pages/Home' import { OAuthCallback } from './pages/OAuthCallback' import { Dashboard } from './pages/Dashboard' function App() { return ( } /> } /> } /> ) } export default App ``` ### Entry point — `src/main.tsx` ```typescript import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` ### Stylesheet — `src/index.css` The app uses a plain CSS stylesheet — no Tailwind. All component classes (`biometric-status-card`, `dashboard-shell`, `home-screen`, etc.) and the utility classes used throughout the components are defined here. ```css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-background: #080808; --color-foreground: #ffffffde; --color-muted: #151918; --color-muted-2: #212827; --color-muted-foreground: #ffffff4d; --color-border: #2a3230; --color-border-subtle: #ffffff08; --color-primary: #7cff4a; --color-primary-foreground: #080808; --color-primary-muted: #7cff4a1a; --color-primary-border: #7cff4a33; --color-green: #7cff4a; --color-red: #fb2c36; --color-red-muted: #fb2c361a; --color-red-border: #fb2c3633; } body { background: linear-gradient(to bottom, #0a0a0a, #050505); color: var(--color-foreground); font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .min-h-screen { min-height: 100vh; } .home-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; padding: 1rem; position: relative; isolation: isolate; overflow: hidden; } .home-screen::before, .home-screen::after { content: ''; position: fixed; border-radius: 9999px; pointer-events: none; z-index: -1; animation: background-pulse 4s ease-in-out infinite; } .home-screen::before { top: 15%; left: 10%; width: 18rem; height: 18rem; background: rgba(124, 255, 74, 0.1); filter: blur(100px); } .home-screen::after { right: 15%; bottom: 15%; width: 25rem; height: 25rem; background: rgba(37, 99, 235, 0.05); filter: blur(120px); animation-delay: 2s; } .home-screen > * { position: relative; z-index: 1; } .humanity-logo { display: block; width: min(300px, 80vw); height: auto; } .verification-card { width: min(100%, 36rem); } .verification-card-surface { background: rgba(21, 25, 24, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .dashboard-shell { width: min(100%, 42rem); } .biometric-status-card { border-width: 1px; border-style: solid; border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; background: rgba(255, 255, 255, 0.03); } .biometric-status-card-valid { border-color: var(--color-primary-border); background: linear-gradient(180deg, rgba(124, 255, 74, 0.08), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(124, 255, 74, 0.08); } .biometric-status-card-invalid { border-color: var(--color-red-border); background: linear-gradient(180deg, rgba(251, 44, 54, 0.08), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(251, 44, 54, 0.08); } .status-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .status-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; margin-right: 0.75rem; margin-top: 0.2rem; flex-shrink: 0; } .status-dot-valid { background: var(--color-green); box-shadow: 0 0 0 6px rgba(124, 255, 74, 0.12); } .status-dot-invalid { background: var(--color-red); box-shadow: 0 0 0 6px rgba(251, 44, 54, 0.12); } .status-badge { border-radius: 9999px; padding: 0.3rem 0.7rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; } .status-badge-valid { background: var(--color-primary-muted); color: var(--color-green); } .status-badge-invalid { background: var(--color-red-muted); color: var(--color-red); } .biometric-value-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; background: rgba(0, 0, 0, 0.12); } .dashboard-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .dashboard-meta-card { padding: 0.9rem 1rem; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; background: rgba(255, 255, 255, 0.02); min-width: 0; } .credential-text { overflow-wrap: anywhere; word-break: break-word; } .verification-copy { padding: 0.25rem 0; } .home-primary-copy { font-size: 1.375rem; line-height: 1.9rem; font-weight: 600; } .home-tagline { margin-top: 0.65rem; font-size: 0.875rem; line-height: 1.4rem; } .verification-note { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); text-align: left; } .verification-note > * + * { margin-top: 0.4rem; } .verify-button { min-width: 14rem; padding: 0.875rem 2rem; font-size: 1rem; line-height: 1.5rem; border-radius: 18px; } .flex { display: flex; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .text-center { text-align: center; } .w-full { width: 100%; } .w-3\/4 { width: 75%; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-5xl { max-width: 64rem; } .p-4 { padding: 1rem; } .p-3 { padding: 0.75rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .p-8 { padding: 2rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-4 { margin-bottom: 1rem; } .mr-2 { margin-right: 0.5rem; } .space-y-1 > * + * { margin-top: 0.25rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-5 > * + * { margin-top: 1.25rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .space-y-8 > * + * { margin-top: 2rem; } .gap-2 { gap: 0.5rem; } @media (max-width: 640px) { .status-header, .biometric-value-row { flex-direction: column; align-items: flex-start; } .dashboard-meta-grid { grid-template-columns: 1fr; } } .text-3xl { font-size: 1.875rem; line-height: 1.2; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-semibold { font-weight: 600; } .font-medium { font-weight: 500; } .font-mono { font-family: ui-monospace, 'Courier New', monospace; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wider { letter-spacing: 0.05em; } .text-muted-foreground { color: var(--color-muted-foreground); } .text-red-400 { color: var(--color-red); } .text-green-400 { color: var(--color-green); } .text-foreground { color: var(--color-foreground); } .text-primary-foreground { color: var(--color-primary-foreground); } .rounded-md { border-radius: 0.375rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .border { border-width: 1px; border-style: solid; } .border-b-2 { border-bottom-width: 2px; } .border-border { border-color: var(--color-border); } .border-red-400\/50 { border-color: var(--color-red-border); } .border-primary { border-color: var(--color-primary-border); } .bg-primary { background-color: var(--color-primary); } .bg-muted { background-color: var(--color-muted); } .bg-muted-2 { background-color: var(--color-muted-2); } .bg-red-400\/10 { background-color: var(--color-red-muted); } .bg-green-400 { background-color: var(--color-green); } .bg-green-500\/20 { background-color: var(--color-primary-muted); } .transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; } .hover\:bg-primary\/90:hover { background-color: #6ce63e; } .hover\:bg-muted:hover { background-color: var(--color-muted); } .hover\:text-foreground:hover { color: var(--color-foreground); } .block { display: block; } .h-8 { height: 2rem; } .w-8 { width: 2rem; } .w-2 { width: 0.5rem; } .h-2 { height: 0.5rem; } .animate-spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes background-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } button { cursor: pointer; border: none; outline: none; } a { color: inherit; text-decoration: none; } ``` ## 06. Run and test Start the dev server: ```bash bun dev ``` Open `http://localhost:5173`. You should see the home page with a "Verify" button. 1. Click **Verify** 2. Sign in with your sandbox account (the one with the mock `is_human` credential) 3. You'll land on the dashboard showing **Human verified** If you test without a credential, the dashboard shows **Not verified** with value `false` or missing.
## How it works The whole flow comes down to three SDK methods: 1. **`buildAuthUrl()`** — creates an authorization URL with PKCE. Store the code verifier in session storage. 2. **`exchangeCodeForToken()`** — swaps the authorization code for an access token using the stored verifier. 3. **`verifyPresets()`** — checks which credentials the user has. In this case, just `is_human`. The app keeps tokens and credential data in session storage. On the dashboard, it pulls out the `is_human` through `isHuman` mapping value and displays the result. ## Next Steps Ready to build a more complex application? The [Personalized Newsletter App](https://docs.humanity.org/developer-guides-and-tutorials/sdk-api-guides/personalized-newsletter-app-reference-implementation) takes everything you built here and moves it to a full-stack Next.js setup — tokens handled server-side, `clientSecret` kept out of the browser, and session storage replaced with HTTP-only cookies. You'll work with batch preset verification, the Query Engine, and MongoDB to build something that actually acts on verified identity: a personalized content feed driven by what Humanity knows about the user.