​
Introduction

In this quickstart you will learn how to create and manage wallets directly in your frontend application using React. Here is a snippet of the demo that you can build in 5 minutes:

Demo of the Crossmint Wallets SDK

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.

​
From the Developer Console

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.

​
Integration Steps

This guide will start from scratch with an empty Next.js application using Shadcn UI for beautiful, accessible components. You'll install the required @crossmint/client-sdk-react-ui dependency and add the wallet components. To get started:

For more detailed information about Shadcn UI installation with Next.js, you can refer to their official installation guide.

​
Set up the Project

1

Create a new Next.js application

npx shadcn@latest init -d

When you see this message, select Next.js and press Enter to proceed.

Would you like to start a new project?
> Next.js
  Next.js (Monorepo)
2

Name your app `my-wallet-app` and press `Enter` to proceed

What is your project named? my-wallet-app
3

Change into the directory created in previous steps

cd my-wallet-app
4

Add needed components from Shadcn UI

npx shadcn@latest add card button
5

Install @crossmint/client-sdk-react-ui

npm i @crossmint/client-sdk-react-ui
6

Open the project in your preferred code editor

​
React SDK Integration

1

Configure Environment

Create .env.local in your project root:

NEXT_PUBLIC_CROSSMINT_CLIENT_KEY="_YOUR_CLIENT_API_KEY_"    # From API Keys page
2

Setup React Providers

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

providers/Providers.tsx
"use client";

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

const clientApiKey = process.env.NEXT_PUBLIC_CROSSMINT_CLIENT_KEY as string;

export default function Providers({ children }: { children: React.ReactNode }) {
    return (
        <CrossmintProvider apiKey={clientApiKey}>
            <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";
// ... other imports

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

Add Authentication Component

Create a new file app/components/AuthButton.tsx with the following content:

AuthButton.tsx
"use client";

import { Button } from "@/components/ui/button";
import { useAuth } from "@crossmint/client-sdk-react-ui";

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

    return !jwt ? (
        <Button onClick={login}>Login</Button>
    ) : (
        <Button onClick={logout}>Logout</Button>
    );
}
4

Add Wallet Component

Create a new file app/components/WalletComponent.tsx with the following content:

WalletComponent.tsx
"use client";

import { useWallet } from "@crossmint/client-sdk-react-ui";
import { Card } from "@/components/ui/card";

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

    if (status === "loading-error") {
        return <div className="text-rose-500">Error: {error?.message}</div>;
    }

    if (status === "in-progress") {
        return <div className="text-amber-500">Loading...</div>;
    }

    if (status === "loaded" && wallet) {
        return <div className="text-emerald-600">Connected: {wallet.address}</div>;
    }

    return <div className="text-zinc-400">Wallet not connected</div>;
}

export default function WalletComponent() {
    return (
        <Card className="p-4">
            <Status />
        </Card>
    );
}
5

Create Main Page

Create or update your app/page.tsx with the following content:

page.tsx
import AuthButton from "@/components/AuthButton";
import WalletComponent from "@/components/WalletComponent";

export default function Home() {
    return (
        <div className="min-h-screen flex items-center justify-center">
            <div className="flex flex-col items-center gap-4 p-8">
                <h1 className="text-xl font-bold mb-4">Your Wallet App</h1>
                <AuthButton />
                <WalletComponent />
            </div>
        </div>
    );
}
6

Launch Development Server

  1. Start your development server:
npm run dev
  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 WalletsAgent Wallets