cilantro-react Setup

Set up CilantroProvider and optional storage in your React or Next.js app

cilantro-react Setup

The root CilantroProvider initializes configuration, storage, authentication, and wallet state. Once the user is logged in (email, Google, Apple, or Discord), the provider sets the JWT and API key in the SDK — you do not need to call setAuth before each request.

Installation

npm install cilantro-react cilantro-sdk

Requirements: React 18+, cilantro-sdk (peer dependency), Tailwind CSS for component styling.

Polyfills (browser)

Import at the very top of your entry file (before any other imports):

import 'cilantro-sdk/polyfills';

CilantroProvider

import { CilantroProvider, createIndexedDBAdapter } from 'cilantro-react';

const storage = createIndexedDBAdapter();

<CilantroProvider
  apiKey="your-platform-api-key"
  baseURL="https://api.cilantro.gg"
  storageAdapter={storage}
  socialAuth={{
    googleClientId: "your-google-client-id",  // optional; built-in Google uses a default
    discordRedirectUri: "https://myapp.com/auth/callback",  // for built-in "Sign in with Discord" button
  }}
  syncJwtToCookie
  jwtCookieName="cilantro_jwt"
>
  <App />
</CilantroProvider>

Props

Prop	Type	Required	Default	Description
apiKey	string	No*	—	Platform API key (required for social login and API calls)
baseURL	string	No	`https://api.cilantro.gg`	API base URL
storageAdapter	DeviceKeyStorage	No	IndexedDB	Storage adapter for device keys (email/phone signers)
socialAuth	SocialAuthConfig	No	—	`googleClientId`, `discordRedirectUri` for built-in social buttons
syncJwtToCookie	boolean	No	false	When true, sync JWT to a cookie for Next.js/middleware
jwtCookieName	string	No	`cilantro_jwt`	Cookie name when syncJwtToCookie is true
children	ReactNode	Yes	—	App content

*Either apiKey or JWT (from login) is required for authenticated requests. Social login requires apiKey.

Storage adapters

Adapter	Use case
`createIndexedDBAdapter()`	Production – persistent, large capacity
`createLocalStorageAdapter()`	Development – simple, limited capacity
`createMemoryAdapter()`	Testing – not persisted

Import from cilantro-react or cilantro-sdk/helpers.

Next.js / middleware

To protect routes or read the JWT in middleware:

Enable JWT cookie sync: <CilantroProvider syncJwtToCookie>
In middleware, read the cookie (default: cilantro_jwt) to check auth and optionally redirect unauthenticated users.

Quick start example

import 'cilantro-sdk/polyfills';
import { CilantroProvider, LoginForm, AuthGuard, useAuth, useWallet } from 'cilantro-react';

function App() {
  return (
    <CilantroProvider apiKey={import.meta.env.VITE_API_KEY} baseURL="https://api.cilantro.gg">
      <AuthGuard>
        <Dashboard />
      </AuthGuard>
    </CilantroProvider>
  );
}

function Dashboard() {
  const { user, logout } = useAuth();
  const { wallet, wallets } = useWallet();

  return (
    <div>
      <p>Welcome, {user?.username}</p>
      <p>Wallet: {wallet?.walletName}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Next steps

Auth (useAuth)

Wallets (useWallet)

List wallets, createWallet, selectWallet

Authentication

SDK auth (configure, loginAndSetAuth) when not using React

Configuration

configure, storage, and polyfills