useMagic

Hook that prompts users to connect to your app using their email or phone number with Magic Link

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

Usage

calling this hook returns a connect function.

There are two ways to call this conect function: using email or phoneNumber

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.

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={() => {
          connectWithMagic({
            apiKey: "YOUR_API_KEY",
            email: "user@example.com", // user's email
          });
        }}
      >
        connect with email
      </button>

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

Configuration

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

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]}>
      <App />
    </ThirdwebProvider>
  );
}

magicSdkConfiguration (optional)

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.