Your browser can request digital credentials.
; } if (support.state === "checking") { returnChecking browser support...
; } returnDigital Credentials API is not available: {support.reason}
; } ``` The hook wraps `detectDcApiSupport()` from `dcapi-verifier.ts`. ## Hook: `useSmartCheckinVerifier` `useSmartCheckinVerifier` manages a credential request lifecycle: | Phase | Meaning | | --- | --- | | `idle` | No active request. | | `preparing` | The verifier authority is building a Digital Credentials request. | | `requesting` | The page is calling or waiting on `navigator.credentials.get`. | | `completing` | The verifier authority is opening/validating the returned credential. | | `complete` | A SMART Check-in response was received and validated. | | `error` | The flow failed or was rejected. | Browser-local example: ```tsx import { useSmartCheckinVerifier } from "./sdk/react.tsx"; import type { SmartCheckinRequest } from "./sdk/core.ts"; function ShareCheckin({ request }: { request: SmartCheckinRequest }) { const verifier = useSmartCheckinVerifier({ origin: location.origin, onComplete(completion) { console.log("SMART response", completion.openedResponse.smartResponse); }, }); return ( <> {verifier.phase === "error" && ({verifier.error.message}
)} > ); } ``` Server-owned authority example: ```tsx import { useMemo } from "react"; import { useSmartCheckinVerifier } from "./sdk/react.tsx"; import { createServerVerifierAuthority } from "./server-authority-client.ts"; function PortalShare({ request }) { const authority = useMemo( () => createServerVerifierAuthority("/api/checkin"), [], ); const verifier = useSmartCheckinVerifier({ authority, onComplete(completion) { console.log("backend-opened response", completion.openedResponse.smartResponse); }, }); return ( ); } ``` The UI code is the same shape for browser-local and server-owned verifier crypto. Only the `authority` changes. ## Component: `SmartCheckinButton` `SmartCheckinButton` is a convenience component over the hook. ```tsx import { SmartCheckinButton } from "./sdk/react.tsx"; function CheckinButton({ request }) { return (