Smart Wallets Quickstart (Next.js)

Use this template to get started with embedded smart wallets using Alchemy Account Kit.

✨ Features

• Email, passkey & social login using pre‑built UI components
• Flexible, secure, and cheap smart accounts
• Gasless transactions powered by ERC-4337 Account Abstraction
• One‑click NFT mint (no ETH required)
• Server‑side rendering ready – session persisted with cookies
• TailwindCSS + shadcn/ui components, React Query, TypeScript

📍 Network & Demo Contract

This quickstart is configured to run on Arbitrum Sepolia testnet, by default. A free demo NFT contract has been deployed specifically for this quickstart, allowing you to mint NFTs without any setup or deployment steps. The contract is pre-configured and ready to use out of the box.

🚀 Quick start

Scaffold a new app

npm create next-app smart-wallets-quickstart -- --example https://github.com/alchemyplatform/smart-wallets-quickstart
cd smart-wallets-quickstart

🔧 Configure

Get your pre-configured API key and policy ID from the Smart Wallets dashboard by viewing one of your configurations. You will get a default app, configuration, and sponsorship policy created for you to quickly start testing.

Once you have your keys, add them to your .env.local file.

cp .env.example .env.local      # create if missing
# add NEXT_PUBLIC_ALCHEMY_API_KEY=...
# add NEXT_PUBLIC_ALCHEMY_POLICY_ID=...

Variable	Purpose
NEXT_PUBLIC_ALCHEMY_API_KEY	API key for your Alchemy app
NEXT_PUBLIC_ALCHEMY_POLICY_ID	Gas Manager policy ID for sponsorship

If instead you want to set up your own configurations from scratch you should:

1. Create a new Alchemy app
2. Set up a new Smart Wallet configruation for your app to specify login methods
3. Create a gas sponsorship policy for your app

Note: for production, you should protect your API key and policy ID behind a server rather than exposing client side.

Run your app!

npm run dev

Open http://localhost:3000, first Login, then try minting a new NFT.

Congrats! You've created a new smart wallet and sent your first sponsored transaction!

See what else you can do with smart wallets.

🗂 Project layout

app/           # Next.js pages & components
components/ui/ # shadcn/ui primitives
lib/           # constants & helpers
config.ts      # Account Kit + Gas Sponsorship setup
tailwind.config.ts

🏗️ How it works

1. config.ts initializes Account Kit with your API key, chain, and Gas Sponsorship policy.
2. Providers wraps the app with AlchemyAccountProvider & React Query.
3. LoginCard opens the authentication modal (useAuthModal).
4. After login, useSmartAccountClient exposes the smart wallet.
5. NftMintCard uses useSendUserOperation to call mintTo() on the demo ERC‑721, with gas paid by the Paymaster.

📚 Docs & resources

• React Quickstart → https://www.alchemy.com/docs/wallets/react/quickstart
• Gas Manager quickstart → https://www.alchemy.com/docs/wallets/infra/quickstart

🖥 Scripts

npm run dev     # start development server
npm run build   # production build
npm run start   # run production build
npm run lint    # lint code

🛂 License

MIT