Awesome

🚧 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 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.

Table of Contents

• ⬇️ Install
• 🔎 Package TL;DR
• ⭐ Usage
• 📖 API
  • options
  • options.OAuthOptions
    • Providers
    • Callback URL
• 🍀 Supported Logins
• 🔆 Examples
  • 🌟 Enable Login by Socials (OAuth)
  • 📲 Enable SMS Authentication
  • 📧 Disable Email Authentication
  • 🎨 Modal Customization
• 📚 Additional Resources
  • Usage with Rainbowkit
  • Example Repositories

⬇️ Install

npm install @everipedia/wagmi-magic-connector

or

yarn add @everipedia/wagmi-magic-connector

🔎 Package TL;DR

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.

⭐ Usage

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
  },
});

📖 API

options

The following can be passed to connector options object:

options.OAuthOptions

The following can be passed to options.OAuthOptions object to configure OAuth login:

Providers

Here are all the possible providers:

• google
• facebook
• apple
• github
• bitbucket
• gitlab
• linkedin
• twitter
• discord
• twitch
• microsoft

Callback URL

You can provide a callback URL to redirect the user to after authentication. the default callback URL is set to the current URL.

🍀 Supported Logins

🔆 Examples

🌟 Enable Login by Socials (OAuth)

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
    }
  },
})

📲 Enable SMS Authentication

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.

📧 Disable Email Authentication

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
  },
});

🎨 Modal Customization

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.

📚 Additional Resources

Usage with RainbowKit

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.

Example repositories:

• https://github.com/Royal-lobster/vanilla-magic-example
• https://github.com/Royal-lobster/rainbow-magic-example (With Rainbowkit 🌈)