React Components

Drop-in React components for passkey authentication and crypto payments. No viem, wagmi, or web3 knowledge required.

import { PayButton, BatchQueueProvider, BatchQueueWidget, useBatchQueue } from '@rhinestone/1auth/react';

Why Use React Components?

Building a crypto-enabled app shouldn't require deep web3 expertise. Our React components abstract away the complexity:

No web3 libraries required - Works without viem, wagmi, ethers, or any other dependency
Built-in passkey flow - Authentication, signing, and status updates handled for you
Chain abstraction included - Users pay from any chain, bridging happens automatically
Production-ready UI - Styled components that work out of the box

Overview

These components work standalone - just pass a OneAuthClient instance and they handle everything: wallet connection, passkey prompts, transaction signing, and status updates.

Zero web3 boilerplate. No provider setup, no wallet connectors, no chain configuration. Your users click a button, authenticate with their passkey, and the transaction executes.

Export	Type	Description
`PayButton`	Component	One-click payment button with built-in auth flow
`BatchQueueProvider`	Component	Context provider for queuing multiple transactions
`BatchQueueWidget`	Component	Floating UI to review and sign queued transactions
`useBatchQueue`	Hook	Access batch queue state and methods

When to use these components:

PayButton - E-commerce checkouts, donations, tips, or any single-action payment
BatchQueue - Shopping carts, multi-step workflows, or batching gas-efficient operations

All components handle the complete passkey flow internally: authentication prompts, transaction signing, and status updates.

AuthDemo

Interactive authentication component with message signing.

Authentication

const client = new OneAuthClient({
  providerUrl: 'https://passkey.1auth.box',
});
 
const result = await client.authWithModal();
if (result.success) {
  console.log('Connected as:', result.user?.username);
}

Message Signing

const result = await client.signMessage({
  username: 'alice',
  message: `Sign in to MyApp\nTimestamp: ${Date.now()}`,
  description: 'Verify your identity',
});
 
if (result.success) {
  console.log('Signature:', result.signature);
}

SignMessageOptions

Property	Type	Required	Description
`username`	`string`	Yes	Username of the signer
`message`	`string`	Yes	Human-readable message to sign
`description`	`string`	No	Description shown in dialog
`metadata`	`Record<string, unknown>`	No	Additional data to display
`challenge`	`string`	No	Custom challenge (defaults to message hash)
`theme`	`ThemeConfig`	No	Theme configuration for the dialog

PayButton

One-click payment button with built-in authentication.

Usage

import { PayButton } from '@rhinestone/1auth/react';
 
<PayButton
  client={client}
  intent={{
    targetChain: 8453,
    calls: [{ to: '0x...', value: parseEther('0.01') }],
  }}
  onSuccess={(result) => console.log('Paid:', result.transactionHash)}
  onError={(error) => console.error(error)}
/>

Props

Prop	Type	Required	Description
`client`	`OneAuthClient`	Yes	SDK client instance
`intent`	`SendIntentOptions`	Yes	Transaction parameters (calls, targetChain, tokenRequests)
`onSuccess`	`(result: SendIntentResult) => void`	No	Called on successful transaction
`onError`	`(error: Error) => void`	No	Called on error
`closeOn`	`CloseOnStatus`	No	When to close dialog: "claimed", "preconfirmed", "filled", or "completed". Default: "preconfirmed"
`children`	`ReactNode`	No	Button text (default: "Pay with 1auth")
`className`	`string`	No	Custom CSS class
`style`	`React.CSSProperties`	No	Custom inline styles (merged with defaults)
`disabled`	`boolean`	No	Disabled state
`hideIcon`	`boolean`	No	Hide the fingerprint icon

See the full PayButton reference for more details.

BatchQueueProvider

Context provider for managing batched transaction queues with localStorage persistence.

Usage

import { BatchQueueProvider, BatchQueueWidget } from '@rhinestone/1auth/react';
 
function App() {
  return (
    <BatchQueueProvider client={client} username="user@example.com">
      <YourApp />
      <BatchQueueWidget onSignAll={handleSignAll} />
    </BatchQueueProvider>
  );
}

Props

Prop	Type	Required	Description
`client`	`OneAuthClient`	Yes	SDK client instance
`username`	`string`	No	Username for localStorage key
`children`	`ReactNode`	Yes	Child components

Chain Validation

All calls in a batch must target the same chain:

const { addToBatch } = useBatchQueue();
 
addToBatch({ to: '0x...', label: 'Action 1' }, 8453); // Base
 
// This will fail - different chain
const result = addToBatch({ to: '0x...', label: 'Action 2' }, 1);
if (!result.success) {
  console.log(result.error); // "Batch is set to Base..."
}

BatchQueueWidget

Floating widget UI showing queued transactions.

Usage

import { BatchQueueWidget, useBatchQueue } from '@rhinestone/1auth/react';
 
function SignAllHandler() {
  const { signAll } = useBatchQueue();
 
  const handleSignAll = async () => {
    const result = await signAll('user@example.com');
    if (result.success) {
      console.log('All signed!', result.transactionHash);
    }
  };
 
  return <BatchQueueWidget onSignAll={handleSignAll} />;
}

Props

Prop	Type	Required	Description
`onSignAll`	`() => void`	Yes	Callback when "Sign All" is clicked

Features

Collapsible header with call counter badge
Chain indicator for current batch
Remove individual calls on hover
Clear all button
Bounce animation on new calls
Auto-hide when queue is empty

useBatchQueue

Hook to access batch queue context.

Usage

import { useBatchQueue } from '@rhinestone/1auth/react';
 
function AddToCartButton({ item }) {
  const { addToBatch, queue } = useBatchQueue();
 
  const handleClick = () => {
    const result = addToBatch(
      {
        to: item.contractAddress,
        data: item.calldata,
        label: `Buy ${item.name}`,
      },
      8453
    );
    if (!result.success) alert(result.error);
  };
 
  return <button onClick={handleClick}>Add ({queue.length})</button>;
}

Return Value

Property	Type	Description
`queue`	`BatchedCall[]`	Array of queued calls
`batchChainId`	`number \| null`	Chain ID of the batch (set by first call)
`addToBatch`	`(call: IntentCall, chainId: number) => { success: boolean; error?: string }`	Add a call to queue
`removeFromBatch`	`(id: string) => void`	Remove a specific call
`clearBatch`	`() => void`	Clear all calls
`signAll`	`(username: string) => Promise<SendIntentResult>`	Sign and submit all calls
`isSigning`	`boolean`	Whether signing is in progress
`isExpanded`	`boolean`	Whether the widget is expanded
`setExpanded`	`(expanded: boolean) => void`	Set widget expanded state

BatchedCall Type

interface BatchedCall {
  id: string;
  call: IntentCall;
  targetChain: number;
  addedAt: number;
}