Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 23

Bubble Authentication: Sign-up & Login Workflow

Recommended resources

Welcome back! So far, you've built an impressive collection of standalone tools, from a unit converter to a color code converter, and you've learned how to extend Bubble's power with plugins. Now, we're shifting gears from building individual tools to building the platform that will house them.

This lesson marks the beginning of our module on user authentication. For your multi-tool platform, allowing users to create accounts is the first step toward offering personalized features like saving favorite tools or accessing user-specific perks—a core part of your project goal. Today, we'll build the most fundamental piece of this system: the sign-up and login process. You will learn how to use Bubble's powerful, built-in features to securely register new users and authenticate returning ones.

Part 1: The Built-in User Data Type

Before we build anything, it's helpful to know that Bubble does a lot of the heavy lifting for us. Every Bubble app comes with a special, pre-built data type called User.

If you navigate to the Data tab and look under Data types, you'll see it there. By default, it includes fields for email and an automatically encrypted password. This is fantastic because it means you don't have to worry about the complexities of password security; Bubble handles it.

Of course, you'll likely want to store more than just an email and password. Just like you added custom fields in WordPress, you can add new fields to the User data type here. Let's add one now, as we'll need it for our sign-up form.

  1. Go to the Data tab.
  2. Select the User data type.
  3. Under the list of fields, click Create a new field.
  4. Name the field Name (or username, if you prefer).
  5. Set the Field type to text.
  6. Click Create.

Your User data type is now ready to store a user's name in addition to their login credentials.

Part 2: Designing the Sign-up and Login Interface

A common and user-friendly way to handle sign-up and login is with popups, so the user doesn't have to leave the page they're on. We'll create two popups: one for signing up and one for logging in.

A well-designed form is key. Here's an example of a polished sign-up form layout in the Bubble editor.

This image shows a typical sign-up form with fields for name, email, and password, along with a prominent "Sign Up" button. We will build a similar structure inside a popup.

Instead of walking through every click, the following video provides an excellent, concise guide to building the user interface and the associated workflows. It's very hands-on and aligns perfectly with your learning style.

How to Build a Signup & Login Feature in Bubble.io

This video from the Building With Bubble channel will guide you through creating the popups, input fields, and buttons for both sign-up and login.

First, watch the segment on creating the sign-up form. Pay close attention to how the presenter sets up the popup, adds input fields, and correctly sets their Content format (especially for email and password). Designing the form Next, watch the segment that shows how to build the sign-up workflow. This is where you'll see the core "Sign the user up" action. Building the sign-up workflow

After watching, try to replicate these steps in your own Bubble app. Create the sign-up popup with inputs for Name, Email, and Password, and a "Register" button. Then, build the workflow as shown.

Part 3: The Sign-up and Login Workflows

As you saw in the video, the logic for user authentication is handled by specific workflow actions. Let's break them down.

The Sign-up Workflow

When a user clicks your "Register" button, you trigger a workflow. The key action is Account > Sign the user up.

This diagram shows the fundamental sign-up workflow: an event (a button is clicked) triggers an action ('Sign the user up'), which uses data from an input field.

This action requires you to map your input fields to the correct user properties:

  • Email: Set this to your Input Email's value.
  • Password: Set this to your Input Password's value.

To save the user's name, you click "+ Change another field," select the Name field you created earlier, and set it to Input Name's value.

A crucial part of the user experience is what happens after they sign up. A common practice is to navigate them to a new page, like a user dashboard or a welcome page. You can do this by adding a second step to your workflow: Navigation > Go to page.... For now, you can create a new blank page called dashboard and set the workflow to navigate there.

The Login Workflow

The login process is very similar. You'll create a second popup for logging in, which only needs fields for Email and Password. The workflow is triggered by a "Login" button, and the key action is Account > Log the user in.

Here, you simply map your login form's email and password inputs to the action's properties. After a successful login, you might hide the popup to return the user to the page they were on. This is done with the Element Actions > Hide action, targeting your login popup.

For a detailed written guide that covers these workflows and some extra tips, the following resource is excellent. It's a great companion to the video you just watched.

How to Build a Signup & Login Feature in Bubble.io

This guide from Building with Bubble provides a step-by-step written tutorial for the entire sign-up and login process.

First, read the section on building the registration workflow. It reinforces what you saw in the video, covering the 'Sign the user up' action and adding custom fields. Focus on the explanation of registering a user's account. Next, review the section on the login workflow. This part explains the 'Log the user in' action and also introduces a great UX enhancement: toggling between the popups so a user can easily switch from the sign-up form to the login form, and vice-versa.

Your Task: Build the Full Authentication Flow (20 minutes)

Now it's time to put all the pieces together. Using what you've learned from the video and the article, build the complete sign-up and login experience in your app.

Your goal is to have:

  1. A "Sign Up" button in your app's header that shows a sign-up popup.
  2. The sign-up popup with fields for Name, Email, and Password, which correctly creates a new user and navigates to your dashboard page.
  3. A "Login" button in your header that shows a login popup.
  4. The login popup with fields for Email and Password, which logs in an existing user and then hides itself.
  5. Toggle links on each popup (e.g., "Already have an account? Log in") that hide the current popup and show the other one.

Hint: Pay close attention to naming your elements. Using distinct names for the inputs in your sign-up popup (e.g., Input Email Signup) versus your login popup (e.g., Input Email Login) will make building your workflows much easier and less prone to errors.

Conclusion

Fantastic work! You have now implemented one of the most critical features of any web application: user authentication. This is the gateway to creating a personalized experience for your users and a massive step forward for your multi-tool platform.

Here are the key takeaways from today's lesson:

  • Bubble simplifies user management with a built-in User data type and secure, automatic handling of passwords.
  • The primary workflow actions are Sign the user up for creating new accounts and Log the user in for authenticating existing users.
  • Using popups is an effective way to present sign-up and login forms without interrupting the user's current activity.
  • You can easily create a seamless user experience by adding workflows to toggle between the sign-up and login forms.

In our next lesson, we will complete the authentication cycle. You'll learn how to build a logout function, manage user sessions, and begin controlling what users see based on whether they are logged in or out.