basedauth

A React/Next.js authentication and wallet connection kit for Ethereum (wagmi) and Solana, with hooks and context providers for seamless integration.

Features

• Multi-chain wallet connection (Ethereum, Solana)
• Modal and context providers for easy integration
• Hooks for account, balance, contract interaction, and more
• Built-in support for wagmi, Solana wallet adapter, and NextAuth

Installation

yarn add based-auth

Note: You must also install the required peer dependencies in your app:

• react, react-dom
• @tanstack/react-query
• next-auth
• sonner
• wagmi, @wagmi/core, @wagmi/connectors
• @solana/wallet-adapter-react, @solana/wallet-adapter-wallets, @solana/web3.js
• based-shared, based-assets (from your monorepo or npm if published)

Usage

1. Wrap your app with the provider

// _app.tsx or main entry
import { SimpleKitProvider } from "based-auth";
import { supportedChains } from "based-shared/chains";

export default function App({ Component, pageProps }) {
  return (
    <SimpleKitProvider
      chains={supportedChains}
      host={process.env.NEXT_PUBLIC_APP_URL}
      name="Your App Name"
      description="Your app description"
      icon="/images/your-app-icon.png" // must be a public URL
      projectId={process.env.NEXT_PUBLIC_PROJECT_ID}
    >
      <Component {...pageProps} />
    </SimpleKitProvider>
  );
}

Required props for SimpleKitProvider:

• chains: Array of supported chains (see based-shared/chains)
• host: Your app's public URL (e.g. https://your-app.com)
• name: App name (for wallet metadata)
• description: App description
• icon: App icon URL (for wallet metadata)
• projectId: WalletConnect project ID

2. Use hooks in your components

import {
  useAccount,
  useAccountBalance,
  useTokenBalance,
  useSimpleKit,
  useDisconnectAccount,
} from "based-auth";

function WalletInfo() {
  const { address, network } = useAccount();
  const { balance, formatted } = useAccountBalance();
  const { disconnectAccount } = useDisconnectAccount();
  const { openModal } = useSimpleKit();

  return (
    <div>
      <div>Address: {address}</div>
      <div>Network: {network}</div>
      <div>Balance: {formatted}</div>
      <button onClick={openModal}>Connect Wallet</button>
      <button onClick={() => disconnectAccount()}>Disconnect</button>
    </div>
  );
}

3. Modal and UI

The modal for wallet connection is automatically provided by the SimpleKitProvider. Use the useSimpleKit hook to open/close the modal.

4. Contract interaction

import { useWriteContractAsync } from "based-auth";

function MintButton() {
  const { writeContractAsync } = useWriteContractAsync();

  const handleMint = async () => {
    await writeContractAsync({
      address: "0xYourContract",
      abi: [...],
      functionName: "mint",
      args: [/* ... */],
      value: 0n, // always use bigint for value
    });
  };

  return <button onClick={handleMint}>Mint</button>;
}

Note: useReadContract and useWriteContract are exported but currently not implemented. Use useWriteContractAsync for contract writes.

Environment Variables

Set the following in your .env:

NEXT_PUBLIC_PROJECT_ID=your_walletconnect_project_id
NEXT_PUBLIC_APP_URL=https://your-app-url.com
AUTH_TRUST_HOST=https://your-app-url.com
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
AUTH_TWITTER_ID=...
AUTH_TWITTER_SECRET=...
AUTH_SECRET=...

API

Providers

• SimpleKitProvider – Main context provider, wraps your app. All props are required.

Hooks

• useSimpleKit – Modal controls and context
• useAccount – Current user/account info
• useChainInfo – Current chain info (logos, symbols, explorers)
• useAccountBalance – Native token balance
• useTokenBalance – ERC20/SPL token balance
• useTokenBalanceAsync – Async token balance fetch
• useDisconnectAccount – Disconnect wallet
• useWriteContractAsync – Write to contract (EVM/Solana/social)
• useReadContract – (stub, not implemented)
• useWriteContract – (stub, not implemented)

Advanced/Utility Hooks (not exported by default)

• useConnectAccount, useSwitchChain, useSignAccount, useSwitchAccount, useBalanceAsync, useTransferAsync (see source for details)

Example

import { useSimpleKit } from "based-auth";

function ConnectButton() {
  const { isOpen, openModal, closeModal } = useSimpleKit();
  return (
    <button onClick={openModal}>
      {isOpen ? "Modal Open" : "Connect Wallet"}
    </button>
  );
}

For more advanced usage, see the source code and hooks in src/hooks.tsx.