How to Create a User Login Workflow In Bubble

Creating a Simple User Registration Workflow

In this video, I'm going to demonstrate how to create a simple user registration workflow. So I have some basics of a registration page here, and I'm going to start building up my form in this group. Let's create a label first, and we're just going to cover the basics. We're going to take an email, and we're going to take a password.

Setting Up Input Fields

So we need an input field so the user can put text in. And I'm going to make that 100%. And then I'm going to swap the content format. That tells it to check that the text that's entered by the user is indeed an email address. And I also need to ensure that the input should not be empty. And I'm going to group these together into a column. And set the column width to 100. These are just little things that if you ever wanted to make this page responsive, you've already given yourself a head start.

Organizing the Form Layout

And then that allows me to copy that. And I'm going to put both of these into a group of a column, and you'll see why in just a second. So this is also width, 100%. And by putting both in the column, I can then select the parent group. Here you go, called group F. I can go layout and I can apply a gap. And that just means that if I wanted to add in, for example, a first name, all the gaps are taken care of. I could do this manually by putting like a margin, but then if I decide to change that, I'd have to change it in every single instance, every single kind of row of fields on this form.

Adding a Registration Button

So let's keep it as email and password for now. And then the, oh, more update plus the placeholder. And then the one thing that's missing now is a button. And, oops, width 100%. And so the button also gets the row gap applied to it too, which is nice, so I'll make that last. Give it a label.

Creating the Registration Workflow

So let's work on the workflow. So I'm going to start a workflow. When button register now is clicked, I'm going to go into account and sign the user up. And then I match up the fields here. So we've got input your email address and its value. Same for password, but instead it's the password field. And then we'll probably cover these options here in future tutorials.

Testing the Registration Process

But right now, if the user, let's go preview. If the visitor to my website, who I want to transform into a user by taking them through the registration process, if they were to fill in this form and hit register, they would then end up as a user in my Bubble database. But they're still going to end up on this page.

Adding Navigation After Registration

So this is an easy thing to miss and forget, but we should add in a navigation here to another page, such as a profile or like a dashboard or maybe even the index page of your app, just wherever you want your user to end up after they've registered. That's an easy thing to miss.

Considering Additional Steps

And then you saw there that Bubble sometimes gives a little bit of a prompt of what step you might want to take next in your workflow. So you could send an email, but you can't put any steps after navigation step unless the navigation step has gotten only when statement because it won't be able to complete the workflow if we've already sent the user to another page in step two.

Sending a Welcome Email

So if you do want to send a welcome email, I'd recommend putting it before the navigation. And after they've signed up so that you can refer back to, well, so once they've signed up, you can refer to them as current user. So you can take the current user's email because from the moment step one completes, they're logged in and they are registered.