Skip to main content

Section 4: Start Working With Logic - Create a user sign-up flow (Lesson 4.2)

Sofia Maconi avatar
Written by Sofia Maconi
Updated over 2 months ago

Transcript

Let's explore the actual process of signing up a user to our app.

And Bubble AI went ahead and created this sign-up page for me.

So, we have a name input that is type: content format text. We have an email input with content format: email. And this is important because Bubble would be looking for an actual email from this input.


If an email is not typed, we need to set up guardrails to prevent someone from trying to sign up — because it won't work.

At minimum, to sign someone up to our app, we need an email and a password, which is why in the password field we have content format: password.


And this means that we won't see the characters typed — we'll just see dots.

Let's see what we have so far.

If I click on the sign-up button and edit workflow, I can see that we have a few steps. Fantastic.


If I click on step number one, Sign the user up, I can see that Bubble AI has connected the email's value to the email — great — and the password's value to the password.

But I notice there's also a name input. Well, let's add that now.

I can change another field, select Name, and then point the name field to the name input.


I scroll down — here it is.


Here, the value is what we're capturing.

We could also create two password input fields if we like — one for confirmation — by checking this box.


And we can also send a user an email to confirm the email, and we can build that logic ourselves.

Something else I wanted to do is to make sure that all of these inputs are collected.


Because in my app, when I sign someone up, I also want to subscribe them to a mailing list, and I'd like to use their first name for marketing purposes.

So I'm going to check this input that says, This input should not be empty. Check.


I'm going to do the same for email. And I'm going to do the same for password.

This is called form validation, and it just helps guide a user through the process and make sure that we're collecting the data that we need.

Let's preview our app.

Okay, so I'm going to intentionally leave out the name so we can test our form validation.


But I'm going to type my email and then our password.

If I try to click Sign Up, you can see that I cannot sign up — and Bubble has focused the name input.


Okay, fantastic. So form validation is working as intended.

I'm going to go ahead and sign up.

Okay, so something definitely happened there.


And it looks like I have a log out button — so that probably means that I am actually logged in at this stage and signed up.

Let's have a look at the data. Go down to App Data. And here we go — here is my data.


I'm signed up, and I'm currently logged in as well.

Did this answer your question?