Web3Auth Integration Guide

Web3Auth is an embedded wallet provider that allows users to generate wallets scoped to your application via Social Logins, Email OTP, or Custom Authentication Methods. 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 Web3Auth with Account Kit allows you to get the best of both worlds. You can use Web3Auth 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

Web3AuthSigner requires installation of the @web3auth/modal and @web3auth/base SDKs. They are listed as optional dependencies on aa-signers. aa-signers lists them as optional dependencies.

npm

npm i -s @web3auth/modal
npm i -s @web3auth/base

yarn

yarn add @web3auth/modal
yarn add @web3auth/base

Create a SmartAccountSigner

Next, setup the web3auth sdk and create a SmartAccountSigner using the aa-signers package:

import { Web3AuthSigner } from "@alchemy/aa-signers/web3auth";

export const createWeb3AuthSigner = async () => {
  const web3AuthSigner = new Web3AuthSigner({
    clientId: "test",
    chainConfig: {
      chainNamespace: "eip155",
    },
  });

  await web3AuthSigner.authenticate({
    init: async () => {
      await web3AuthSigner.inner.initModal();
    },
    connect: async () => {
      await web3AuthSigner.inner.connect();
    },
  });

  return web3AuthSigner;
};

Use it with Modular Account

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

example.ts

import { createModularAccountAlchemyClient } from "@alchemy/aa-alchemy";
import { sepolia } from "@alchemy/aa-core";
import { createWeb3AuthSigner } from "./web3auth";

const chain = sepolia;

const provider = await createModularAccountAlchemyClient({
  apiKey: "ALCHEMY_API_KEY",
  chain,
  signer: await createWeb3AuthSigner(),
});

web3auth.ts

import { Web3AuthSigner } from "@alchemy/aa-signers/web3auth";

export const createWeb3AuthSigner = async () => {
  const web3AuthSigner = new Web3AuthSigner({
    clientId: "test",
    chainConfig: {
      chainNamespace: "eip155",
    },
  });

  await web3AuthSigner.authenticate({
    init: async () => {
      await web3AuthSigner.inner.initModal();
    },
    connect: async () => {
      await web3AuthSigner.inner.connect();
    },
  });

  return web3AuthSigner;
};