Skip to Content
Getting Started
5 minutes

Getting started

Add Rabit to a new or existing React app — from zero to a working, non-custodial wallet.

ℹ

Rabit works in any React (web) app — Next.js, Vite, Remix, CRA. Examples below use Next.js; the API is identical everywhere. (React Native isn’t supported yet — see below.)

Scaffold or install

The fastest start is the scaffolder — it creates a Next.js app pre-wired with Rabit:

npx rabitwallet init my-dapp
cd my-dapp && npm install && npm run dev

Adding to an existing app instead? Just install the package:

$npm install rabitwallet

Manual setup

Get project credentials

Create a project in your Rabit dashboard (or with apps/api/scripts/mint-keys.ts) and copy the projectId and a publishable API key. Keys are Stripe-style: pk_test_… (sandbox) and pk_live_… (production).

.env.local
NEXT_PUBLIC_RABIT_PROJECT_ID=your_project_id
NEXT_PUBLIC_RABIT_API_KEY=pk_test_xxxxxxxx
NEXT_PUBLIC_RABIT_API_BASE_URL=https://your-api.example.com
★

No backend yet?

For local dev the API accepts a bypass key: apiKey: 'dev-api-key', projectId: 'dev-project'. The API auto-creates that project on first call.

Wrap your app

app/providers.tsx
'use client'
import {
  RabitProvider,
  PRESET_EVM_CHAINS,
  ETHEREUM_SEPOLIA,
  PRESET_SOLANA_CHAINS,
} from 'rabitwallet'
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <RabitProvider
      config={{
        projectId: process.env.NEXT_PUBLIC_RABIT_PROJECT_ID!,
        apiKey: process.env.NEXT_PUBLIC_RABIT_API_KEY!,
        apiBaseUrl: process.env.NEXT_PUBLIC_RABIT_API_BASE_URL!,
        app: { name: 'My dApp' },
        evmChains: PRESET_EVM_CHAINS,
        defaultEvmChainId: ETHEREUM_SEPOLIA.id,
        solanaChains: PRESET_SOLANA_CHAINS,
        defaultSolanaCluster: 'devnet',
        authMethods: ['email', 'google'],
      }}
    >
      {children}
    </RabitProvider>
  )
}

Then use it in your root layout:

app/layout.tsx
import { Providers } from './providers'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Drop in the wallet button

app/page.tsx
'use client'
import { WalletButton, useAuth, useWallet } from 'rabitwallet'
 
export default function Home() {
  const { isAuthenticated, user } = useAuth()
  const { evmAddress, solanaAddress } = useWallet()
 
  return (
    <main>
      <WalletButton />
      {isAuthenticated && (
        <div>
          <p>gm, {user?.displayName ?? user?.email}</p>
          <p>EVM: {evmAddress}</p>
          <p>Solana: {solanaAddress}</p>
        </div>
      )}
    </main>
  )
}

Run it

npm run dev

Open http://localhost:3000 , click Sign in, enter your email, and paste the OTP. Rabit reconstructs the split key and creates the wallet — no seed phrase.

Buffer polyfill

Solana’s libraries expect a Buffer global. In Vite, import a polyfill first; in Next.js, alias buffer in next.config. The rabitwallet init templates set this up for you.

next.config.mjs
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = { ...config.resolve.fallback, buffer: 'buffer' }
    return config
  },
}
export default nextConfig

React Native

Not yet. Every Rabit UI component (WalletButton, AuthModal, …) is built for the web DOM, so they won’t render in React Native. The lower-level crypto (split-key, chains) is largely platform-agnostic, but there’s no rabitwallet/native package with RN-ready UI today. If you need RN, open an issue .

Next steps

IntroductionHow it works