@aho-sdk/components-react

React components for Aho credential verification using the Digital Credentials API.

Installation

npm install @aho-sdk/components-react

Quick Start

Wrap your app with AhoProvider and use CredentialButton:

import { AhoProvider, CredentialButton, Claim } from '@aho-sdk/components-react';

function App() {
  return (
    <AhoProvider config={{ apiKey: 'aho_pub_xxx' }}>
      <CredentialButton
        claims={[Claim.AGE_OVER_21]}
        onVerified={(result) => {
          console.log('Verified:', result.verified);
          console.log('Trusted issuer:', result.issuer?.name);
        }}
      >
        Verify Age
      </CredentialButton>
    </AhoProvider>
  );
}

Components

AhoProvider

Context provider that configures the Aho client for all child components.

<AhoProvider
  config={{
    apiKey: 'aho_pub_xxx',    // Required
    clientName: 'My App',     // Optional: shown in wallet dialogs
    baseUrl: 'https://...',   // Optional: custom API endpoint
  }}
>
  {children}
</AhoProvider>

CredentialButton

Pre-built button for credential verification with built-in state management.

<CredentialButton
  claims={[Claim.AGE_OVER_21]}
  documentTypes={[DocumentType.DRIVERS_LICENSE]}  // Optional
  onVerified={(result) => handleSuccess(result)}
  onError={(error) => handleError(error)}
  loadingContent={<>Verifying...</>}              // Optional
  successContent={<>Verified!</>}                 // Optional
  errorContent={<>Try again</>}                   // Optional
  unsupportedContent={<>Not available</>}         // Optional
  className="my-custom-class"                     // Optional
>
  Verify Age
</CredentialButton>

State classes: The button applies CSS classes based on state:

.aho-idle - Ready to verify
.aho-verifying - Verification in progress
.aho-success - Verification succeeded
.aho-error - Verification failed

CredentialDisplay

Component for displaying rendered credentials after verification.

import { CredentialDisplay } from '@aho-sdk/components-react';

// Server-rendered mode (typical post-verification)
<CredentialDisplay src={result.renderUrl} />

// With options
<CredentialDisplay
  src={result.renderUrl}
  size="large"
  enableDownload
  onLoaded={(format, templateKey) => console.log('Loaded:', format)}
  onError={(error) => console.error('Failed:', error)}
/>

// Controlled mode (pre-fetched data)
<CredentialDisplay
  data={{ format: 'svg', content: '<svg>...</svg>' }}
/>

Props:

src - URL to fetch rendered credential
data - Pre-fetched render response data
size - Size variant: "compact", "default", "large"
loadingText - Text shown while loading
errorText - Text shown on error
enableDownload - Show download button
onLoaded - Callback when content loads
onError - Callback when loading fails
onDownload - Callback when download is triggered

CSS Custom Properties:

.my-credential-display {
  --aho-display-bg: #ffffff;
  --aho-display-border: 1px solid #e5e7eb;
  --aho-display-radius: 0.75rem;
  --aho-display-compact-width: 280px;
  --aho-display-default-width: 400px;
  --aho-display-large-width: 600px;
}

Hooks

useAho

Access the Aho context from any component inside AhoProvider:

import { useAho, Claim } from '@aho-sdk/components-react';

function CustomButton() {
  const { verify, state, isVerifying, isSupported, result } = useAho();

  if (!isSupported) {
    return <p>Browser not supported</p>;
  }

  return (
    <button onClick={() => verify({ claims: [Claim.AGE_OVER_21] })}>
      {isVerifying ? 'Verifying...' : 'Verify'}
    </button>
  );
}

useCredentialVerify

Standalone hook for verification without AhoProvider:

import { useCredentialVerify, Claim } from '@aho-sdk/components-react';

function StandaloneVerify() {
  const { verify, state, isVerifying, result, error, isSupported } = useCredentialVerify({
    apiKey: 'aho_pub_xxx',
    onStateChange: (state) => console.log('State:', state),
    onComplete: (result) => console.log('Result:', result),
    onError: (error) => console.error('Error:', error),
  });

  return (
    <button
      onClick={() => verify({ claims: [Claim.AGE_OVER_21] })}
      disabled={isVerifying || !isSupported}
    >
      Verify
    </button>
  );
}

Re-exports

This package re-exports commonly used items from @aho-sdk/verify:

import {
  // Client
  AhoVerify,
  createClient,

  // Constants
  Claim,
  DocumentType,

  // Functions
  isSupported,
  detectPlatform,

  // Errors
  AhoError,
  VerifyError,
} from '@aho-sdk/components-react';

// Types
import type {
  AhoVerifyConfig,
  ClaimType,
  DocumentTypeValue,
  VerifyState,
  VerifyResult,
  VerifyOptions,
  IssuerInfo,
  ErrorCode,
  Platform,
} from '@aho-sdk/components-react';

Browser Support

The Digital Credentials API is available in:

Chrome 128+ (Android)
Chrome (Desktop with flag enabled)

Use isSupported() to check availability at runtime.

License

MIT