Skip to main content

Magic Link

Allows users to connect to your app using Magic Auth or Magic Connect

Usage​

Magic Auth​

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

const wallet = new MagicLink({
  apiKey: "YOUR_API_KEY",
  type: "auth",
});

await wallet.connect({
  email: "user@example.com",
});

// OR

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

Magic Connect​

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

const wallet = new MagicLink({
  apiKey: "YOUR_API_KEY",
  type: "connect",
});

await wallet.connect();

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.

clientId (recommended)

Provide clientId to use the thirdweb RPCs for given chains

You can create a client ID for your application from thirdweb dashboard.

type (optional)

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

Default is "auth".

type: "auth" | "connect";
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.

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

{
  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

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

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

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

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​

Inherits 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

// if you are using type: 'auth'
await wallet.connect({
  email: "user@example.com",
});

// or

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

// if you are using type: 'connect'
await wallet.connect();
Configuration
connect(options?: {
  // One of email or phoneNumber is required if you are using type: 'auth'
  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[]>;