Examples

Basic Integration

import { UntracedProvider, UntracedModal, useUntracedModal } from '@untraced/sdk';

function App() {
  return (
    <UntracedProvider config={{ clientId: "your-id" }}>
      <Dashboard />
      <UntracedModal />
    </UntracedProvider>
  );
}

function Dashboard() {
  const { open } = useUntracedModal();

  return (
    <button onClick={() => open('zk-email')}>
      Verify Email
    </button>
  );
}

With Next.js App Router

// app/layout.tsx
import { UntracedProvider, UntracedModal } from '@untraced/sdk';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <UntracedProvider config={{
          clientId: process.env.NEXT_PUBLIC_UNTRACED_CLIENT_ID
        }}>
          {children}
          <UntracedModal />
        </UntracedProvider>
      </body>
    </html>
  );
}

With Custom Styling

<UntracedProvider
  config={{
    clientId: "your-id",
    theme: "light",
    accentColor: "#3b82f6",
  }}
>
  <App />
  <UntracedModal />
</UntracedProvider>

Multiple Verifications

function MultiVerify() {
  const { open, verificationResult } = useUntracedModal();
  const [verified, setVerified] = useState({
    email: false,
    github: false,
  });

  useEffect(() => {
    if (verificationResult) {
      setVerified(prev => ({
        ...prev,
        [verificationResult.moduleId.replace('zk-', '')]: true,
      }));
    }
  }, [verificationResult]);

  return (
    <div>
      <button
        onClick={() => open('zk-email')}
        disabled={verified.email}
      >
        {verified.email ? 'Email Verified' : 'Verify Email'}
      </button>

      <button
        onClick={() => open('zk-github')}
        disabled={verified.github}
      >
        {verified.github ? 'GitHub Verified' : 'Verify GitHub'}
      </button>
    </div>
  );
}

PreviousTroubleshooting NextFAQ

Last updated 5 minutes ago

hashtagBasic Integration

hashtagWith Next.js App Router

hashtagWith Custom Styling

hashtagMultiple Verifications

Basic Integration

With Next.js App Router

With Custom Styling

Multiple Verifications