Magic Wallet

@web3-onboard/magic

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*

Install

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

Options

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

Usage

1
import Onboard from '@web3-onboard/core'
2
import magicModule from '@web3-onboard/magic'
3
4
const magic = magicModule({ apiKey: 'API_KEY', userEmail: localStorage.getItem('magicUserEmail') })
5
6
const onboard = Onboard({
7
// ... other Onboard options
8
wallets: [
9
magic
10
//... other wallets
11
]
12
})
13
14
const connectedWallets = await onboard.connectWallet()
15
console.log(connectedWallets)
Copied!

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.
1
const [magicWallet] = await onboard.connectWallet()
2
3
try {
4
const { email, publicAddress } = await magicWallet.instance.user.getMetadata();
5
localStorage.setItem('magicUserEmail', email)
6
// This email can then be passed through the MagicInitOptions to continue the users session and avoid having to login again
7
} catch {
8
// Handle errors if required!
9
}
Copied!
For full documentation and examples please visit Magic's official docs

Building

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
1
The prop value with an expression type of ChainExpression could not be resolved. Please file issue to get this fixed immediately.
2
Compiled with warnings.
3
./node_modules/magic-sdk/dist/es/index.js
4
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Copied!
A fix for react projects can be found in our reactDemo using CRACO as a bundle configurer and the configuration can be seen here
1
const path = require("path");
2
3
module.exports = {
4
reactScriptsVersion: "react-scripts" /* (default value) */,
5
6
webpack: {
7
alias: {
8
"magic-sdk": path.resolve(
9
__dirname,
10
"node_modules/magic-sdk/dist/cjs/index.js"
11
),
12
},
13
},
14
};
Copied!