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({}); // 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.
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({});
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;
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.addListener
function addListener( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.emit
Calls each of the listeners registered for a given event.
function emit( event: T,): boolean;
AbstractClientWallet.eventNames
Return an array listing the events for which the emitter has registered listeners.
AbstractClientWallet.getBalance
Returns 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.getPersonalWallet
If 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.getSigner
Get ethers Signer object of the connected wallet
function getSigner(): Promise<Signer>;
AbstractClientWallet.listenerCount
Return the number of listeners listening to a given event.
AbstractClientWallet.listeners
Return the listeners registered for a given event.
function listeners( event: T,): Array< ( ) => void>;
let returnType: Array< ( ) => void>;
AbstractClientWallet.off
function off( event: T, fn?: ( ) => void, context?: any, once?: boolean,): this;
let fn: () => void;
AbstractClientWallet.on
Add a listener for a given event.
function on( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.once
Add a one-time listener for a given event.
function once( event: T, fn: ( ) => void, context?: any,): this;
let fn: () => void;
AbstractClientWallet.removeListener
Remove the listeners of a given event.
function removeListener( event: T, fn?: ( ) => void, context?: any, once?: boolean,): this;
let fn: () => void;
AbstractClientWallet.transfer
Transfers some amount of tokens to the specified address
function transfer( to: string, amount: string | number, currencyAddress: string,): Promise<Omit<TransactionResultWithMetadata<unknown>, "data">>;
AbstractClientWallet.updateChains
Update 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>;