BringID Widget

BringID Widget is a privacy-focused identity verification application built on the Semaphore protocol. It allows users to prove their identity without revealing personal information by leveraging zero-knowledge proofs and blockchain-based identity groups.

This widget is not meant to be used standalone. It is accessed exclusively through the BringIDModal component provided by the bringid npm package. The modal embeds the widget in an iframe and handles all communication between the host application and the verification flow.

SDK Constructor

The widget is controlled by the BringID class from the bringid package:

import { BringID } from "bringid";

const bringid = new BringID({
  appId: "0x...",           // required
  mode: "production",       // optional: "production" | "dev"
  redirectUrl: "https://...", // optional: deep link to redirect after OAuth verification
                              // (e.g. Base app or Coinbase Wallet URLs)
});

When redirectUrl targets Base app (https://base.app/...) or Coinbase Wallet (cbwallet://...), the widget shows a copy-to-clipboard overlay instead of attempting to open the link directly in the browser, since these URLs cannot be navigated to from an iframe context. Mini-app detection (isMiniApp) is handled automatically by the SDK.

Tech Stack

• Framework: Next.js 15 (App Router, Turbopack)
• Language: TypeScript
• UI: React 19, Styled Components
• State Management: Redux Toolkit, React Redux
• Blockchain: Ethers.js, Semaphore Protocol
• Analytics: Plausible (via next-plausible)

Environment Variables

Copy the example env file and fill in the values:

cp .env.example .env.local

Variable	Description
NEXT_PUBLIC_ZUPLO_API_KEY	API key for the Zuplo API gateway
NEXT_PUBLIC_TASK_PENDING_TIME	Duration (ms) for task pending state
NEXT_PUBLIC_IS_STAGING	Set to true to enable staging configuration

Development

Prerequisites

• Node.js 18+
• yarn

Getting Started

# Install dependencies
yarn install

# Start development server (with Turbopack)
yarn dev

The app will be available at http://localhost:3000.

Available Scripts

Command	Description
yarn dev	Start dev server with Turbopack
yarn build	Create production build
yarn start	Start production server
yarn lint	Run ESLint
yarn clean	Remove .next build cache

Blockchain

The widget targets the v3 credential registry on Base (mainnet) and Base Sepolia (testnet). The active registry address and supported tasks are loaded at runtime from the BringID/configs GitHub repository — no redeployment is needed when configs change.

Semaphore group IDs are fetched on-chain from the registry's appSemaphoreGroups mapping. The ZK proof scope is computed as:

keccak256(abi.encode(uint256 appId, address registry, uint256 context))

License

AGPL-3.0