Core Quickstart

If you’re not using React, but still want a number of the abstractions that make the React package so easy to use, you can leverage the @account-kit/core package directly.

In this guide, we’ll walk you through how to use this package to send a user operation, while using the reactive utilities exported by this package.

Install packages

Prerequisites

• minimum Typescript version of 5
• pin viem to 2.20.0 (yarn add [email protected])
• pin wagmi to 2.12.7 (yarn add [email protected])

Installation

To get started, you’ll need to install the required packages. We also install the infra package because it contains the necessary Chain definitions that makes it easier to setup your a Bundler client.

$
yarn add @account-kit/core @account-kit/infra

Get your API keys

1. Get your API key by creating a new app in your Alchemy Dashboard

   Make sure Arbitrum Sepolia is enabled for your app under the Networks tab. The quickstart will demonstrate minting a NFT on Arbitrum Sepolia.

2. Create a new account config in your Account Kit Dashboard

   1. Apply the config to your app from step 1

      

   2. Enable authentication methods you want to support.

      
      Email auth

      If you want to use email auth, toggle on email.

      • For testing, use http://localhost:3000 as the Redirect URL (Note http not https)
      • The user will be redirected to the Redirect URL if you use the magic link email flow
      • Optionally stylize ✨ the email with your brand color and logo!
      
      Social auth

      If you want to enable social login, toggle which auth providers you want to support.

      • For testing, add http://localhost:3000 as a whitelisted origin

      • Add the link that your dapp will be running on to the whitelisted origin list

      • Optionally enter your own OAuth credentials or use our defaults

        

3. Create the config and copy the API Key

   

Create a config

Now, you’re ready to create a config. The config we create should be a static object that you can import anywhere into your application. It contains all of the state that the functions within this package use.

import { 
const createConfig: (params: CreateConfigProps) => AlchemyAccountsConfig
Creates an AlchemyAccountsConfig object that can be used in conjunction with the actions exported from @account-kit/core.
The config contains core and client stores that can be used to manage account state in your application.
createConfig } from "@account-kit/core";
import { 
function alchemy(config: AlchemyTransportConfig): AlchemyTransport
Creates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy, 
const sepolia: Chain
sepolia } from "@account-kit/infra";

export const 
const config: AlchemyAccountsConfig
config = 
function createConfig(params: CreateConfigProps): AlchemyAccountsConfig
Creates an AlchemyAccountsConfig object that can be used in conjunction with the actions exported from @account-kit/core.
The config contains core and client stores that can be used to manage account state in your application.
createConfig({
  
transport: AlchemyTransport
transport: 
function alchemy(config: AlchemyTransportConfig): AlchemyTransport
Creates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy({ 
apiKey: string
apiKey: "YOUR_API_KEY" }),
  
chain: Chain
chain: 
const sepolia: Chain
sepolia,
  // optional if you want to sponsor gas
  
policyId?: string | string[] | undefined
policyId: "YOUR_POLICY_ID",
});

Authenticate the user

Before you can create a Smart Account instance for your users, you need to authenticate them with the user. Depending on what framework you’re using this will look different, but using email based auth as an example you would:

1. collect the user’s email
2. call the authenticate method on the signer
3. handle the redirect from the user’s email and pass the bundle to the signer to complete login

Send a user operation

Now that you have your config, you can send user operations by leveraging the underlying smart account client.

The key thing here is the watchSmartAccountClient method which allows you to subscribe to the state of signer and underlying account to give you a stable instance of the Smart Account Client. How you store the clientState variable will depend largely on your framework, but the above example should give you a good starting point.