npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@magiclabs/wagmi-connector

v2.1.1

Published

wagmi connector to connect with Magic SDK

Downloads

1,636

Readme

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.

Special thanks to the Everipedia team for creating the connector and working with us for ongoing support and maintenance.

Frame 184 (4)

Table of Contents

⬇️ Install

Two versions of the wagmi-magic-connector are available, each designed to support different WAGMI versions.

Note: It is crucial not to mix up these versions to ensure compatibility and functionality.

V1 This version utilizes WAGMI version 1. To install, use the following command:

npm install @magiclabs/[email protected] or yarn install @magiclabs/[email protected]

V2 (Beta) This version utilizes and includes the latest WAGMI v2 features.

To install, use the following command:

npm install @magiclabs/wagmi-connector or yarn install @magiclabs/wagmi-connector

We actively encourage the community to participate in testing the versions of wagmi-magic-connector and to report any issues or suggestions for improvement. Your feedback is invaluable in helping us enhance the quality and stability of the connector.

🔎 Package TL;DR

The package contains two main connector classes: DedicatedWalletConnector & UniversalWalletConnector

DedicatedWalletConnector is a connector integrated to the Dedicated Wallet product. It is useful if you need to assign an address to your user.

UniversalWalletConnector is a connector integrated to the Universal Wallet product. It can be used to assign a read-write wallet to your user.

DEPRECATED: MagicAuthConnector and MagicConnectConnector have been replaced by DedicatedWalletConnector and UniversalWalletConnector in order to line up with Magic's product names changes. However, they are still usable and will function as they did before.

⭐ Usage

import { dedicatedWalletConnector, universalWalletConnector } from '@magiclabs/wagmi-connector';

// Dedicated Wallet integration
const connector = dedicatedWalletConnector({
  options: {
    apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required
    //...Other options
  },
});

// Universal Wallet integration 
const connector = universalWalletConnector({
  options: {
    apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required
    //...Other options
  },
});

📖 API

options

The following can be passed to connector options object:

| Key | Value | DedicatedWalletConnector support | UniversalWalletConnector 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 |

options.OAuthOptions

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

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

| Key | DedicatedWalletConnector support | UniversalWalletConnector support | |----------------------------|------------------------------|---------------------------------| | Email | ✔️ | ✔️ | | SMS | ✔️ | ❌ | | Social Logins | ✔️ | ❌ | | WebAuthn | ❌ | ❌ | | Multifactor Authentication | ❌ | ❌ |

🔆 Examples

🌟 Enable Login by Socials (OAuth)

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.

📲 Enable SMS Authentication

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.

📧 Disable Email Authentication

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

🎨 Modal Customization

You can customize the modal's theme, default accent color, logo and header text.

import { dedicatedWalletConnector } from '@magiclabs/wagmi-connector';

const connector = dedicatedWalletConnector({
  options: {
    apiKey: YOUR_MAGIC_PUBLISHABLE_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 { universalWalletConnector } from '@magiclabs/wagmi-connector';

export const rainbowMagicConnector = ({ chains }: any) => ({
  id: 'magic',
  name: 'Magic',
  iconUrl: 'https://svgshare.com/i/iJK.svg',
  iconBackground: '#fff',
  createConnector: () => {
    const connector = universalWalletConnector({
      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 🌈)