Client Wallets

Create user wallets from your frontend in under 5 minutes

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 production.

   With Solana Smart Wallets you can specify who pays for transactions fees and with what token those fees are paid. Go to the Crossmint Console and choose one of these two fee payment models:

   Developers: Pay fees using Crossmint credits in the project's balance

   Users: Pay fees using user's own smart wallet token balance

   

   

   

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

   npm

   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

   npm

   npx shadcn@latest add card button
   

5. Install @crossmint/client-sdk-react-ui

   npm

   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

   npm run dev
   

   2. Visit http://localhost:3000 in your browser
   3. Click the “Login” button to start the authentication flow
   4. Follow the prompts to authenticate using Passkeys or email
   5. 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

What does this SDK do behind the scenes?

1. Handles user authentication using Passkeys or email
2. Creates a wallet automatically upon first login
3. Manages wallet state and provides React hooks for easy integration
4. Handles transaction signing and user approval flows

Authentication methods

The SDK supports multiple authentication methods:

• Passkeys (recommended)
• Email magic links
• Social login (google, twitter, farcaster)
• Wallets (solana, ethereum)

And you can also bring your own auth from services like firebase, stytch, auth0, privy, dynamic, and more.

What is a signer?

A signer is an entity that controls and manages the wallet by authenticating actions, approving transactions, and managing assets. Crossmint supports multiple options for signers:

• Passkeys: Passwordless authentication allows users to securely approve and sign transactions directly
• Auth providers (Privy, Dynamic): Enable authentication methods that verify users and allow them to control wallet actions
• Blockchain providers (Viem account, EIP1193 compatible): Interact with Ethereum networks to sign transactions and manage assets

These options provide flexible ways to manage and control access to Wallets securely.

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

Other Links

API Reference

Deep dive into API reference docs.

Talk to an expert

Contact our sales team for support.