Skip to content

Use Magic with ZeroDev

Magic is a popular embedded wallet provider that supports social logins. While social logins are great, your users still need to onramp in order to pay for gas, which introduces significant friction.

By combining ZeroDev with Magic, you can use Magic to enable a smooth social login experience, while using ZeroDev as the smart wallet to sponsor gas for users, batch transactions, and more.

You can check out Magic's official ZeroDev guide, or keep reading our guide.

Set up

To use Magic with ZeroDev, first create an application that integrates with Magic.

  • Refer to the Magic documentation site for instructions on setting up an application with the Magic SDK.
  • For a quick start, Magic provides a CLI to create a starter project, available here.

Integration

Integrating ZeroDev with Magic is straightforward after setting up the Magic SDK. Magic provides an Externally Owned Account (EOA) wallet to use as a signer with Kernel.

Create the Magic object

After following the Magic documentation, you will have access to a MagicBase object as shown below:

import { Magic as MagicBase } from 'magic-sdk';
 
const magic = new MagicBase(process.env.MAGIC_API_KEY as string, {
  network: {
    rpcUrl: getNetworkUrl(),
    chainId: getChainId(),
  },
  extensions: [new AuthExtension(), new OAuthExtension()],
});

Use with ZeroDev

Use the provider from Magic to create a smart account signer, which can be passed to a validator. For detailed guidance on using a validator, refer to our documentation on creating accounts.

import { signerToEcdsaValidator } from "@zerodev/ecdsa-validator"
import { KERNEL_V3_1, getEntryPoint } from "@zerodev/sdk/constants"
import { createPublicClient } from "viem";
import { polygonAmoy } from 'viem/chains';
 
// Get the Provider from Magic 
const magicProvider = await magic.wallet.getProvider();
 
const publicClient = createPublicClient({
  // Use your own RPC provider (e.g. Infura/Alchemy).
  transport: http('https://rpc-amoy.polygon.technology'),
  chain: polygonAmoy,
})
 
// Pass your `smartAccountSigner` to the validator
const ecdsaValidator = await signerToEcdsaValidator(publicClient, {
  signer: magicProvider,
  entryPoint: getEntryPoint("0.7"),
  kernelVersion: KERNEL_V3_1
})
 
// You can now use this ECDSA Validator to create a Kernel account