Get Started — Social Auth

Need EVM wallets + multi-provider social login?
  └─► Auth Modal (@web5nexus/authmodal-react)
       Optional: derive BTC addresses after Web3Auth connect
       Custom buttons (no modal)? → Headless / useConnect / createAuthModal

Building a Bitcoin-first product (Taproot / PSBT / Ordinals)?
  └─► Bitcoin Wallet (@web5nexus/authmodal-bitcoin)
       Solo modal — Web3Auth key export → BTC addresses
       Or bitcoinAuth() headless client

npm i @web5nexus/authmodal-react @web5nexus/authmodal-core \
  @web5nexus/authmodal-web3auth @web5nexus/authmodal-magic

import '@web5nexus/authmodal-react/styles.css'
import { AuthModalProvider, ConnectButton } from '@web5nexus/authmodal-react'
import { web3auth } from '@web5nexus/authmodal-web3auth'
import { magic } from '@web5nexus/authmodal-magic'
 
const adapters = [
  web3auth({ clientId: process.env.NEXT_PUBLIC_W3A_CLIENT_ID! }),
  magic({ apiKey: process.env.NEXT_PUBLIC_MAGIC_API_KEY! }),
]
 
export default function App() {
  return (
    <AuthModalProvider
      adapters={adapters}
      chains={[1, 8453]}
      transport={{
        mode: 'chainrouter',
        apiKey: process.env.NEXT_PUBLIC_CHAINROUTER_API_KEY!,
        chainId: 1,
      }}
      preferredAdapters={['web3auth', 'magic']}
    >
      <ConnectButton />
    </AuthModalProvider>
  )
}

npm i @web5nexus/authmodal-bitcoin @web5nexus/authmodal-core

import '@web5nexus/authmodal-bitcoin/styles.css'
import {
  BitcoinWalletProvider,
  BitcoinConnectButton,
} from '@web5nexus/authmodal-bitcoin/react'
 
export default function App() {
  return (
    <BitcoinWalletProvider
      clientId={process.env.NEXT_PUBLIC_W3A_CLIENT_ID!}
      bitcoinNetwork="testnet"
      theme={{ mode: 'dark', appName: 'My App', subtitle: 'Bitcoin Social Login' }}
    >
      <BitcoinConnectButton />
    </BitcoinWalletProvider>
  )
}