worldspaceinc / magic-link

Connect users to your dApp using just their email using thirdweb's useMagic hook!

Magic Link Wallet Connection

This project demonstrates how to use Magic Link with thirdweb using the useMagic hook from the thirdweb React SDK.

Magic Link enables users to connect to your dApp using email, phone number, or social login.

Check out the Demo here: https://magic-link.thirdweb-example.com

Tools:

• thirdweb React SDK: We're using the useAddress, useMagic, and useDisconnect hooks from our React SDK to enable users to connect/disconnect to your dApp via their wallets, and to show information about their connected wallet.
• thirdweb TypeScript SDK: We're using the ThirdwebProvider to configure the Network we want our user's to be on, and to configure the Magic Link Wallet Connector with our API key.
• Magic Link: Under the hood, thirdweb's useMagic hook uses the Magic Link Web SDK to connect user's wallets to their email, phone number, or social media accounts.
• Next.JS: Next.JS isn't really necessary for this project, but it's nice to have if you want to build more advanced features in the future.

Using This Repo

• Create an account at https://magic.link/

• Copy your Publishable API Key from the Magic Link dashboard.

• Create a .env.local file at the root of your project, and add your key in the format: NEXT_PUBLIC_MAGIC_LINK_API_KEY=xxx, like as it is in .env.example.

• Clone this example project by running:

npx thirdweb create --template magic-link

Guide

Setting Up Magic Link WalletConnector

Over in _app.tsx we are wrapping our application with the ThirdwebProvider component, which allows us to configure the Network we want our user's to be on, and to configure the Magic Link Wallet Connector with our API key.

<ThirdwebProvider desiredChainId={activeChainId} walletConnectors={connectors}>
  <Component {...pageProps} />
</ThirdwebProvider>

Configuring the Network

const activeChainId = ChainId.Mumbai;

Configuring the Magic Link Wallet Connector

const magicLinkWalletConnector: WalletConnector = {
  name: "magic",
  options: {
    // Replace this with your own magic link api key
    apiKey: process.env.NEXT_PUBLIC_MAGIC_LINK_API_KEY as string,
    rpcUrls: {
      [ChainId.Mumbai]: "https://mumbai.magic.io/rpc",
    },
  },
};

Logging Users In Via Email

On the Home Page, we are using the useMagic hook to connect user's wallets' by submitting their email address.

Once the user enters their email and clicks the Login button, they will be connected to their wallet via a Magic Link (email with a link is sent to the user's email - they are signed in after they click this link).

const connectWithMagic = useMagic();

// ...

<a onClick={() => connectWithMagic({ email })}>Login</a>;

Once they're connected, we grab their address using the useAddress hook and hide the form!

const address = useAddress();

If the user wants to disconnect at any time, we allow them to, using the useDisconnect hook.

const disconnectWallet = useDisconnect();

---

Join our Discord!

For any questions, suggestions, join our discord at https://discord.gg/thirdweb.