Signer Quickstart | Alchemy Docs

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.

Get your API key and create an account config

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.
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
Create the config and copy the API Key

Install the Signer package

Prerequisites

minimum Typescript version of 5

Installation

$ yarn add @account-kit/signer

Create a signer instance

import { class AlchemyWebSignerA SmartAccountSigner that can be used with any SmartContractAccount
AlchemyWebSigner } from "@account-kit/signer";

export const const signer: AlchemyWebSigner
signer = new new AlchemyWebSigner(params: AlchemySignerParams): AlchemyWebSignerInitializes an instance with the provided Alchemy signer parameters after parsing them with a schema.
AlchemyWebSigner({
  client: ({
    connection: {
        apiKey: string;
        rpcUrl?: undefined;
        jwt?: undefined;
    } | {
        jwt: string;
        rpcUrl?: undefined;
        apiKey?: undefined;
    } | {
        rpcUrl: string;
        apiKey?: undefined;
        jwt?: undefined;
    } | {
        rpcUrl: string;
        jwt: string;
        apiKey?: undefined;
    };
    ... 4 more ...;
    enablePopupOauth?: boolean | undefined;
} | AlchemySignerWebClient) & (AlchemySignerWebClient | ... 1 more ... | undefined)
client: {
    connection: {
    apiKey: string;
}
connection: {
      apiKey: string
apiKey: "API_KEY",
    },
    iframeConfig: {
    iframeContainerId: string;
}
iframeConfig: {
      iframeContainerId: string
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.

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

import { import signer
signer } from "./signer";

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

import { class AlchemyWebSignerA SmartAccountSigner that can be used with any SmartContractAccount
AlchemyWebSigner } from "@account-kit/signer";

export const const signer: AlchemyWebSigner
signer = new new AlchemyWebSigner(params: AlchemySignerParams): AlchemyWebSignerInitializes an instance with the provided Alchemy signer parameters after parsing them with a schema.
AlchemyWebSigner({
  client: ({
    connection: {
        apiKey: string;
        rpcUrl?: undefined;
        jwt?: undefined;
    } | {
        jwt: string;
        rpcUrl?: undefined;
        apiKey?: undefined;
    } | {
        rpcUrl: string;
        apiKey?: undefined;
        jwt?: undefined;
    } | {
        rpcUrl: string;
        jwt: string;
        apiKey?: undefined;
    };
    ... 4 more ...;
    enablePopupOauth?: boolean | undefined;
} | AlchemySignerWebClient) & (AlchemySignerWebClient | ... 1 more ... | undefined)
client: {
    connection: {
    apiKey: string;
}
connection: {
      apiKey: string
apiKey: "API_KEY",
    },
    iframeConfig: {
    iframeContainerId: string;
}
iframeConfig: {
      iframeContainerId: string
iframeContainerId: "alchemy-signer-iframe-container",
    },
  },
});

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 { function createLightAccount<TTransport extends Transport = Transport, TSigner extends SmartAccountSigner = SmartAccountSigner<any>, TLightAccountVersion extends LightAccountVersion<"LightAccount"> = "v2.0.0">(config: CreateLightAccountParams<TTransport, TSigner, TLightAccountVersion>): Promise<LightAccount<TSigner, TLightAccountVersion>>
createLightAccount } from "@account-kit/smart-contracts";
import { const sepolia: Chain
sepolia } from "@account-kit/infra";
import { function http<rpcSchema extends RpcSchema | undefined = undefined, raw extends boolean = false>(url?: string | undefined, config?: HttpTransportConfig<rpcSchema, raw>): HttpTransport<rpcSchema, raw>
http } from "viem";
import { import signer
signer } from "./signer";

const const account: LightAccount<any, "v2.0.0">
account = await createLightAccount<HttpTransport<undefined, false>, any, "v2.0.0">(config: CreateLightAccountParams<HttpTransport<undefined, false>, any, "v2.0.0">): Promise<...>
createLightAccount({
  signer: any
signer,
  chain: Chain
chain: const sepolia: Chain
sepolia,
  transport: HttpTransport<undefined, false>
transport: http<undefined, false>(url?: string | undefined, config?: HttpTransportConfig<undefined, false> | undefined): HttpTransport<undefined, false>
http(`${const sepolia: Chain
sepolia.rpcUrls: {
    [key: string]: ChainRpcUrls;
    default: ChainRpcUrls;
}Collection of RPC endpoints
rpcUrls.__type[string]: ChainRpcUrls
alchemy.http: readonly string[]
http[0]}/API_KEY`),
});

import { class AlchemyWebSignerA SmartAccountSigner that can be used with any SmartContractAccount
AlchemyWebSigner } from "@account-kit/signer";

export const const signer: AlchemyWebSigner
signer = new new AlchemyWebSigner(params: AlchemySignerParams): AlchemyWebSignerInitializes an instance with the provided Alchemy signer parameters after parsing them with a schema.
AlchemyWebSigner({
  client: ({
    connection: {
        apiKey: string;
        rpcUrl?: undefined;
        jwt?: undefined;
    } | {
        jwt: string;
        rpcUrl?: undefined;
        apiKey?: undefined;
    } | {
        rpcUrl: string;
        apiKey?: undefined;
        jwt?: undefined;
    } | {
        rpcUrl: string;
        jwt: string;
        apiKey?: undefined;
    };
    ... 4 more ...;
    enablePopupOauth?: boolean | undefined;
} | AlchemySignerWebClient) & (AlchemySignerWebClient | ... 1 more ... | undefined)
client: {
    connection: {
    apiKey: string;
}
connection: {
      apiKey: string
apiKey: "API_KEY",
    },
    iframeConfig: {
    iframeContainerId: string;
}
iframeConfig: {
      iframeContainerId: string
iframeContainerId: "alchemy-signer-iframe-container",
    },
  },
});