@web5nexus/authmodal-react

React UI and hooks for Web5 Auth Modal — provider, connect button, modal, and session hooks on top of @web5nexus/authmodal-core.

Install

npm install @web5nexus/authmodal-react@^0.3.0 @web5nexus/authmodal-core@^0.3.0

Also install the adapters you use (@web5nexus/authmodal-web3auth, @web5nexus/authmodal-magic).

What it does

• AuthModalProvider — wires adapters, chains, transport, Bitcoin, and theme
• ConnectButton / ConnectModal — modern social connect UI (providers → methods)
• Hooks for account, chain, Bitcoin addresses, connect, and disconnect
• Footer: Powered by Web5 Nexus (toggle with theme.showPoweredBy)

Layout

| theme.layout | Behavior | |----------------|----------| | wide | Providers left, login methods right | | compact | Stacked single column | | auto (default) | Wide on desktop, compact below ~560px |

Pick a provider (Web3Auth / Magic), then choose a social method (Google, Apple, Email, …) with real logos.

Theme customization

<AuthModalProvider
  adapters={adapters}
  chains={[1]}
  transport={{ mode: 'chainrouter', apiKey: crKey, chainId: 1 }}
  theme={{
    mode: 'dark',
    layout: 'wide',
    size: 'md', // sm | md | lg
    accentColor: '#3DDC97',
    accentTextColor: '#0E1218',
    surfaceColor: '#151B24',
    backgroundColor: '#0E1218',
    textColor: '#F2F7F4',
    mutedColor: '#8B9A94',
    borderColor: '#273039',
    borderRadius: '20px',
    fontFamily: 'Segoe UI, system-ui, sans-serif',
    logo: 'https://your.app/logo.png',
    appName: 'My App',
    title: 'Connect',
    showPoweredBy: true,
    poweredByUrl: 'https://web5.nexus',
  }}
>
  <ConnectButton />
</AuthModalProvider>

All color/size fields map to CSS variables on .w5am-root so you can override further in your own CSS.

Usage

import {
  AuthModalProvider,
  ConnectButton,
  useAccount,
  useBitcoin,
} from '@web5nexus/authmodal-react'
import { web3auth } from '@web5nexus/authmodal-web3auth'

export function App() {
  return (
    <AuthModalProvider
      adapters={[web3auth({ clientId: import.meta.env.VITE_W3A_CLIENT_ID })]}
      chains={[1]}
      transport={{ mode: 'chainrouter', apiKey: import.meta.env.VITE_CR_KEY, chainId: 1 }}
      bitcoin={{ enabled: true, network: 'mainnet', prefer: 'taproot' }}
      theme={{ mode: 'dark', layout: 'wide', appName: 'Demo', accentColor: '#3DDC97' }}
    >
      <ConnectButton />
      <WalletSummary />
    </AuthModalProvider>
  )
}

function WalletSummary() {
  const { address, isConnected } = useAccount()
  const { p2tr, p2wpkh } = useBitcoin()
  if (!isConnected) return null
  return (
    <div>
      <p>EVM: {address}</p>
      <p>Taproot: {p2tr}</p>
      <p>SegWit: {p2wpkh}</p>
    </div>
  )
}

Hooks

| Hook | Returns | |------|---------| | useAccount | address, isConnected, session | | useChain | chainId, switch helpers | | useBitcoin | p2tr, p2wpkh, full bitcoin object | | useConnect / useDisconnect | connect / disconnect actions |

Styles ship with the package (dist/styles.css) and are imported by AuthModalProvider.

License

MIT — Web5 Nexus Team