Account Kit

Appearance

Magic Link Integration Guide ​

Magic is an embedded wallet provider that allows users to generate wallets scoped to your application via Social Logins, Email OTP, or Webauthn. This is great for enabling a better experience for your users. But ultimately these wallets are not much different from EOA's, so you don't have the benefit of Account Abstraction (gas sponsorship, batching, etc).

Combining Magic with Account Kit allows you to get the best of both worlds. You can use Magic via the aa-signers package to generate a wallet scoped to your application, and then use aa-alchemy to create smart accounts for your users!

Integration ​

Install the SDK ​

Using MagicSigner in the aa-signers package requires installation of the magic-sdk SDK. aa-signers lists it as optional dependency.

bash
npm i -s magic-sdk
bash
yarn add magic-sdk

Note

To use MagicSigner in your app's client, you must ensure the window object is defined.

Create a MagicSigner ​

Next, setup the magic sdk and create an authenticated MagicSigner using the aa-signers package:

ts
import { MagicSigner } from "@alchemy/aa-signers/magic";

// this is generated from the [Magic Dashboard](https://dashboard.magic.link/)
const MAGIC_API_KEY = "pk_live_...";

export const createMagicSigner = async () => {
  const magicSigner = new MagicSigner({ apiKey: MAGIC_API_KEY });

  await magicSigner.authenticate({
    authenticate: async () => {
      await magicSigner.inner.wallet.connectWithUI();
    },
  });

  return magicSigner;
};

Use it with Modular Account ​

Let's see it in action with aa-alchemy:

ts
import { createModularAccountAlchemyClient } from "@alchemy/aa-alchemy";
import { sepolia } from "@alchemy/aa-core";
import { createMagicSigner } from "./magic";

const chain = sepolia;

// NOTE: the below is async because it depends on creating a magic Signer. You can choose to break that up how you want
// e.g. use a useEffect + useState to create the Signer and then pass it down to the provider
const provider = await createModularAccountAlchemyClient({
  apiKey: "ALCHEMY_API_KEY",
  chain,
  signer: await createMagicSigner(),
});
ts
import { MagicSigner } from "@alchemy/aa-signers/magic";

// this is generated from the [Magic Dashboard](https://dashboard.magic.link/)
const MAGIC_API_KEY = "pk_live_...";

export const createMagicSigner = async () => {
  const magicSigner = new MagicSigner({ apiKey: MAGIC_API_KEY });

  await magicSigner.authenticate({
    authenticate: async () => {
      await magicSigner.inner.wallet.connectWithUI();
    },
  });

  return magicSigner;
};