Magic Link

Our Smart Accounts are signer agnostic, in this how to guide we'll show you how to incorporate Magic Link for creating a login experience that uses google login/email/or connect wallet all using the Magic Link UI. You can also add more features such as Social Login by building on top of these snippets, check out the official Magic Documentation for more information.

Dependencies

You will need the following dependencies to create a Smart Account this way:

yarn add @biconomy/account magic-sdk ethers@5.7.2

Imports

import { createSmartAccountClient, LightSigner } from "@biconomy/account";
import { Wallet, providers, ethers } from "ethers";
import { Magic } from "magic-sdk";

Magic Link Configuration

Magic will require api keys which you can get from the Magic Dashboard.

import { Magic } from "magic-sdk";
 
// Initialize the Magic instance
export const magic = new Magic("YOUR_API_KEY", {
  network: {
    rpcUrl: "",
    chainId: 11155111, // or preferred chain
  },
});

Create the Biconomy Smart Account

const connect = async () => {
  try {
    await magic.wallet.connectWithUI();
    const web3Provider = new ethers.providers.Web3Provider(
      magic.rpcProvider,
      "any"
    );
 
    const smartAccount = await createSmartAccountClient({
      signer: web3Provider.getSigner() as LightSigner,
      bundlerUrl: "", // <-- Read about this at https://docs.biconomy.io/dashboard#bundler-url
      biconomyPaymasterApiKey: "", // <-- Read about at https://docs.biconomy.io/dashboard/paymaster
      rpcUrl: "" // <-- read about this at https://docs.biconomy.io/account/methods#createsmartaccountclient
    });
 
    const address = await smartAccount.getAccountAddress();
  } catch (error) {
    console.error(error);
  }
};