magicLink

A wallet configurator for Magic Wallet which allows integrating the wallet with React

import { magicLink } from "@thirdweb-dev/react";

const magicLinkConfig = magicLink({
  apiKey: "MAGIC_API_KEY,
  type: 'auth' // or 'connect'
});

customize (optional)

magicLinkConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const magicLinkConfig = magicLink({ ... });

// override metadata
magicLinkConfig.meta.name = "..."; // change the name
magicLinkConfig.meta.iconURL = "..."; // change the icon
magicLinkConfig.meta.urls = {
  // change urls to download the wallet on various platforms
  android: "https://...",
  ios: "https://...",
  chrome: "https://...",
  firefox: "https://...",
};

// override connection UI
magicLinkConfig.connectUI = MagicLinkConnectUI; // react component

// custom selection UI
magicLinkConfig.selectUI = MagicLinkSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[magicLinkConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(magicLinkConfig, { ... });

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' in your config.

{
  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 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

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

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

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.

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.

caution

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.

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

You also need to enable the oauth providers for your apiKey from Magic dashboard.

Type

type OauthOptions = {
  redirectURI?: string;
  providers: OauthProvider[];
};

type OauthProvider =
  | "google"
  | "facebook"
  | "apple"
  | "github"
  | "bitbucket"
  | "gitlab"
  | "linkedin"
  | "twitter"
  | "discord"
  | "twitch"
  | "microsoft";

Example

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"],
  },
});

Usage with ConnectWallet

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  supportedWallets={[
    magicLink({
      apiKey: "MAGIC_API_KEY",
    }),
  ]}
  clientId="your-client-id"
>
  <YourApp />
</ThirdwebProvider>

Usage with useConnect

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

Calling connect opens the Magic's Modal and prompts the user to either enter an OTP sent to their phoneNumber or click on the link sent to their email.

const magicLinkConfig = magicLink({
  apiKey: "MAGIC_API_KEY",
});

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(magicLinkConfig, connectOptions);
  };

  return <div> ... </div>;
}

connectOptions

Magic Auth

{
  // one of these is required
  email?: string;
  phoneNumber?: string;
  oauthProvider?: OauthProvider;

  chainId?: number;
}

There are three ways to call the connect function - email or phoneNumber or oauthProvider

email

This opens the Magic Link's Modal and prompts the user to click on the link sent to their email.

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.

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 function.

connect({
  oauthProvider: "google",
});

chainId (optional)

If chainId is provided, wallet will be connected and immediately switch to network with given chainId.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}

Magic Connect

{
  chainId?: number;
}

chainId (optional)

If chainId is provided, wallet will be connected and immediately switch to network with given chainId.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}