Bubble.io Quick-tip Password Strength Indicator

Are you looking to enhance your Bubble.io app security? Look no further! In this video, we'll be sharing a quick and easy tip to help improve your app's security by adding a password strength indicator. A strong password is crucial for user privacy and security, and with this awesome Bubble.io feature, you can ensure that your app users are creating robust passwords.

Still stuck?

Join an expert Bubble coach on Zoom.
Learn more
Bubble coaching learn no-code

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.

Password field

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. So first of all, I'm going to add in a text box just to illustrate what's going on. And I'm going to link this to the input, which is my password, and I'm going to 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 ten. But if I was to put in and you'll have to take 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 0 to 100 on the password strength. Now, you probably want to express that a little bit more beautifully to your users.

How to show password stength on a progress bar

So we're going to use a progress bar to do that. Have I got the progress bar installed. No, let's add in Bubble's progress bar. I'll 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 going to make this the deep blue, and then I put in a grey in the background. Okay, and then the percentage is going to be the password's field's password strength.

How to change a progress bar color

So let's try that. So I'm going to go test and it gets bigger. I'm going to put some special characters in there and it gets even longer because it's now expressing basically 90%. 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. So when passwords strength is less than 30, I then change the bar color to red. And I'll say when the input's password strength is less than 30, let's say less than 60.

I'm going to make it a yellow. And then when the input password strength is... Let's say for this one, we've done less than 60, so let's go for equal to or greater than 60. Let me make this green.

Okay, now you might have noticed that I'm not putting 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 do. 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. So let's test that out.

So we can say test. Oh, we're not getting a red. I wonder why that is. Let me go back. So red is when it's less than 30 progress bar red. Okay, come back to that. Let's see if we hit the green anyway. Special characters in. 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 to do it 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. Let's try that. Now we've got the red in there.

So we 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.

Don't forget to define a password policy in settings

Oh, one last thing. When you're 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 restricted you want to be with your user's password, such as minimum length, requires a number, that thing. Yeah, 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.