useMagic

Hook that prompts users to connect to your app using Magic Auth or Magic Connect

import { useMagic } from "@thirdweb-dev/react";

The magicLink also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

Usage

calling this hook returns a connect function.

There are two ways to call this connect function: using email or phoneNumber if you are using type: "auth"

If you call the connect function with email, a modal will open and prompt the user to click on the link sent to their email. Once user completes this step, the modal will close and the user will be connected to your app.

If you call the connect method with phoneNumber, a modal will open and prompt the user to enter the OTP sent to their phone number. Once the user enters the OTP, the modal will close and the user will be connected to your app.

If you call the connect function with type: "connect", a Magic Connect Widget will open and prompt the user to login with their email or Sign in with Google.

Once connected, you can use the useAddress hook to get the user's address

Magic SDK requires an apiKey for instantiation. You can create a apiKey for your app on magic.link

import { useMagic } from "@thirdweb-dev/react";

function App() {
  const connectWithMagic = useMagic();

  return (
    <>
      <button
        onClick={async () => {
          const magicWallet = await connectWithMagic({
            type: "auth",
            apiKey: "YOUR_API_KEY",
            email: "user@example.com", // user's email
          });
        }}
      >
        connect with email
      </button>

      <button
        onClick={async () => {
          const magicWallet = await connectWithMagic({
            type: "auth",
            apiKey: "YOUR_API_KEY",
            phoneNumber: "+123456789", // user's phone number
          });
        }}
      >
        connect with phone number
      </button>

      <button
        onClick={async () => {
          const magicWallet = await connectWithMagic({
            type: "connect",
            apiKey: "YOUR_API_KEY",
          });
        }}
      >
        connect with magic connect Widget
      </button>
    </>
  );
}

Configuration

type (optional)

Whether to use Magic Auth or Magic Connect to connect to the wallet.

Default is "auth".

type: "auth" | "connect";

apiKey

Your Magic Link apiKey. You can get an API key by signing up for an account on Magic Link's website.

Must be a string.

email or phoneNumber

This is only relevant if you are using type: 'auth' in your config.

specify either email or phoneNumber of the user to connect to your app.

If you call the connect function with email, a modal will open and prompt the user to click on the link sent to their email. Once user completes this step, the modal will close and the user will be connected to your app.

If you call the connect method with phoneNumber, a modal will open and prompt the user to enter the OTP sent to their phone number. Once the user enters the OTP, the modal will close and the user will be connected to your app.

chainId (optional)

To connect to a specific chain when connecting the wallet, pass the chainId in a configuration object as shown below.

chainId: number;

import { useMagic } from "@thirdweb-dev/react";
import { Polygon } from "@thirdweb-dev/chains";

function App() {
  const connectWithMagic = useMagic();

  return (
    <button
      onClick={() =>
        connectWithMagic({
          apiKey: "YOUR_API_KEY",
          chainId: Polygon.chainId,
          email: "user@example.com",
        })
      }
    >
      Connect Wallet
    </button>
  );
}

You must add this chain in ThirdwebProvider’s supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}

magicSdkConfiguration (optional)

This is only relevant if you are using type: 'auth' in your config.

Configuration for Magic Auth SDK.

{
  locale?: string;
  endpoint?: string;
  testMode?: boolean;
}

local (optional)

Customize the language of Magic's modal, email and confirmation screen. See Localization for more.

endpoint (optional)

A URL pointing to the Magic iframe application.

testMode (optional)

Enable testMode to assert the desired behavior through the email address you provide to loginWithMagicLink without having to go through the auth flow.