Magic Link

Allows users to connect to your app with email or phone number using Magic Auth

Usage

import { MagicLink } from "@thirdweb-dev/wallets";

// Create a wallet instance
const wallet = new MagicLink({
  apiKey: "YOUR_API_KEY",
});

// Now connect using email or phone number

wallet.connect({
  email: "[email protected]",
});

// OR

wallet.connect({
  phoneNumber: "+123456789",
});

With this configuration, users will be able to log in using their email or phone number.

If you want to restrict login to only email or only phone number, you can do so by passing the smsLogin:false option or emailLogin:false option

Configuration

Provide a configuration object when instantiating the MagicLink class.

apiKey (required)

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.

magicSdkConfiguration (optional)

Configuration for Magic Auth SDK.

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

locale (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 so that you don't have to go through the auth flow.

smsLogin (optional)

Specify whether you want to allow users to log in with their phone number or not. It is true by default

Must be a boolean.

emailLogin (optional)

Specify whether you want to allow users to log in with their email or not. It is true by default

Must be a boolean.

chains (optional)

Provide an array of chains you want to support.

Must be an array of Chain objects, from the @thirdweb-dev/chains package.

walletStorage (optional)

The wallet needs to store some data in persistent storage. By default localStorage is used. If you want to use a different storage, you can pass it in the walletStorage option.

Must be an object conforming to the AsyncStorage interface:

export interface AsyncStorage {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
}

Example:

import { MagicLink } from "@thirdweb-dev/wallets";

const wallet = new MagicLink({
  // ... other required config

  walletStorage: {
    getItem: (key) => {
      // Implement your own storage logic here
    },
    removeItem: (key) => {
      // Implement your own storage logic here
    },
    setItem: (key, value) => {
      // Implement your own storage logic here
    },
  },
});

Methods

Inheritss all the public methods from the AbstractClientWallet class.

connect

Calling connect opens the Magic Link's Modal and prompts the user to either enter an OTP sent to their phone number or click on the link sent to their email.

There are two ways to call the connect function: using email or phoneNumber

await wallet.connect({
  email: "[email protected]",
});

// or

await wallet.connect({
  phoneNumber: "+123456789",
});

Configuration

connect(options?: {
  // One of email or phoneNumber is required
  email?: string,
  phoneNumber?: string,

  chainId? number,
}): Promise<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 the 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)

If chainId is provided, the wallet will be connected to the network with the given chainId, else it will be connected to the Ethereum Mainnet.

getMagic

Get Magic Auth SDK instance. Learn more about Magic Auth SDK

you use all methods available in the Magic Auth SDK from the SDK instance. Refer to Magic Auth API for more details.

const magicSDK = await wallet.getMagic();

Configuration

Return Value

Returns the magic auth SDK instance of type InstanceWithExtensions<SDKBase, OAuthExtension[]>

InstanceWithExtensions<SDKBase, OAuthExtension[]>;