Connect wallet with your email

In this guide, we will create a button that allows the user to log in with their email address with Magic Link!

Intro

As web3 is growing, more solutions are becoming available to generate and connect wallets.

Magic link allows the creation and authentication of a wallet through an email address.

In this app, the user can either create or log into the app using just their email address. No setting up accounts, no browser plugins necessary.

Check out our example repository with the project built out on Github.

Flow

The user clicks the connect wallet button, enters their email address and receives an email in their inbox.

They then need to verify themselves by clicking the link inside the email address.

Once they have, they are redirected to our app with their wallet connected!

Setup

To build this app, we need to walk through the following steps.

1. Build a connector for Magic Link
2. Build the button for the Connect Wallet function

info

Prior, to starting to build the app, make sure you have a Magic link account setup.

Let’s go!

Building the app

Go ahead and clone the starter template repo by running:

npx thirdweb create --next --ts

Build the connector

In the _app.tsx file, we configure the options for the Magic Link connector.

The only required option for the magic link connector is your magic link apiKey which you will be able to find in your magic link dashboard.

// Our Magic Link Wallet Connector configuration
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",
    },
  },
};

Make sure to pass the magic link connector option to the <ThirdwebProvider /> walletConnectors prop like so:

return (
  <ThirdwebProvider
    desiredChainId={activeChainId}
    walletConnectors={[magicLinkWalletConnector]}
  >
    <Component {...pageProps} />
  </ThirdwebProvider>
);

Check out the full file.

Create our UI

thirdweb’s sdk has a simple hook to get the connect wallet functionality for Magic link.

First, we import that and set it up.

import { useAddress, useDisconnect, useMagic } from "@thirdweb-dev/react";

//inside your app
const Home = () => {
  const connectWithMagic = useMagic(); // Hook to connect with Magic Link.
};

Next, we’ll set up a way for the user to input their email address

//inside your app
const Home: NextPage = () => {
    const [email, setEmail] = useState("");

<input
  type="email"
  placeholder="Your Email Address"
  className={styles.textInput}
  onChange={(e) => setEmail(e.target.value)}
/>

Finally, we’ll pass the email address to our useMagic hook to create the wallet and allow the user to start the authentication process.

<a className={styles.mainButton} onClick={() => connectWithMagic({ email }) Login </a>

That’s it!

That’s how you build a functionality that lets the user log in with their email address.

Feel free to go to the repo on Github to get a full copy and start using the Magic Link wallet.