π§ DEPRECATION NOTICE: We are moving this project to a new repository under magiclabs ! Please follow the new repository for future updates: https://github.com/magiclabs/wagmi-magic-connector
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.
- β¬οΈ Install
- π Package TL;DR
- β Usage
- π API
- π Supported Logins
- π Examples
- π Additional Resources
npm install @everipedia/wagmi-magic-connector
or
yarn add @everipedia/wagmi-magic-connector
The package contains two main connector classes: MagicAuthConnector
& MagicConnectConnector
MagicAuthConnector
is a connector integrated to the Magic Auth
product. It is useful if you need to assign an address to your user.
MagicConnectConnector
is a connector integrated to the Magic Connect
product. It can be used to assign a read-write wallet to your user.
import { MagicAuthConnector, MagicConnectConnector } from '@everipedia/wagmi-magic-connector';
// Magic Auth integration
const connector = new MagicAuthConnector({
options: {
apiKey: YOUR_MAGIC_LINK_API_KEY, //required
//...Other options
},
});
// Magic Connect integration
const connector = new MagicConnectConnector({
options: {
apiKey: YOUR_MAGIC_LINK_API_KEY, //required
//...Other options
},
});
The following can be passed to connector options object:
Key | Value | MagicAuthConnector support |
MagicConnectConnector support |
Description |
---|---|---|---|---|
accentColor | css color (hex/rgb/etc...) | βοΈ | βοΈ | π¨ (Optional) Makes modal to use the custom accentColor instead of default purple |
isDarkMode | true / false | βοΈ | βοΈ | π¨ (Optional) Makes modal dark mode if true. Default value is false |
customLogo | path_to_logo / url | βοΈ | βοΈ | π¨ (Optional) Makes modal to use the custom logo instead of default magic logo |
customHeaderText | string | βοΈ | βοΈ | π¨ (Optional) Makes modal to use the custom header text instead of default text at the bottom of logo |
enableSMSLogin | true / false | βοΈ | β | π (Optional) Makes modal to enable SMS login if true. Default value is false |
enableEmailLogin | true / false | βοΈ | β | π (Optional) Makes modal to disable Email login if false. Default value is true |
OAuthOptions | object | βοΈ | β | π (Optional) Makes modal to enable OAuth login according to configuration passed. |
magicSdkConfiguration | object | βοΈ | βοΈ | π οΈ (Optional) Pass additional options to Magic constructor (refer Magic API documentation for more) |
networks | array of EthNetworkConfiguration | β | βοΈ | π οΈ (Optional) Pass the list of network compatible to switch networks |
The following can be passed to options.OAuthOptions object to configure OAuth login:
Key | Vvalue | 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.
Key | MagicAuthConnector support |
MagicConnectConnector support |
---|---|---|
βοΈ | βοΈ | |
SMS | βοΈ | β |
Social Logins | βοΈ | β |
WebAuthn | β | β |
Multifactor Authentication | β | β |
You configure OAuth with magic by adding the following options to the connector:
const connector = new MagicAuthConnector({
options: {
apiKey: YOUR_MAGIC_LINK_API_KEY, //required
oauthOptions : {
providers: ['facebook', 'google', 'twitter'],
callbackUrl: 'https://your-callback-url.com', //optional
}
},
})
You can enable SMS authentication by adding the following options to the connector:
const connector = new MagicAuthConnector({
options: {
apiKey: YOUR_MAGIC_LINK_API_KEY, //required
enableSMSLogin: true, //optional (default: false)
//...Other options
},
});
You have to enable SMS authentication in your Magic Link account first to make it work.
By default Email Authentication is set to true as default. if you wish to remove sending magic links via emails, pass enableEmailLogin: false
in options object as follows :
const connector = new MagicAuthConnector({
options: {
apiKey: YOUR_MAGIC_LINK_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 { MagicAuthConnector } from '@everipedia/wagmi-magic-connector';
const connector = new MagicAuthConnector({
options: {
apiKey: YOUR_MAGIC_LINK_API_KEY,
accentColor: '#ff0000',
customLogo: 'https://example.com/logo.png',
headerText: 'Login to your account',
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 { MagicConnectConnector } from '@everipedia/wagmi-magic-connector';
export const rainbowMagicConnector = ({ chains }: any) => ({
id: 'magic',
name: 'Magic',
iconUrl: 'https://svgshare.com/i/iJK.svg',
iconBackground: '#fff',
createConnector: () => {
const connector = new MagicConnectConnector({
chains: chains,
options: {
apiKey: 'YOUR_MAGIC_CONNECT_API_KEY',
magicSdkConfiguration: {
network: {
rpcUrl: 'https://polygon-rpc.com', // your ethereum, polygon, or optimism mainnet/testnet rpc URL
chainId: 137,
},
},
//...Other options (check out full API below)
},
});
return {
connector,
};
},
});
Note:
options.magicSdkConfiguration.network.chainId
is 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 connectors = connectorsForWallets([
{
groupName: 'Recommended',
wallets: [
//... other wallets connectors
rainbowMagicConnector({ chains }),
],
},
]);
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.