Magic Signer
In this guide, you will learn how to create a Magic (opens in a new tab) signer that can be added as a Safe owner and used to initialize any of the kits from the Safe{Core} SDK.
Check out the Safe Signers demo app (opens in a new tab) on GitHub to follow along this guide with the completed code.
Prerequisites
- Node.js and npm (opens in a new tab).
- A Magic account (opens in a new tab) and an API key.
Install dependencies
_10npm install magic-sdk
Steps
Imports
Here are the necessary imports for this guide.
_10import { Magic } from 'magic-sdk'
In addition, you will need to import a web3 library of your choice to use in the "Get the provider and signer" section. In this guide, we are using viem.
Get the API Key
Check Magic documentation on how to create a new project in their dashboard (opens in a new tab) and get the API key. (opens in a new tab)
Once you have it, you need to initialize the MAGIC_API_KEY variable with it.
_10const MAGIC_API_KEY = // ...
Initialize Magic
Magic initialization is done by instantiating the Magic class with an MAGIC_API_KEY. Optionally, it also accepts some configuration parameters that can be checked in the Magic Web API Reference (opens in a new tab).
_10const magic = new Magic(MAGIC_API_KEY)
Login
To login with an email address or social account you need to call the following method, that will open the popup and request the user to submit the login form.
_10await magic.wallet.connectWithUI()
Get the provider and signer
Once the user is logged in, you can get the provider and signer, which is the externally-owned account of the user that was derived from its credentials.
You can instantiate the provider using viem and the following imports:
_10import { createWalletClient, custom } from 'viem'_10import { sepolia } from 'viem/chains'
_10const provider = createWalletClient({_10 chain: sepolia,_10 transport: custom(magic.rpcProvider)_10})_10_10const metadata = await magic.user.getInfo()_10const signer = metadata.publicAddress
With the provider and signer you are ready to instantiate any of the kits from the Safe{Core} SDK and set up or use this signer as a Safe owner.
Logout
Finally, to logout the user, call the logout() method.
_10await magic.user.logout()
Recap and further reading
After following this guide, you are able to create a Safe signer using Magic and get the provider and signer required to initialize the kits from the Safe{Core} SDK.
Learn more about Magic by checking the following resources: