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: "user@example.com",
});

// OR

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

With this configuration, users will be able to login 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;
}

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.

smsLogin (optional)

Specify whether you want to allow users to login 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 login 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)

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 walletWithOptions = 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

Inherhits all the public methods from the AbstractClientWallet class.

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[]>;