Signer Quickstart

Getting started with the Signer is very similar to getting started with React.

Get your API key and create an account config

1. Get your API key by creating a new app in your Alchemy Dashboard
2. Create a new account config in your Alchemy Accounts Manager Dashboard
   1. Apply the config to your app from step 1
   2. Use http://localhost:3000 as the “Redirect URL” for testing (***make sure to set http NOT https for local testing)
   3. Determine the authentication methods you want to support.
      1. If you are using email auth, you can optionally stylize ✨ the email with your brand color and logo!
      2. If you want to enable social login, toggle which auth providers you want to support, optionally enter your own Oauth credentials or use our defaults, and use http://localhost:3000 as a whitelisted origin for testing.
3. Copy the API Key found at the end of the URL (you don't need the whole link for this demo)

Install the Signer package

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

yarn add @account-kit/signer

Create a signer instance

import { AlchemyWebSigner } from "@account-kit/signer";
 
export const signer = new AlchemyWebSigner({
  client: {
    connection: {
      apiKey: "API_KEY",
    },
    iframeConfig: {
      iframeContainerId: "alchemy-signer-iframe-container",
    },
  },
});

Authenticate a user

Next, you'll need to authenticate your user before you can use the Signer as an owner on the account.

import { signer } from "./signer";
 
const result = await signer.authenticate({
  type: "email",
  email: "example@mail.com",
});

Use signer as owner on Smart Account

Now that you have authenticated your user, you can use the signer as an owner on a Smart Contract Account.

import { createLightAccount } from "@account-kit/smart-contracts";
import { sepolia } from "@account-kit/infra";
import { http } from "viem";
import { signer } from "./signer";
 
const account = await createLightAccount({
  signer,
  chain: sepolia,
  transport: http(`${sepolia.rpcUrls.alchemy.http[0]}/API_KEY`),
});