Alchemy Logo

Signer Quickstart

Using React? Follow this quickstart guide instead for easy-to-use React hooks and integration with Smart Wallets.

If you're not using React, use the @account-kit/signer package to create and use Smart Wallets.

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

    Make sure your desired network is enabled for your app under the Networks tab.

  2. Activate smart wallets for your app in your dashboard

    1. Apply the config to your app from step 1

      apply your the config to the app from the first step

    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!
      configure email auth
      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

        configure social auth

  3. Create the config and copy the API Key

    how to copy the api key

Prerequisites

  • minimum Typescript version of 5

Installation

yarn add @account-kit/signer

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

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

In this example, we use email auth, but we support a number of other auth methods. See the other guides for more examples.

import { signer } from "./signer";
 
const result = await signer.authenticate({
  type: "email",
  email: "[email protected]",
});

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`),
});
Was this page helpful?