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.
tip
Check out an end-to-end integration of Magic with Biconomy on this example app and repo!
Dependencies
You will need the following dependencies to create a Smart Account this way:
yarn add @biconomy/account @biconomy/bundler @biconomy/common @biconomy/modules @biconomy/paymaster magic-sdk ethers@5.7.2
Imports
import { IPaymaster, BiconomyPaymaster } from "@biconomy/paymaster";
import { IBundler, Bundler } from "@biconomy/bundler";
import {
BiconomySmartAccountV2,
DEFAULT_ENTRYPOINT_ADDRESS,
} from "@biconomy/account";
import { Wallet, providers, ethers } from "ethers";
import {
ECDSAOwnershipValidationModule,
DEFAULT_ECDSA_OWNERSHIP_MODULE,
} from "@biconomy/modules";
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
},
});
Biconomy Configuration Values
Set up instances of Bundler and Paymaster.
const bundler: IBundler = new Bundler({
// get from biconomy dashboard https://dashboard.biconomy.io/
bundlerUrl: "",
chainId: 80002, // or any supported chain of your choice
entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS,
});
const paymaster: IPaymaster = new BiconomyPaymaster({
// get from biconomy dashboard https://dashboard.biconomy.io/
paymasterUrl: "",
});
Create the Biconomy Smart Account
const connect = async () => {
try {
await magic.wallet.connectWithUI();
const web3Provider = new ethers.providers.Web3Provider(
magic.rpcProvider,
"any",
);
const module = await ECDSAOwnershipValidationModule.create({
signer: web3Provider.getSigner(),
moduleAddress: DEFAULT_ECDSA_OWNERSHIP_MODULE,
});
let biconomySmartAccount = await BiconomySmartAccountV2.create({
chainId: 80002,
bundler: bundler,
paymaster: paymaster,
entryPointAddress: DEFAULT_ENTRYPOINT_ADDRESS,
defaultValidationModule: module,
activeValidationModule: module,
});
const address = await biconomySmartAccount.getAccountAddress();
} catch (error) {
console.error(error);
}
};