Guide

Build custom VibeID UI.

Use the headless hook when your app needs full control over layout, styling, animation, and copy.

Use the headless hook

The hook owns request creation, polling, mobile deep links, session refresh, and logout. You render whatever UI fits your product.

"use client";

import { useVibeIdSignIn, useVibeIdQrCode } from "@vibe-id/react";

export function CustomVibeIdLogin() {
  const vibe = useVibeIdSignIn();
  const qr = useVibeIdQrCode(vibe.request?.deepLinkUrl);

  return (
    <section>
      <button onClick={() => void vibe.start({ openAppOnMobile: true })}>
        Continue with VibeID
      </button>

      {qr.dataUrl ? <img src={qr.dataUrl} alt="VibeID sign-in QR code" /> : null}
      {vibe.polling ? <p>Waiting for approval...</p> : null}
      {vibe.error ? <p>{vibe.error}</p> : null}
    </section>
  );
}