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}>
      <Component {...pageProps} />
    </SimpleKitProvider>
  );
}

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. Advanced: 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,
    });
  };

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

Environment Variables

Set the following in your .env:

NEXT_PUBLIC_PROJECT_ID=your_walletconnect_project_id
NEXTAUTH_URL=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.

Hooks

• useSimpleKit – Modal controls and context
• useAccount – Current user/account info
• useAccountBalance – Native token balance
• useTokenBalance – ERC20/SPL token balance
• useDisconnectAccount – Disconnect wallet
• useWriteContractAsync – Write to contract (social or EVM/Solana)
• ...and more (see src/hooks.tsx)

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.