Identity
Helium ID is an enterprise identity platform — businesses verify identities in real time (AI ID checks, facial comparison, liveness, NIN lookups), issue customers a digital identity wallet, and authenticate users with MFA and "Login with Helium ID". I built the frontend: the business admin portal — verifications, a developer/API-keys console, events, insights, billing, team, and a multi-step workspace onboarding — and the marketing site, on Next.js with TanStack Query/Table, Zustand, and a server-validated auth layer.
Context
Enterprises that need to verify customers — banks, fintechs, document platforms — don't want to build identity infrastructure themselves. Helium ID provides verification, a digital-identity wallet, and authentication as a single platform with an admin console and APIs. That means a data-dense operator dashboard for businesses to run verifications, and a polished public site to sell it.
Constraints
Role & Team
Process
01
I built the admin surface — verifications, events, insights, billing, team — on TanStack Query and Table with Recharts analytics, nuqs-driven URL state for filters and pagination, and Zustand stores for auth and workspace state. Each verification row tracks status (started, successful, failed), method, and the API key that initiated it.
02
For an identity product, trusting a cookie isn't enough. A request proxy revalidates the session against the backend (`/admin/auth/me`) on every navigation, redirects authenticated users away from auth routes, and bounces everyone else to a login that remembers where they were headed. MFA and OTP flows sit on top.
// proxy.ts — revalidate the session on every request
const hasValidSession = async (req: NextRequest) => {
const res = await fetch(`${apiBaseUrl}/admin/auth/me`, {
headers: { cookie: req.headers.get("cookie") ?? "" },
cache: "no-store",
});
return res.ok;
};
// unauthenticated -> /auth/access?from=<pathname>03
I built a multi-step workspace setup so businesses provision themselves, and a developers module for API keys and integration management — matching the platform's API-first pitch. I paired it with a Motion-animated, MDX-driven marketing site (shiki-highlighted docs) to sell the product.
// middleware matcher — guard the whole app except assets/api
export const config = {
matcher: ["/((?!api|_next/static|_next/image|favicon.ico|icon.svg).*)"],
};Outcome
Admin modules across the operator portal
Verification methods (ID, facial, liveness, NIN)
Named enterprise customers
Lessons
For an identity product, auth is the product — revalidating sessions server-side and treating MFA as table stakes mattered more than any single screen. And a data-dense operator console lives or dies on its table/query/URL-state layer staying consistent across modules.