JavaScript/React Demo App

This example demonstrates a basic integration of @attestid/sdk into a React application using Vite.

It includes:

• SDK initialization
• Backend SDK token retrieval
• React verification component
• Local development configuration

Use this project as a reference alongside the Using the JavaScript / React SDK guide.

---

Application code

// src/App.tsx
import { AttestID } from '@attestid/sdk';
import { AttestIDVerifier } from '@attestid/sdk/react';
import '@attestid/sdk/styles.css';

const client = new AttestID({
  apiUrl: import.meta.env.VITE_API_URL ?? 'http://localhost:8000',
  getSdkToken: (userId) =>
    fetch('/api/attestid-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId }),
    }).then((response) => response.json()),
});

export default function App() {
  return (
    <div className="app">
      <AttestIDVerifier
        client={client}
        defaultUserId="user-123"
        onVerified={(result) => console.log(result)}
        onError={(error) => console.error(error)}
      />
    </div>
  );
}

The application requests SDK tokens from a backend endpoint. API credentials remain on the backend and are not exposed to the browser.

---

Development proxy

For local development, Vite can expose a temporary endpoint that exchanges API credentials for an SDK token.

This approach is intended for local development only. Production deployments should implement the same endpoint within the application's backend.

// vite.config.ts
import { defineConfig, type Connect, type Plugin } from 'vite';
import react from '@vitejs/plugin-react';

function attestidSessionProxy(): Plugin {
  const handler: Connect.NextHandleFunction = async (req, res, next) => {
    if (req.url !== '/api/attestid-session' || req.method !== 'POST') {
      return next();
    }

    let raw = '';

    for await (const chunk of req) {
      raw += chunk;
    }

    const { userId } = JSON.parse(raw || '{}');

    const apiUrl = process.env.ATTESTID_API_URL ?? 'http://localhost:8000';

    const upstream = await fetch(`${apiUrl}/v1/kyc/session`, {
      method: 'POST',
      headers: {
        'API-Key': process.env.ATTESTID_API_KEY ?? '',
        'Access-Key-Id': process.env.ATTESTID_ACCESS_KEY_ID ?? '',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        user_id: userId,
      }),
    });

    res.statusCode = upstream.status;
    res.setHeader('Content-Type', 'application/json');
    res.end(await upstream.text());
  };

  return {
    name: 'attestid-session-proxy',
    configureServer(server) {
      server.middlewares.use(handler);
    },
    configurePreviewServer(server) {
      server.middlewares.use(handler);
    },
  };
}

export default defineConfig({
  plugins: [
    react(),
    attestidSessionProxy(),
  ],
});

---

Environment variables

Frontend

VITE_API_URL=http://localhost:8000

Development proxy

ATTESTID_API_URL=http://localhost:8000
ATTESTID_API_KEY=your_api_key_here
ATTESTID_ACCESS_KEY_ID=your_access_key_id_here

See Creating a Company & Getting Your Keys for information about obtaining API credentials.

---

Running the application

Install dependencies:

npm install

Start the development server:

npm run dev

Create a production build:

npm run build

Preview the production build:

npm run preview

---

Verification checklist

Before deploying your application, verify that:

• AttestIDVerifier renders correctly.
• SDK tokens are successfully retrieved from the backend.
• Document capture completes successfully.
• Face liveness completes successfully.
• Verification results are returned by the API.
• Production deployments use a backend endpoint instead of the development proxy.