Bubble.io Quick-tip Password Strength Indicator

Enhancing App Security with Password Strength Indicators

You could spend a long time ensuring that your Bubble app is as secure as possible. You've checked your privacy rules. You've gone through and you tested all your different user types. But if your users are not signing up with their strong passwords, then that is just a gaping hole in the security of your app and your users' data. So in this quick tutorial video, I'm going to show you how to add a password strength meter to this registration form here.

Setting Up the Password Strength Meter

First of all, I'm going to add in a text box just to illustrate what's going on. And I'm gonna link this to the input which is my password. And I'm gonna go password strength. And then if I hit preview, and I start to write in my password, I've just written test, I get a 10. But if I was to put in, and you'll have to set my words for this, a load of special characters, make it really long and some numbers, you can see it gives us a score of basically naught to 100 on the password strength.

Improving Visual Representation with Progress Bar

Now, you probably want to express that a little bit more beautifully to your users. So we're going to use a progress bar to do that. So we've got the progress bar installed. Let's add in Bubble's progress bar. Let's add this in below the password. Make it full width. And then I like to style this a little bit like this. I get rid of the border. I change the font size down to zero so that you don't get the number on there. I'm gonna make this a deep blue, and then I'll put in a gray in the background.

Configuring the Progress Bar

Okay, and then the percentage is going to be the password field's password strength. So let's try that. So I'm gonna go test and it gets bigger. I'm gonna put some special characters in there and it gets even longer 'cause it's now expressing basically 90%.

Enhancing Visual Appeal with Conditional Styling

Let's make it even more visually appealing so that we really reinforce in our users the importance of a strong password. So to do that, I'm going to add in some conditionals. When password's strength is less than, say less than 30, I then change the bar color to red. And I'll say when the input's password's strength is less than, let's say less than 60, I'm going to make it a yellow. And then when the input's password password strength is, let's say for this one, we've got, we've done less than 60. So let's go for equal to or greater than 60. Make this green.

Understanding Conditional Hierarchy

Okay, now you might have noticed that I'm not putting like a top and tail container. I'm not saying for this one here, if it is equal to more than 30, but less than 60. And that's because I can basically stack them in a hierarchy and that's what Bubble is already doing. So I can see that if this condition applies, it turns it red. But if this condition also applies because it's lower down in the conditional tree here, it takes precedent. And so then if this condition also applies, then it goes green.

Testing and Adjusting the Password Strength Indicator

Let's test that out. So we can say test. Oh, we're not getting a red. I wonder why that is. We go back. So red is when it's less than 30 progress bar red. Hmm. Okay, come back to that. Let's see if we hit the green anyway. Special character, yeah, that's fine. Okay, so the red's not showing. Let's approach this differently. I'll make it by default red. And then, this probably was a better way for starters. We'll say is greater than, this is our yellow, so we'll say is greater than 30. And then we'll say that when this one is equal to or greater than 60.

Final Testing and Implementation

Let's try that. Now we've got the red in there. So we'll start putting in our passwords and make it a bit longer. And so it goes to yellow, and then we put in some special characters, and it goes to green. So there you have it. That is how you can add in a visual clue, a password strength indicator to your users when they are signing up for your app.

Configuring Password Policy in Bubble Settings

Oh, one last thing. In order to reinforce this, you want to go into settings and general and then define the password policy. And this is where you can basically build how restrictive you want to be with your users' passwords, such as minimum length requires a number, that sort of thing.

Conclusion

Yep, so there you have it. That's how to make your Bubble app more secure in a way that you can't necessarily control, but you can prompt your users to put good, strong, and unique passwords into the app.