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