Verify humanity and request reputation scores in your Next.js app.
npm install bringidimport { BringID } from "bringid";
const bringid = new BringID();
// Get a reputation score (0-100) — works immediately
const { score } = await bringid.getAddressScore("0x...");
// Verify humanity and get proofs — requires modal setup (see below)
const { proofs, points } = await bringid.verifyHumanity();Note:
getAddressScoreworks out of the box.verifyHumanityrequires the modal provider — see Setup below.
- Next.js 13+ (App Router)
- React 18+
- Wallet provider (wagmi, ethers, etc.)
Create a shared instance to use across your app:
// lib/bringid.ts
import { BringID } from "bringid";
export const bringid = new BringID();The verifyHumanity method requires a modal. Render it once at the root of your app:
// app/providers/BringIDProvider.tsx
"use client";
import { BringIDModal } from "bringid";
import { useAccount, useWalletClient } from "wagmi";
export function BringIDProvider({ children }: { children: React.ReactNode }) {
const { address } = useAccount();
const { data: walletClient } = useWalletClient();
return (
<>
{walletClient && (
<BringIDModal
address={address}
generateSignature={(message) => walletClient.signMessage({ message })}
iframeOnLoad={() => console.log("BringID ready")}
/>
)}
{children}
</>
);
}// app/layout.tsx
import { BringIDProvider } from "./providers/BringIDProvider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<WagmiProvider>
<BringIDProvider>{children}</BringIDProvider>
</WagmiProvider>
</body>
</html>
);
}Returns a reputation score for any address. No wallet connection required.
const { score } = await bringid.getAddressScore("0x...");
// score: number (0-100)Opens the verification modal and returns proofs. Requires the modal provider to be mounted.
const { proofs, points } = await bringid.verifyHumanity();
// With custom scope
const { proofs, points } = await bringid.verifyHumanity({
scope: "0x...",
});
// With minumum points requirement. If `minPoints` not presented any amount of points above 0 is acceptable
const { proofs, points } = await bringid.verifyHumanity({
minPoints: 10,
});Returns:
proofs— Array of semaphore proofspoints— Humanity points earned
Use mode="dev" on the modal for testing:
<BringIDModal
mode="dev"
address={address}
generateSignature={(message) => walletClient.signMessage({ message })}
/>Note: Production mode is enabled by default. Only use
devmode during development.
"use client";
import { useState } from "react";
import { bringid } from "@/lib/bringid";
export function VerifyButton() {
const [points, setPoints] = useState<number | null>(null);
const handleVerify = async () => {
try {
const { points } = await bringid.verifyHumanity();
setPoints(points);
} catch (err) {
console.error("Verification failed:", err);
}
};
return (
<div>
<button onClick={handleVerify}>Verify Humanity</button>
{points !== null && <p>Points: {points}</p>}
</div>
);
}Modal doesn't open
- Ensure
BringIDProvideris in your layout - Ensure the component calling
verifyHumanityhas"use client" - Ensure wallet is connected before calling
Score returns undefined
- Verify the address format is correct (checksummed)
MIT