@txwallet/react

React hooks + components for Sign in with TX Wallet. Wraps @txwallet/auth-browser so a React app adds wallet sign-in with one provider and one button — no event glue.

Auth signs an off-chain ADR-36 proof. It does not move funds or authorize checkout.

Install

npm install @txwallet/react react

Use

import { TxWalletProvider, TxWalletSignInButton, useTxWalletAuth } from '@txwallet/react';

function SignIn() {
  const { isApproved, account } = useTxWalletAuth();
  if (isApproved) return <p>Signed in as {account?.address}</p>;
  return (
    <TxWalletSignInButton onApproved={() => location.assign('/dashboard')}>
      Sign in with TX Wallet
    </TxWalletSignInButton>
  );
}

export default function App() {
  return (
    <TxWalletProvider config={{
      requestOptions: {
        endpoint: '/api/tx-wallet/signin/requests',
        callbackUrl: `${location.origin}/tx-wallet/callback`,
        statement: 'Sign in to Example with TX Wallet.',
      },
    }}>
      <SignIn />
    </TxWalletProvider>
  );
}

That's it. The provider runs the request → open-wallet → poll lifecycle and keeps React state in sync.

useTxWalletAuth()

Returns:

| field | meaning | |---|---| | status | 'idle' \| 'pending' \| 'approved' \| 'rejected' \| 'failed' \| 'expired' \| 'error' | | account | { address } once approved, else null | | request | the created request while pending | | error | last error, if any | | isPending / isApproved / isFinal | convenience booleans | | signIn(options?) | start a sign-in (the button calls this for you) | | cancel(reason?) | cancel an in-flight sign-in | | reset() | clear state back to idle |

<TxWalletSignInButton>

A plain <button> (pass className/styles as usual). Props: onApproved(account), onRejected(), onError(error), launchOptions, disableWhilePending (default true). It renders a state-aware default label unless you pass children, and sets data-txwallet-status for styling.

Backend

You still need the four Auth endpoints. Use @txwallet/auth-express, or scaffold the whole thing with npx create-txwallet.

The backend remains the source of truth — confirm the session server-side after approval.