In this quickstart you will learn how to create and manage wallets directly in your frontend application using React.

Mobile SDKs are available under private access. Contact us if you need access

This quickstart is written for EVM chains. Docs for Solana and other chains are coming soon. Contact us if you’d like to onboard today, while we get them ready.

​
Integration Steps

1

Create a developer account

To get started, create a developer account in the Crossmint Staging Console. Open that link, sign in, and accept the dialog to continue.

Crossmint offers two consoles: staging, for development and testing, and www, for production.

Then, navigate to project Settings > General, and set the wallet type to “Smart Wallets”.

2

Get an API Key

For client-side applications, you’ll need a public API key that’s safe to expose in your frontend code:

Navigate to the "Integrate" section on the left navigation bar, and ensure you're on the "API Keys" tab.

Within the Client-side keys section, click the "Create new key" button in the top right.

On the authorized origins section, enter http://localhost:3000 and click "Add origin".

Next, check the scopes labeled wallets.create, wallets.read, wallets:balance.read, wallets:transactions.create, wallets:transactions.read, users.read, users.create.

Check the "JWT Auth" box.

Finally, create your key and save it for subsequent steps.

3

Bootstrap Your Client Application

npx create-next-app@latest

If you see this message, type y and press Enter to proceed:

Need to install the following packages:
create-next-app@latest
Ok to proceed? (y)
4

Name your app `my-wallet-app` and accept the default options

What is your project named? my-wallet-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No
5

Change into the directory created in previous steps

cd my-wallet-app
6

Install @crossmint/client-sdk-react-ui

7

Open the project in your preferred code editor

Create .env.local in your project root:

NEXT_PUBLIC_CROSSMINT_CLIENT_KEY="_YOUR_CLIENT_API_KEY_"    # From API Keys page
8

Set Up Authentication Providers

Create a new file app/providers/Providers.tsx with the following content:

app/providers/Providers.tsx
"use client";

import { CrossmintProvider, CrossmintAuthProvider } from "@crossmint/client-sdk-react-ui";

export default function Providers({ children }: { children: React.ReactNode }) {
    return (
        <CrossmintProvider apiKey={process.env.NEXT_PUBLIC_CROSSMINT_CLIENT_KEY ?? ""}>
            <CrossmintAuthProvider
                embeddedWallets={{
                    type: "evm-smart-wallet",
                    defaultChain: "polygon-amoy",
                    createOnLogin: "all-users",
                }}
            >
                {children}
            </CrossmintAuthProvider>
        </CrossmintProvider>
    );
}

Note: Change defaultChain to the chain you’d like to start using your wallets on.

Then update your app/layout.tsx to use these providers:

app/layout.tsx
import Providers from "./providers/Providers";

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <body>
                <Providers>{children}</Providers>
            </body>
        </html>
    );
}
9

Build Your Wallet UI

Update app/page.tsx with this wallet interface:

"use client";

import { useWallet, useAuth } from "@crossmint/client-sdk-react-ui";

function AuthButton() {
    const { login, logout, jwt } = useAuth();

    return (
        <div>
            {jwt == null ? (
                <button type="button" onClick={login} className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
                    Login
                </button>
            ) : (
                <button
                    type="button"
                    onClick={logout}
                    className="bg-black text-white font-bold py-2 px-4 rounded border-2 border-blue-500"
                >
                    Logout
                </button>
            )}
        </div>
    );
}

function WalletComponent() {
    const { wallet, status, error } = useWallet();

    return (
        <div>
            {status === "loading-error" && error && (
                <div className="border-2 border-red-500 text-red-500 font-bold py-4 px-8 rounded-lg">
                    Error: {error.message}
                </div>
            )}
            {status === "in-progress" && (
                <div className="border-2 border-yellow-500 text-yellow-500 font-bold py-4 px-8 rounded-lg">
                    Loading...
                </div>
            )}
            {status === "loaded" && wallet && (
                <div className="border-2 border-green-500 text-green-500 font-bold py-4 px-8 rounded-lg">
                    Wallet: {wallet.address}
                </div>
            )}
            {status === "not-loaded" && (
                <div className="border-2 border-gray-500 text-gray-500 font-bold py-4 px-8 rounded-lg">
                    Wallet not loaded
                </div>
            )}
        </div>
    );
}

export default function Home() {
    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
            <div className="absolute top-0 right-0 p-4">
                <AuthButton />
            </div>
            <div className="flex items-center justify-center w-full h-full">
                <WalletComponent />
            </div>
        </main>
    );
}
10

Run Your Application

  1. Start your development server:
  1. Visit http://localhost:3000 in your browser
  2. Click the “Login” button to start the authentication flow
  3. Follow the prompts to authenticate using Passkeys or email
  4. Once logged in, your wallet will be automatically created and displayed

If you’re using a port other than 3000, make sure to update your API key configuration in the Crossmint console to allow that port.

​
More info

​
Launching in Production

For production, the steps are almost identical, but some changes are required:

  1. Create a developer account on the production console
  2. Add credits to your account from Billing & Usage
  3. Create a production key on the API Keys page with the same API scopes
  4. Replace your test API key in .env.local with the production key

​
Learn More

Transfer Native Tokens

Send native tokens between wallets.

Transfer Tokens

Send ERC20 and other tokens.

Fetch Balance

Check wallet balances.

Fetch NFTs

Get NFTs owned by a wallet.

​
Dive into Advanced Topics

Delegated Keys

Spam Filters

Wallet UI Components

Error Handling

API Reference

Deep dive into API reference docs.

Talk to an expert

Contact our sales team for support.

Was this page helpful?

Server WalletsTransfer Native Tokens