🦊Sign In With MetaMask

Allow users to create and log into accounts using their MetaMask wallet.

In this guide, I'm going to teach you how to use The Web3 Toolbox to create a web3 native user onboarding flow in your Bubble.io app.

Signing in with a wallet is a great way to let users start using your app without needing to provide personal details such as their email or name.

All a user needs to do is connect, then sign a message with their wallet.

First, we will need to install The Web3 Toolbox plugin into our Bubble project. Our plugin is totally free to install and get started right away!

Located using the plugin tab on the left of the screen.

Once installed, we will need to drop the “Wallet Actions” element onto the page. This will give us access to all the wallet features the plugin offers.

Drop this element anywhere on the page.

Now, we are going to want a button on the page that when clicked, will trigger the signup/sign-in flow for the user.

Let’s start with our workflows. Select the button, then press “Start/Edit Workflow” in the inspector to open up the workflow tab for this button.

We are going to use the “Connect To Web3 Modal” action. When triggered, this will open up a modal that will allow the user to choose from the few different types of wallets we currently support.

Next, we need to add a conditional statement to this workflow, that will only allow it to trigger when the user’s wallet is not connected already.

The conditional is typed in the box that says “Only when” copy the value we have pictured below, making sure to select “no” at the end.

Okay great, so we have set up this workflow to allow the user to connect their wallet by pressing the “Connect Wallet” button, only if their wallet isn't already connected.

An example of the Modal that will show in your app when the connect button is clicked.

Now we are going to duplicate this workflow, and change the conditional statement to only allow this duplicate workflow to trigger when the user’s wallet is connected.

You can copy and paste workflows to duplicate them.

We will trigger the “Sign Message” action in this workflow.

We have two workflows that will trigger from the same button according to the conditional statements set up.

The resulting signature from the “sign message” action will be used as the user’s password. The signature will be different for every wallet that signs the message, thanks to the complicated world of cryptography.

Learn more about signatures here.

Once you set this message for users to sign, you cannot change it. If the message being signed changes, the resulting signature will change, therefore changing the user’s password.

The message we are signing is "Welcome to The Web3 Toolbox".

So to recap, we have one button on our page with two different workflows that will be triggered based on if the user’s wallet is connected or not.

Awesome! Now we have all the information from the user we need to sign them up or log them in.

The next step is we are going to set up an event that will trigger once the user has signed the message. The Web3 Toolbox has an event that triggers for just about every action which makes it easy to replicate async functionality in your workflows.

Select the Message Signed event in the elements tab.

Once the user signs the message this workflow will automatically execute.

The first action we will use for this workflow is “Sign the user up” provided by Bubble.

Because Bubble does not natively support web3 need to implement a simple workaround to make this work.

For the user’s email, we are going to use the connected wallet address which will look something like 0x98Fd17F691686Fef33C0882Fc5E1FD13AF6F014E.

Bubble is designed to actually take in an email address for this field (obviously), so what we must do is append “@mail.com” to the end of our wallet address.

For the user’s password, we are going to use the resulting signature from the message we signed which is exposed as a state on the wallet actions element.

We need a conditional statement on this “Sign the user up” action so it will only run if there are no users signed up already, with the email we are using.

As you can see, we are searching for all users who have the exact email we are signing up with. If the first item is empty, that means there are no users with this email.

Notice the :lowercase operator after the email address in the search, this is needed because Bubble saves email addresses as all lowercase. ETH wallet addresses have a mixture of lowercase and uppercase letters which will throw the search results off.

Searching for any users who have this email address already.

The next step in the workflow is going to be the “Log the user in” action that will use the same user information as the signup action.

Logging the user in.

This will also have a conditional statement, only allowing it to run if there is a user signed up already with the email we are using.

As you can see, we are searching for all users who have the exact email we are signing in with.

If the first item is NOT empty, that means there is a user with this email.

Checking to see if there is a user that has this exact email already.

Make sure that your app’s privacy settings allow for the user’s email to be searched by anyone.

Everyone else (default permissions) needs "Find this in searches" and "email" checked.

Congrats!!! You have now set up your web3 login flow! 🎉 🎉 🎉

An edge case to keep in mind is that many web3 users have more than one wallet within their MetaMask extension.

If a user is logged into their Bubble account, then they switch their wallet to another account within their Metamask. You need to handle this within the app.

This can be accomplished by using the “Account Changed” event to trigger a sign-out action and then running this flow whole flow again to make sure the connected wallet and Bubble user account are always in sync.

Visit The Web3 Toolbox

Sign up for a Bubble Account

Happy building, WAGMI! 🚀 💜