MagicLink
Allows users to connect to your app using Magic Auth or Magic Connect
Magic is a developer SDK that integrates with your application to enable passwordless Web3 onboarding (no seed phrases) and authentication using magic links
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.
Magic Auth
Login with Email or Phone Number
With below configuration, users will be able to log in using their email or phone number.
If you want to restrict login via email only - pass smsLogin:false . If you want to restrict login via phone number only - pass emailLogin:false to the MagicLink constructor.
import { MagicLink } from "@thirdweb-dev/wallets"; const wallet = new MagicLink({ apiKey: "YOUR_API_KEY", type: "auth",}); // connect with email or phone number await wallet.connect({ email: "user@example.com",}); // OR await wallet.connect({ phoneNumber: "+123456789",});
Social Login
import { MagicLink } from "@thirdweb-dev/wallets"; const wallet = new MagicLink({ apiKey: "YOUR_API_KEY", type: "auth", // specify which Oauth providers to enable // and the URI to redirect to after the oauth flow is complete oauthOptions: { redirectURI: "https://example.com/foobar", providers: ["google", "facebook"], },}); // connect with a oauth providerawait magic.connect({ oauthProvider: "google",});
Magic Connect
import { MagicLink } from "@thirdweb-dev/wallets"; const wallet = new MagicLink({ apiKey: "YOUR_API_KEY", type: "connect",}); await wallet.connect();
MagicAuthConnectOptions> {}
Create an instance of the MagicLink wallet
The options object includes the following properties:
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 .
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";
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
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 .
oauthOptions (optional)
Specify which oauth providers you support in providers array. This is only relevant if you are using type: 'auth' .
Specify which URI to redirect to after the oauth flow is complete in redirectURI option. If no redirectURI is specified, the user will be redirected to the current page.
You must pass full URL and not just a relative path. For example, "https://example.com/foo" is valid but "/foo" is not.
You can use new URL("/foo", window.location.origin).href to get the full URL from a relative path based on the current origin.
You also need to enable the oauth providers for your apiKey from Magic dashboard .
type OauthOptions = { redirectURI?: string; providers: OauthProvider[];}; type OauthProvider = | "google" | "facebook" | "apple" | "github" | "bitbucket" | "gitlab" | "linkedin" | "twitter" | "discord" | "twitch" | "microsoft";
const wallet = new MagicLink({ apiKey: "YOUR_API_KEY", type: "auth", // specify which Oauth providers to enable oauthOptions: { redirectURI: new URL("/foo", window.location.origin).href, providers: ["google", "facebook", "github", "bitbucket"], },});
chains (optional)
Provide an array of chains you want to support.
Must be an array of Chain objects, from the @thirdweb-dev/chains package.
Auto connect wallet if the user is already logged in.
function autoConnect( options?: MagicAuthConnectOptions,): Promise<string>;
Connect Wallet using Magic Auth or Magic Connect
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.
await wallet.connect({ 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.
await wallet.connect({ 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 redirectURI provided in MagicLink constructor.
await magic.connect({ oauthProvider: "google",});
Additional Configuration
wallet.connect({ chainId: 5,});
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.
Magic Connect
You can call the connect function without any arguments. Calling connect opens the Magic Link's Modal and prompts the user to login via Google or email.
await wallet.connect();
Additional Configuration
wallet.connect({ chainId: 5,});
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.
function connect(options: MagicAuthConnectOptions): Promise<string>;
The options object can include the following properties:
Magic Auth
If you are using type: 'auth' , you can pass any one of the following properties
email- The email address of the userphoneNumber- The phone number of the useroauthProvider- The oauth provider to use for login
Magic Connect
If you are using type: 'connect' , you don't need to pass any arguments to connect function.
let options: MagicAuthConnectOptions;
Disconnect wallet
function disconnect(): Promise<void>;
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();
function getMagic(): InstanceWithExtensions< SDKBase, Array<OAuthExtension>>;
AbstractClientWallet.addListenerfunction addListener( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.emitCalls each of the listeners registered for a given event.
function emit( event: T,): boolean;
AbstractClientWallet.eventNamesReturn an array listing the events for which the emitter has registered listeners.
AbstractClientWallet.getAddressReturns the account address of the connected wallet
function getAddress(): Promise<string>;
AbstractClientWallet.getBalanceReturns the balance of the connected wallet for the specified token address. If no token address is specified, it returns the balance of the native token
function getBalance( tokenAddress: string,): Promise<{ decimals: number; displayValue: string; name: string; symbol: string; value: BigNumber;}>;
AbstractClientWallet.getChainIdReturns the chain id of the network that the wallet is connected to
function getChainId(): Promise<number>;
AbstractClientWallet.getPersonalWalletIf the wallet uses another "personal wallet" under the hood, return it
This is only useful for wallets like Safe or Smart Wallet uses a "personal wallet" under the hood to sign transactions. This method returns that wallet
AbstractClientWallet.getSignerGet ethers Signer object of the connected wallet
function getSigner(): Promise<Signer>;
AbstractClientWallet.listenerCountReturn the number of listeners listening to a given event.
AbstractClientWallet.listenersReturn the listeners registered for a given event.
function listeners( event: T,): Array< ( ) => void>;
let returnType: Array< ( ) => void>;
AbstractClientWallet.offfunction off( event: T, fn?: ( ) => void, context?: any, once?: boolean,): this;
let fn: () => void;
AbstractClientWallet.onAdd a listener for a given event.
function on( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.onceAdd a one-time listener for a given event.
function once( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.removeListenerRemove the listeners of a given event.
function removeListener( event: T, fn?: ( ) => void, context?: any, once?: boolean,): this;
let fn: () => void;
AbstractClientWallet.signMessageSign a message with the connected wallet and return the signature
function signMessage(message: string | Bytes): Promise<string>;
AbstractClientWallet.switchChainSwitch to different Network/Blockchain in the connected wallet
function switchChain(chainId: number): Promise<void>;
AbstractClientWallet.transferTransfers some amount of tokens to the specified address
function transfer( to: string, amount: string | number, currencyAddress: string,): Promise<Omit<TransactionResultWithMetadata<unknown>, "data">>;
AbstractClientWallet.updateChainsUpdate the chains supported by the wallet. This is useful if wallet was initialized with some chains and this needs to be updated without re-initializing the wallet
function updateChains(chains: Array<Chain>): Promise<void>;
AbstractClientWallet.verifySignature Verify the signature of a message. It returns true if the signature is valid, false otherwise
function verifySignature( message: string, signature: string, address: string, _chainId?: number,): Promise<boolean>;
let walletId: string;
let prefixed: string | boolean;