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.

Magic apiKey

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

Usage

calling this hook returns a connect function.

Magic offers two flavors of our SDK: Magic Connect, which provides a plug-and-play experience, and Magic Auth, a customizable white-labeled wallet solution.

// in a react component
const connect = useMagic();

// when you want to connect
const magicWallet = await connect(connectOptions);

Magic Auth

There are three ways to call the connect function - email or phoneNumber or oauthProvider.

This opens the Magic Link's Modal and prompts the user to click on the link sent to their email.

const magicWallet = await connect({
  apiKey: "YOUR_MAGIC_AUTH_API_KEY",
  email: "user@example.com",
});

phoneNumber

This opens the Magic Link's Modal and prompts the user to enter the OTP sent to their phone via SMS.

const magicWallet = await connect({
  apiKey: "YOUR_MAGIC_AUTH_API_KEY",
  phoneNumber: "+123456789",
});

oauthProvider

This redirects the user to given provider's sign-in page and once the user is authenticated, it redirects the user back to the provided redirectURI

const magicWallet = await connect({
  apiKey: "YOUR_MAGIC_AUTH_API_KEY",
  oauthProvider: "google",
  oauthOptions: {
    // URL to redirect the user to after authentication
    redirectURI: "https://example.com/foo",
  },
});

Magic Connect

const magicWallet = await connect({
  type: "connect",
  apiKey: "YOUR_MAGIC_CONNECT_API_KEY",
});

connectOptions

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.

type (optional)

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

Default is "auth".

type: "auth" | "connect";

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.

Usage​

connectOptions​

Usage

connectOptions