WAGMI Connector to connect with Magic. Magic is a developer SDK that you can integrate into your application to enable passwordless authentication using magic links, OTPs, OAuth from third-party services, and more for your web3 App.
Special thanks to the Everipedia team for creating the connector and working with us for ongoing support and maintenance.
- WAGMI Magic Connector
- Table of Contents
- ⬇️ Install
- 🔎 Package TL;DR
- ⭐ Usage
- 📖 API
- 🍀 Supported Logins
- 🔆 Examples
- 📚 Additional Resources
This is a fork of @magiclabs/wagmi-connector with the following changes:
- Upgraded to Magic SDK v33 with
@magic-ext/evmfor native EVM chain switching - Lazy-loaded Magic SDK imports for smaller initial bundle
- Moved
@wagmi/coreto peer dependencies - Added
customLoginTextoption for modal button text - Removed unused dependencies
Requires WAGMI v2 and viem v2.
npm install @likecoin/wagmi-magic-connectorThis package provides dedicatedWalletConnector, a WAGMI connector integrated with Magic's Dedicated Wallet. It supports email OTP, SMS, and OAuth login, as well as EVM chain switching via @magic-ext/evm.
import { dedicatedWalletConnector } from '@likecoin/wagmi-magic-connector';
const connector = dedicatedWalletConnector({
chains,
options: {
apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required
networks: [
{ rpcUrl: 'https://mainnet.infura.io/v3/...', chainId: 1 },
{ rpcUrl: 'https://polygon-rpc.com/', chainId: 137 },
],
//...Other options
},
});The following can be passed to connector options object:
| Key | Value | Description |
|---|---|---|
| apiKey | string | 🔑 (Required) Your Magic publishable API key |
| accentColor | css color (hex/rgb/etc...) | 🎨 (Optional) Custom accent color for the modal. Default is purple |
| isDarkMode | true / false | 🎨 (Optional) Enable dark mode for the modal. Default is false |
| customLogo | path_to_logo / url | 🎨 (Optional) Custom logo for the modal instead of the default Magic logo |
| customHeaderText | string | 🎨 (Optional) Custom header text for the modal. Default is "Magic" |
| customLoginText | string | 🎨 (Optional) Custom login button text. Default is "Log in / Sign up" |
| enableSMSLogin | true / false | 🌟 (Optional) Enable SMS login. Default is false |
| enableEmailLogin | true / false | 🌟 (Optional) Enable Email login. Default is true |
| oauthOptions | object | 🌟 (Optional) OAuth login configuration. See below |
| magicSdkConfiguration | object | 🛠️ (Optional) Additional options for the Magic constructor (docs) |
| networks | array | 🛠️ (Optional) List of { rpcUrl, chainId } objects for EVM chain switching via @magic-ext/evm |
The following can be passed to options.OAuthOptions object to configure OAuth login:
| Key | Value | Description |
|---|---|---|
| providers | array of strings | 🌟 (Required) List of providers to enable. check out all possible providers in OAuthOptions section above |
| callbackUrl | string | 🌟 (Optional) Callback URL to redirect to after authentication. Default value is current URL. |
Here are all the possible providers:
- apple
- github
- bitbucket
- gitlab
- discord
- twitch
- microsoft
You can provide a callback URL to redirect the user to after authentication. the default callback URL is set to the current URL.
| Method | Supported |
|---|---|
| Email OTP | ✔️ |
| SMS | ✔️ |
| Social Logins (OAuth) | ✔️ |
| WebAuthn | ❌ |
| Multifactor Authentication | ❌ |
You configure OAuth with magic by adding the following options to the connector:
const connector = dedicatedWalletConnector({
options: {
apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required
oauthOptions : {
providers: ['facebook', 'google', 'twitter'],
callbackUrl: 'https://your-callback-url.com', //optional
}
},
})To retrieve the Magic redirect result when a user is authenticated and logged in, use JSON.parse(localStorage.getItem("magicRedirectResult")). This will give you access to the redirect result object. The object will be removed from localStorage once the user disconnects.
You can enable SMS authentication by adding the following options to the connector:
const connector = dedicatedWalletConnector({
options: {
apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required
enableSMSLogin: true, //optional (default: false)
//...Other options
},
});You have to enable SMS authentication in your Magic dashboard first to make it work.
By default Email is set to true as default. if you wish to remove Email OTP, pass enableEmailLogin: false in options object as follows :
const connector = dedicatedWalletConnector({
options: {
apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required
enableEmailLogin: false, //optional (default: true)
//...Other options
},
});You can customize the modal's theme, default accent color, logo and header text.
import { dedicatedWalletConnector } from '@likecoin/wagmi-magic-connector';
const connector = dedicatedWalletConnector({
options: {
apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY,
accentColor: '#ff0000',
customLogo: 'https://example.com/logo.png',
customHeaderText: 'Login to your account',
customLoginText: 'Sign in',
isDarkMode: true,
},
});check out the API Section for more information.
for complete styling, you can override styles of the modal with ! important.
To use the connector with Rainbow kit, create a new file RainbowMagicConnector.ts with following contents:
// RainbowMagicConnector.ts
import { dedicatedWalletConnector } from '@likecoin/wagmi-magic-connector'
import { Wallet, WalletDetailsParams } from '@rainbow-me/rainbowkit'
import { CreateWalletFn } from '@rainbow-me/rainbowkit/dist/wallets/Wallet'
import { Chain } from 'wagmi/chains'
import { createConnector as createWagmiConnector } from 'wagmi'
export const getRainbowMagicWallet = (options): CreateWalletFn => {
return () => rainbowMagicWallet(options)
}
export const rainbowMagicWallet = ({
chains,
apiKey
}: {
chains: Chain[]
apiKey: string
}): Wallet => ({
id: 'magic',
name: 'Magic',
rdns: 'Magic',
iconUrl: 'https://dashboard.magic.link/images/logo.svg',
iconBackground: '#fff',
installed: true,
downloadUrls: {},
createConnector: (walletDetails: WalletDetailsParams) =>
createWagmiConnector((config) => ({
...dedicatedWalletConnector({
chains: chains,
options: {
apiKey: apiKey,
magicSdkConfiguration: {
network: {
rpcUrl: '<RPC_URL>',
chainId: 1
}
}
//...Other options (check out full API below)
}
})(config),
...walletDetails
}))
})Note:
options.magicSdkConfiguration.network.chainIdis mandatory for the integration with RainbowKit to properly work.
Import the above file to your application root where you wrap your application with WagmiConfig component.
pass the client prop with createClient instance to the WagmiConfig component as shown below:
// App.tsx
// ...
const { chains, publicClient, webSocketPublicClient } =
configureChains(YOUR_CHAIN_CONFIG);
const magicApiKey = process.env.NEXT_PUBLIC_MAGIC_API_KEY
const magicWallet = getRainbowMagicWallet({
chains: wagmiChains,
apiKey: magicApiKey
})
const connectors = connectorsForWallets([
{
groupName: 'Recommended',
wallets: [
//... other wallets connectors
magicWallet,
],
},
]);
const wagmiConfig = createConfig({
autoConnect: false,
connectors,
publicClient,
webSocketPublicClient
});
function MyApp({ Component, pageProps }: AppProps) {
return (
<WagmiConfig config={wagmiConfig}>
<RainbowKitProvider chains={chains}>
<Component {...pageProps} />
</RainbowKitProvider>
</WagmiConfig>
);
}
export default MyApp;This procedure might change depending on the version of Rainbow kit you are using so please check the documentation of the Rainbow kit if it is not working.