Magic Wallet


Wallet module for connecting Magic wallets to Onboard V2

Login options

  • Email - The Magic module comes with a built in email login modal that is customizable in the same fashion that all other web3-onboard UI components are
  • note: The Magic Module currently only supports email login but we are open to expand to sms or socials*


npm i @web3-onboard/magic
Head over to and signup to get an API key


type MagicInitOptions = {
apiKey: string
userEmail?: string // optional - if user has already logged in and/or session is still active a login modal will not appear


import Onboard from '@web3-onboard/core'
import magicModule from '@web3-onboard/magic'
const magic = magicModule({ apiKey: 'API_KEY', userEmail: localStorage.getItem('magicUserEmail') })
const onboard = Onboard({
// ... other Onboard options
wallets: [
//... other wallets
const connectedWallets = await onboard.connectWallet()

Accessing the Magic Wallet Internals

When a Magic wallet is connect the Magic instance is exposed. This can be used to get information such as user Metadata, update a user's email address or handle the user's token.
The user's email can be set in local storage and passed through the MagicInitOptions to avoid a user having to login again if they are returning to the DApp within the set user session time. Magic has a default time of 7 days and this can be configured through your Magic API Key settings.
const [magicWallet] = await onboard.connectWallet()
try {
const { email, publicAddress } = await magicWallet.instance.user.getMetadata();
localStorage.setItem('magicUserEmail', email)
// This email can then be passed through the MagicInitOptions to continue the users session and avoid having to login again
} catch {
// Handle errors if required!
For full documentation and examples please visit Magic's official docs


There is a known build issue when building with the magic-sdk package and is outlined here as a github issue. There error only occurs in env with CI=true and looks something like
The prop value with an expression type of ChainExpression could not be resolved. Please file issue to get this fixed immediately.
Compiled with warnings.
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
A fix for react projects can be found in our reactDemo using CRACO as a bundle configurer and the configuration can be seen here
const path = require("path");
module.exports = {
reactScriptsVersion: "react-scripts" /* (default value) */,
webpack: {
alias: {
"magic-sdk": path.resolve(
Copy link
On this page
Wallet module for connecting Magic wallets to Onboard V2