Portal Pages

After login, developers access these authenticated pages to manage their integration.

Authentication Pages

Login (/portal/login)

File: PortalLogin.jsx

Fields:

• Email (required)
• Password (required)

Behavior:

• Calls login() from usePortalAuth() context
• On success: Redirects to /portal/dashboard
• On error: Displays error message

Signup (/portal/signup)

File: PortalSignup.jsx

Fields:

• Email (required)
• Password (required, 8+ characters)
• Company name (optional)

Post-Signup Flow:

1. Account created
2. API key displayed (copy button provided)
3. Pre-filled curl command shown for immediate testing
4. CTA to proceed to dashboard

---

Main Pages

Dashboard (/portal/dashboard)

File: PortalDashboard.jsx

Purpose: Overview hub with quick access to all features

Sections:

Test Mode Banner

• Yellow banner indicating sandbox environment
• Explains that API calls use mock data

Stats Grid (4 cards)

Stat	Source Hook	Link
Balance	useBalance()	Add funds
API Calls (30 days)	useUsageSummary()	-
API Keys	useKeys()	Manage keys
Success Rate	Computed	-

Getting Started Checklist

5-step onboarding progress:

1. Create account
2. Get API key
3. Make first API call
4. Test in Explorer
5. Add payment method

Quick Actions (4 cards)

• API Keys
• Explorer
• Quickstart
• API Docs (external)

Recent Activity

• Last 5 API requests
• Shows timestamp, endpoint, status badge, latency
• Source: useRequestLogs()

---

API Keys (/portal/keys)

File: PortalKeys.jsx

Purpose: Manage API credentials

Features:

Create Key Button

• Generates new sk_test_* key
• Key shown once after creation (copy it immediately)

Keys Table

Column	Description
Name	Key identifier
Key	Masked format: sk_test_...{last6}
Environment	test or live badge
Created	Timestamp
Last Used	Timestamp or "Never"
Status	Active/Revoked badge
Actions	Revoke button

Key Types Info

Explanation card describing:

• Test keys: sk_test_* - Use mock data, no charges
• Live keys: sk_live_* - Real verification, charges apply

Hooks:

• useKeys() - List keys
• useCreateKey() - Create new key
• useRevokeKey() - Revoke key

---

Explorer (/portal/explorer)

File: PortalExplorer.jsx

Purpose: Interactive API testing sandbox

Layout: Three-panel design

Left Panel - Primitives Sidebar

Categories and endpoints:

Category	Primitives
Screening	Individual, Company, Wallet
Biometrics	Face Compare, Liveness, Age Estimation, Face Search, Face Quality
Document	OCR, Classify, Fraud Detection
Device Intel	IP Check, Email Check, Phone Check
Identity & Compliance	Identity Match, Address Verify
AI	Risk Summary, Document Fraud

Center Panel - Request

• JSON Editor: Editable request body with sample data
• Magic Values: Reference table for test data (e.g., JOHN_DOE triggers specific results)
• Run Button: Execute the request
• Get Code Button: Generate integration code

Right Panel - Response

• JSON response display
• Execution time
• Cost (if applicable)

Template Mode

When accessed via ?template={id}:

• Banner shows template info (industry, steps, cost, time)
• "Run All Steps" button executes multi-step flow
• Step results show pass/fail indicators
• Sidebar shows step status (pending/running/complete/failed)

Embed Code Modal

Generate code in:

• curl
• JavaScript (fetch)
• Python (requests)

---

Request Logs (/portal/logs)

File: PortalLogs.jsx

Purpose: View API request history

Filters:

Filter	Options
Primitive	Dropdown of all primitives
Status	2xx Success, 4xx Client Error, 5xx Server Error
Date Range	Start date, End date pickers

Table Columns:

Column	Description
Timestamp	Request time
Primitive	API endpoint called
Status	HTTP status badge (green/yellow/red)
Latency	Response time in ms
Cost	Charge amount

Expandable Rows:

• Full endpoint URL
• Client IP address
• Request ID

Pagination: Previous/Next buttons

Hook: useRequestLogs(filters)

---

Usage (/portal/usage)

File: PortalUsage.jsx

Purpose: Analytics and cost tracking

Period Selection: Tabs for 7 / 30 / 90 days

Summary Cards (3):

Card	Description
Total Calls	API requests in period
Total Cost	Charges in period
Avg Cost/Call	Cost divided by calls

Breakdown Table:

• Grouped by primitive
• Shows call count and cost per primitive

Daily Chart:

• Bar chart of calls per day
• Hover tooltip with date and count

Hooks:

• useUsageSummary(start, end)
• useUsageBreakdown(start, end)
• useUsageDaily(start, end)

---

Billing (/portal/billing)

File: PortalBilling.jsx

Purpose: Credits and payment management

Sections:

Current Balance

• Large balance display
• Auto-reload status indicator

Buy Credits

• Quick-buy buttons: $10, $25, $50, $100
• Custom amount input
• Stripe checkout flow

Payment Methods

Column	Description
Card	Brand icon + last 4 digits
Expiry	MM/YY
Default	Badge if primary
Actions	Remove button

"Add Payment Method" opens Stripe Elements form

Auto-Reload (if payment method exists)

• Enable/disable toggle
• Threshold: Balance that triggers reload
• Amount: How much to add

Transaction History

Column	Description
Date	Transaction timestamp
Type	purchase / deduction / auto_reload
Description	Details
Amount	+ or - with color coding
Balance After	Running balance

Hooks:

• useBalance()
• useTransactions(page)
• usePaymentMethods()
• usePurchaseCredits()
• useUpdateAutoReload()

---

Webhooks (/portal/webhooks)

File: PortalWebhooks.jsx

Purpose: Configure event notifications

Create Webhook Form:

• Name (optional)
• URL (required, must be HTTPS)
• Events (multi-select from 7 event types)

After Creation:

• Signing secret displayed (copy immediately)
• Used for HMAC-SHA256 verification

Webhooks Table:

Column	Description
Name	Webhook identifier
URL	Endpoint receiving events
Events	First 2 shown, "+N more" if additional
Status	Active/Inactive badge
Last Success	Timestamp of last successful delivery
Actions	Test, Delete buttons

Expandable Delivery History:

Column	Description
Event	Event type
Status	delivered / failed / pending
HTTP Code	Response status
Retries	Attempt count
Timestamp	Delivery time
Error	Error message if failed

Signing Verification Docs:

• Python code example for HMAC-SHA256 signature verification

Hooks:

• useWebhooks()
• useCreateWebhook()
• useDeleteWebhook()
• useTestWebhook()
• useDeliveries(webhookId, page)

---

Quickstart (/portal/quickstart)

File: PortalQuickstart.jsx

Purpose: Integration guide

Sections:

SDK Hero

• Package name and version
• Key features list

Step 1: Get Session Token

• Backend code example (Python/Node)
• Endpoint: POST /api/v1/sessions

Step 2: Add Component

• Tabbed examples: React, Next.js
• Shows <VerificationFlow> component usage

Step 3: Handle Result

• Outcome states: approved, pending_review, denied
• Callback handling example

Go Live Checklist

1. Test in sandbox
2. Add payment method
3. Review webhook setup
4. Switch to live keys

Customization

• Theme options (light/dark)
• Color customization
• Logo upload

Requirements

• Browser support matrix
• Dependencies

---

Layout Components

PortalLayout (PortalLayout.jsx)

Wraps all authenticated pages with:

• Header with logo and navigation
• Dropdown menus (Develop, Monitor)
• Theme toggle
• User menu with logout

Navigation Structure

Header
├── Logo (→ /portal/dashboard)
├── Develop ▼
│   ├── API Keys
│   ├── Explorer
│   ├── Webhooks
│   ├── Quickstart
│   └── API Docs (external)
├── Monitor ▼
│   ├── Request Logs
│   └── Usage
├── Billing
├── Theme Toggle
└── User Menu ▼
    ├── Email display
    └── Logout

---

Shared Components

Component	File	Purpose
PortalCodeBlock	PortalCodeBlock.jsx	Syntax-highlighted code display
PortalSkeleton	PortalSkeleton.jsx	Loading placeholder
PortalToast	PortalToast.jsx	Notification toasts
PaymentMethodForm	PaymentMethodForm.jsx	Stripe card input

---

Data Layer

Hooks Pattern

All hooks use TanStack React Query:

// Query keys
export const entityKeys = {
  all: ['portal-entity'],
  list: () => [...entityKeys.all, 'list'],
  detail: (id) => [...entityKeys.all, 'detail', id],
};

// Queries
export function useEntity() {
  return useQuery({ queryKey, queryFn });
}

// Mutations
export function useCreateEntity() {
  return useMutation({
    mutationFn,
    onSuccess: () => queryClient.invalidateQueries(entityKeys.all)
  });
}

Services Layer

Thin wrappers around portalApi:

Service	File	Endpoints
auth	auth.js	signup, login, getProfile
keys	keys.js	listKeys, createKey, revokeKey
billing	billing.js	getBalance, purchaseCredits, getPaymentMethods
logs	logs.js	getRequestLogs
usage	usage.js	getSummary, getBreakdown, getDaily
webhooks	webhooks.js	CRUD + test + deliveries
explorer	explorer.js	invokeTest