React Quickstart

Bind sensitive actions to transaction-scoped access tokens with the X-Auth React SDK. Five minutes from npm install to a verified fetch().

SDK: @xentranet/x-auth-react Version: 1.x Time: ~5 min

Install the SDK

Add the React SDK to your project. It ships an XAuthProvider for context and a useXAuth() hook for components.

terminal

npm install @xentranet/x-auth-react

Wrap your app in `XAuthProvider`

Initialize once at the root with your tenant id. The provider handles SDK state, OIDC step-up, and token caching for every component below it.

src/main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { XAuthProvider } from '@xentranet/x-auth-react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <XAuthProvider tenantId={import.meta.env.VITE_XAUTH_TENANT_ID}>
      <App />
    </XAuthProvider>
  </StrictMode>
);

Call `advice()` on a sensitive action

Inside any component, grab the advice function from the hook. The SDK runs any required step-up automatically and returns a decision plus a transaction-bound access_token.

src/components/TransferButton.tsx

import { useXAuth } from '@xentranet/x-auth-react';

export function TransferButton({ amount }: { amount: number }) {
  const { advice } = useXAuth();

  async function onTransfer() {
    const { decision, access_token } = await advice({
      action: 'transfer', amount, currency: 'USD',
    });
    if (decision !== 'ALLOW') return;

    await fetch('/api/transfer', {
      method: 'POST',
      headers: { Authorization: `Bearer ${access_token}` },
      body: JSON.stringify({ amount }),
    });
  }

  return <button onClick={onTransfer}>Transfer ${amount}</button>;
}

Verify on your backend

Your API server validates the bearer with verify() and asserts the token matches the action being requested. If the token was issued for a different action or amount, verify() throws.

api/transfer.ts (Node example)

import { XAuth } from '@xentranet/x-auth';

const xauth = XAuth.init({ tenantId: process.env.XAUTH_TENANT_ID });

app.post('/api/transfer', async (req, res) => {
  const bearer = req.headers.authorization?.replace('Bearer ', '');

  const { transaction_ctx } = await xauth.verify(bearer, {
    expect: { action: 'transfer', amount: req.body.amount },
  });

  await ledger.transfer(transaction_ctx);
  res.json({ ok: true });
});

Pair with a backend quickstart for full setup: Express, Go, Spring Boot, ASP.NET.

React Quickstart

Install the SDK

Wrap your app in XAuthProvider

Call advice() on a sensitive action

Verify on your backend

Next steps

Wrap your app in `XAuthProvider`

Call `advice()` on a sensitive action