React SDK

The React SDK provides hooks and components for integrating BaseID into React applications.

Installation

npm install @baseid/react @baseid/wasm

Setup

Wrap your application with the BaseIDProvider:

import { BaseIDProvider } from '@baseid/react';

function App() {
    return (
        <BaseIDProvider>
            <YourApp />
        </BaseIDProvider>
    );
}

The provider handles WASM initialization automatically.

Hooks

useBaseID

Access the core BaseID instance:

import { useBaseID } from '@baseid/react';

function MyComponent() {
    const { isReady, generateKey, issueCred } = useBaseID();

    if (!isReady) return <p>Loading...</p>;

    const handleIssue = async () => {
        const key = generateKey('Ed25519');
        const jwt = issueCred(key.toDid(), subject, type, claims, key);
    };

    return <button onClick={handleIssue}>Issue Credential</button>;
}

useVerification

Verify a credential and get the result:

import { useVerification } from '@baseid/react';

function VerifyPage() {
    const { verify, result, isVerifying } = useVerification();

    return (
        <div>
            <button onClick={() => verify(jwt, publicKey)}>
                {isVerifying ? 'Verifying...' : 'Verify'}
            </button>
            {result && <p>Valid: {result.valid ? 'Yes' : 'No'}</p>}
        </div>
    );
}

Components

QRCodeScanner

Scan OID4VCI credential offers:

import { QRCodeScanner } from '@baseid/react';

<QRCodeScanner onScan={(offer) => console.log('Offer:', offer)} />

TypeScript Support

The React SDK is fully typed. Import types directly:

import type { CredentialResult, KeyPairHandle } from '@baseid/react';