Section 2 (Lesson 8/8): In this lesson, we’ll focus on a crucial aspect of user management: password resets. This lesson covers the end-to-end process of signing up a user, testing the login workflow, and implementing a secure and efficient password reset process.

What you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Welcome back. Three things we need to do in this final lesson in this section is sign someone up, test the workflow, log them in to test the workflow, and also reset their password. And during these phases, we'll also be logging them out, so that's a third workflow that we'll look at. Let's dive in!

Okay, go ahead and preview your sign-up page. So we need to sign ourselves up as an admin, okay? And admins have special privileges and access to all of the data. So we do need an admin type role. So for now, we're just going to log in with our own personal email addresses just to test the signup flow, and we'll just select "I'm a Company" for now, but we will actually adapt this data in the backend, okay?

Now, I need you to type in a real email address here, okay? Because we need to test resetting passwords. Now, I'm going to type in my Buildcamp email address, just my support address, and then a password. And then I'm going to check "I agree to the terms of service." Sign up. You saw that the bar flashed across the top. That means a workflow has been ran. And naturally, if the rest of the app was built, we would take them to their relevant dashboard. For now, let's jump back into the Editor.

So head across to the Data tab. And in App data, here I can see I've successfully signed up, guys. So if I click on this pencil icon, we can see that this is the current date. Here's my email address, [email protected], and we've got a Created Date. And by default, every record in the database has one of these, it's called a Unique id. And it's a nice way to be able to uniquely identify any kind of record in the database. And we'll be using Unique ids to determine certain functionality on the page later on.

Now, I'm going to just take you to a page called "scratchpad," and this is just a place to test certain functionality. So I'd like you to do the same. So go ahead, create a page called scratchpad, and I'll see you there.

So I'm just going to name this "Scratchpad." This page will be deleted by the time I deploy this application. I'm going to change it to... I'm just going to say "Align to parent" for now. 1400, so whatever our place will be in the center.

Now, I want you to grab some text and make sure you ran that workflow and that you can find yourself in the database, okay? I want you to drop the text in the center. And then just type "Logged in: ". Now I want you to choose this little "Insert dynamic data" button here. So if I click that, what we're going to be doing now is displaying the current user's email address. And you'll hear the term Current User throughout the course. The current user is the person holding the mouse. So you are the current user. I am the current user when I look at this page, okay, so the perspective of the person using your application, logged in, looking at the page. They are the current user.

So I'm going to type. So I'm going to select the current user. And now Bubble is giving us or returning the data fields. Remember, we added a User Type field? Bubble has an email field by default, and we have a few other built-in fields here as well. So I'm going to say email. Okay. So it should read "Logged in: Current User's email."

Now, if you weren't logged in, when we preview the page, then it would just say "Logged in: " - nothing. There will be nothing there. So to validate that we are logged in, we're looking for the email address to be returned of the current user, which is us. So let's preview this page. And there you go. "Logged in: [email protected]." That is me. I am holding the mouse, I am logged in.

Let's now add a log out workflow to this page, so we can just pop here whenever we need to log out. We will be building logout flows in the next section. So back to the Editor, I'd like you to group this in a group, please. So "Group elements in" a "Column container." This is on the text element. We're not going to name this. This is just a testing page. I'm going to choose min width 320. And now grab a button and drop it inside this new group and say "Log out." Okay, I'm just going to allow this text to expand from the Layout tab on the text element. I'm going to uncheck fixed width, and remove min width, and remove min height. And I'm going to add just a bit more space in here. I know it's just for testing, but there's certain things that I just can't stand, and that is poorly designed stuff. And then on the "Log out" button, I'm just going to remove the fixed width, remove the min width, and set the height to 44.

Okay, so we're currently logged in. Let's run this workflow or add a workflow to log out. So I'm going to add workflow. Guys, you'll laugh at how simple this is. Account --> Log the user out. Isn't that amazing? It's so, so simple, but important at the same time. And then at that stage, think about in real life, if you're logging out of a dashboard or a password-protected area, then you would be navigated either back to the login page or back to the index page. Let's navigate a user back to the login page because that's actually where I want to go to.

So let's have a look at our next workflow, okay? So that's the step one. Step two, we could say Navigation --> Go to page, and simply from the dropdown, select the page you'd like to go to, which is "log-in." Let's try it!

I'm going to click "Log out," and there we go! Back to the login page. Now, let's test logging in. But let's actually first go to the login page and configure the workflow or end the workflow with "Go to page" and then use scratchpad just testing purposes. So I'm going to select my log-in page. I'm going to go back to the Design tab, double-click the "Log in" button, and click "Edit workflow." So we're logging the user in in step one, and we have attached the input email and the password. And now let's Navigate --> Go to page, and choose "scratchpad." So let's try it.

Now, I'm going to type in the incorrect email address on purpose just to show you what happens. Remember, the registered email for me is [email protected], so if I put an incorrect email address or cannot find the email address (I'm currently using the ARC browser, so it might look a little bit different to yours but), this is a browser-based error message. And it says, "We didn't find an account with those login credentials." Okay, so Bubble takes care of it for us. When you get slightly more advanced, you can actually set up your own messages through workflows, and you can design those exactly how you like, and then feed the message into that popup. You can also even change the app language to say something else. But for now, I'm going to log myself back in. There we go, I'm logged back in. I'm going to log out again.

Now, before we test the password flow, remember when we signed up that we used an email confirmation method, an email that was going to be sent to our email address that we signed up with? Now, hopefully, you didn't sign up with [email protected], otherwise, my inbox will be flooded. Hopefully, you used your own real email address like I mentioned. Pop into that email address and have a look at the email that Bubble sent you! I've got it on my phone. So I have an email confirmation from the name, the app ID, and it says something along the lines of, "Hello, thank you for signing up. Please click to confirm your email." If I click here to confirm my email address, it then takes me to that page on my particular app. Perfect. So with my email confirmed, we can now move on to the "Forgot your password?" flow.

So I'm going to click on "Forgot your password?" and I'm going to type in my email address. And then "Send email." I'm going to pick up my phone. And I've got a new email that says something along the lines of, "Your password reset request from Workplace." At the bottom, it says, "Reset here." I'm going to click that. And off it takes me to a password reset page, and that definitely need some styling, so let's do that next.

Now, this is a built-in page. Please don't delete it, but we can restyle it. If this is deleted, that password reset won't work. So let's first see what we have here. So we have a "Confirm" button with two inputs. And no workflows. Fine. Let's actually just delete this stuff, or do it customized to how we would like it. Let's first say page title is "Reset password | Workplace." And on the Layout tab, I'm going to say a column. 1400 by 768. Height doesn't matter, it's determined by what's on the page.

I'm going to grab some text, drop it on the page. Let's type "Reset your password," and let's choose a Heading 4 this time. I'm going to center-align this text. Now I'm going to grab some more text, and I'm going to say "Please choose a new password and make it secure!" Okay, let's group these two elements together now, please. Right-click with both highlighted, holding shift, and then "Column container." We can call this "Group Title and subtitle." On the Layout tab, let's add some gap spacing of 8. I'm going to fit width to content, but I am going to make the min width - sorry, I'm not going to fit width to content. I'm going to choose a max width, 380. I'm going to horizontally align this in the center. Okay, there it is there.

And now I'm going I'm going to go back to my page "reset_pw," and set this to "Align to parent," and then just drag this down to the center. Okay, so this reset password text, remove the fixed width on the Layout tab, remove the min width and the min height, and do the same to the subtitle text. Remove the fixed width, remove the min width, remove the min height. Let's center-align it from the Appearance tab. Perfect.

We need some inputs, folks. So I'm going to go down and grab an input. And let's get it inside this particular group we've just created. And here, I'm going to hold option and eight. And just use eight dots here or eight stars. I'm going to say content format is "Password."

On the Layout tab, I'm going to let it span edge to edge by unchecking fixed width. I'm going to remove the min width and set the height to 44. Then I'm going to make "Next." I'll move it next. I'm going to copy and paste it one more time, and this time I'm going to just rename it to "Input Confirm password." This input should not be empty.

So this is one stage where we do actually need a double password confirmation. Back on the top one, I'm going to name this "Input password." Now, we do need little labels here because we've chosen this particular style, and we could have just used a placeholder that says "Type your password," "Confirm your password," it's up to you, I just want to show, give you two different options for basically designing your inputs.

So let's grab some text here. There's some text there, and let's drop it in between the subtitle and the top input. And let's just say in all caps, "PASSWORD" and for this, we're going to choose Body Small. And I want it even smaller. So now I'm going to choose, I'm going to override the style and choose 12 pixels. And I'm going to make it bolder because it's so small at Semi Bold 600. Then on the Layout tab, remove fixed width, remove min width, remove min height, and fit width to content.

Now take the password and the email and group them together. Group in a column. We're going to call this "Group Label and input." And just take this password, Command+C, I'm going to paste it back in, and then move it into position from the Layout tab, so Previous, and then just change it to Password Confirmation. And then group these two together and repeat yourself again. Column container. Label and input.

Back on... Group Title and subtitle, this can actually be... I see. I see we're all in the same group, so we need to be in different groups here. So let's rather name this Group (Group Title and subtitle) Group Container. On the Layout tab, let's choose 32. And now we can select these two (the "Reset your password" and "Please choose a new password, make it secure" texts), Group them in a Column container. Call this "Group Title and subtitle," and apply a gap spacing of 8.

And one more group, folks. First of all, actually, we have our two groups here. These need a bit of gap spacing, so let's choose 4 for each. This is Group Label and input, four, and then four. And we'll get to the logic very soon. Then highlight both of the Group Label and inputs, right-click, "Group elements in" --> a "Column container." Name this "Group Inputs." And then let's apply some 12 pixels of gap spacing.

Okay. Right. So now we need our button. So grab a button, just get it inside the group first of all. Say "Change password." Last bit of styling, folks, but I hope you're learning the patterns of the particular design system I've set up. All right, so 44 min height, fit height to content, it doesn't matter if it's checked, we can also fix the height if we wanted at 44, and let's just "Make last."

Okay, let's run this workflow. So we're going to add workflow. Now for step one, type the word "reset," and we're going to choose "Reset password." Now let's attach. So in the Password field we want to type "Input password's value," and for Confirmation, "Input Confirm password's value." And you see "password's strength" exists here as well. So in Bubble, in the settings area, we can set the type of password strength and combination that we're looking for. It does require a little bit of logic to be able to feedback to a user that they have a capital letter, that they have an exclamation, that is a certain length, but there are plugins that community members have created for us, okay, so have a look at password strength plugins if that's something you would like to utilize, I suggest it would be a good idea.

So after resetting the password, let's then navigate, and let's just take them anywhere for now. But naturally, it would be to where they're supposed to go, which is their unique dashboard, but we'll send them to the index page. Okay.

Let's just test the responsive design very quickly. 768, 375. Okay. So what we do need, if you pop into the Responsive tab and then click on Group Container, on the Layout tab, just add 16 pixels of left and right padding, not margin guys, padding. Okay. And it's in the latest section that we will be testing this particular workflow.

But folks, for now, the section is done! I think we covered quite a lot of ground. Authentication is very, very important. It needs to be done correctly. Otherwise, your users won't sign up with the correct data, they won't be able to log in, they won't be able to change their password, confirm email. We need this information to be able to handle the user experience that we're trying to create here, which is clean, easy to understand, great UX and design. And design drives trust, or good design drives trust, which is why we took so long with this form. I wouldn't accept just the default reset password that we've set up. We've designed it in a way that we want you to place your stamp on it. We want you to redesign it so it matches your app. So we've kept it simple for that particular reason. But here we are. I think what we've done is fantastic so far. Take a big break, congratulate yourself, and I'll see you in the next section.