README.md

Smart Wallets Demo (Next.js Starter Kit)

This application demonstrates the use of Abstract Accounts with a built-in passkey authenticator. Simply sign in with Google or Crossmint's built-in SSO login, authorize your passkey, and create your smart wallet in seconds.
Explore the quickstart docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
   • Adding the Provider
   • Hooks
4. Process for Updating and Deploying the Next.js Demo
   • Guide

About The Project

(back to top)

Built With

• 
• 
• 

(back to top)

Getting Started

Follow these steps to set up your project locally and get it running. This guide provides clear instructions to help you get started quickly.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v20.12 or later)
• npm (comes with Node.js)
• pnpm (npm install -g pnpm)

Installation

1. Obtain a free API Key from the Crossmint Console. Refer to Get an API Key from the Quickstart guide for detailed instructions.

2. Clone the repo

   git clone https://github.com/Crossmint/crossmint-sdk.git

3. Install PNPM packages

   pnpm i

4. In the directory containing this README.md file, rename the .env.example file to .env and add your API key to the file.

   NEXT_PUBLIC_CROSSMINT_AUTH_SMART_WALLET_API_KEY="ENTER YOUR CROSSMINT API KEY";

5. Start the development server

   pnpm dev

6. Once you start the Next.js development server, the application can be found at http://localhost:3000.

(back to top)

Usage

Spin up your own instance of the Smart Wallets Demo in under 5 minutes! Below, you'll see how to add the provider and use the hook to integrate authentication into your application.

Adding the Provider

First, wrap your application with the CrossmintProvider and CrossmintAuthProvider to provide authentication context to your components. This is typically done in the root of your app.

"use client";

// Important: this ensures the client SDK only runs on the client

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

export default function App({ Component, pageProps }) {
    return (
        <CrossmintProvider apiKey={process.env.NEXT_PUBLIC_CROSSMINT_AUTH_SMART_WALLET_API_KEY ?? ""}>
            <CrossmintAuthProvider
                embeddedWallets={{
                    createOnLogin: "all-users",
                    defaultChain: "polygon-amoy",
                    type: "evm-smart-wallet",
                }}
            >
                <Component {...pageProps} />
            </CrossmintAuthProvider>
        </CrossmintProvider>
    );
}

Hooks

Next, add the useAuth hooks in your component to access authentication functionality.

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

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

    return <div>{jwt != null ? <button onClick={logout}>Log out</button> : <button onClick={login}>Log in</button>}</div>;
}

For additional information, please refer to the Quickstart Documentation.

(back to top)

Process for Updating and Deploying the Next.js Demo

When we release a new version of @crossmint/client-sdk-react-ui, we need to update the package in the demo app and deploy it. Here's the process for doing that:

Instructions

1. Ensure your local main branch is up-to-date
2. Checkout a branch from main ie. git checkout -b smart-wallet-demo-sdk-v1.2.3
3. Update the version of @crossmint/client-sdk-react-ui to the latest on npm. (Package link: npmjs.com/package/@crossmint/client-sdk-react-ui)
4. Commit the changes and push branch ie. smart-wallet-demo-sdk-v1.2.3
5. Open a PR from smart-wallet-demo-sdk-v1.2.3 against smart-wallet-auth-demo-prod
6. After merging branch into smart-wallet-auth-demo-prod, Vercel will then deploy the changes to production
7. Demo will be live on https://www.smarterwallet.dev/!

(back to top)