Bubble.io tutorials

How to build a bubble.io password strength indicator ? (without plugin)

Thomas COUDERQ
March 18, 2024
bubble ui kit nocodablebubble ui kit nocodable

Cybersecurity is a serious concern and you need to take it into account when your build a product, and Bubble is no exception to this.

Natively, Bubble comes with a bunch of functionalities to help you build secure apps like privacy rules.

But one feature that is clearly not used enough is the password strength policy.

In short, it enables you to create a policy that your users need to follow when creating their password.

It forces them to create strong passwords, which in turns improves your app's security.

That's a great improvement in itself.

But if you simply do this, you may end hurting your app's User Experience.

Because you know the struggle of finding a password that complies with the password policy. And you may already have encountered a website that gives very little clue on your password strength.

Well that's what we are going to cover in this article : How to create a good password strength indicator, without any plugin.

Let's get going.

Note : To go further, you can also read our article on how to show password in Bubble.

(Optional, but recommended) Setting up a password strength policy

As mentioned earlier, Bubble gives you the ability to customize your app's password policy.

To edit it, simply go to your app's Settings --> General --> and check "Define a password policy"

You'll then be able to customize your policy.

When it comes to security in Bubble.io, I personally follow Flusk's advices. For password policy they recommend setting the length to at least 8 characters and check all the options below.

If you want to learn more about Bubble.io security, they have an amazing free eBook I can't recommend enough.

bubble password strength policy

Once you've set this up, users will need to comply to this policy when signing up.

But be careful, they won't have any indication on your policy yet. We'll set this in the next step.

Creating our password strength indicator

Not comes a crucial step for your UX.

We've defined a password policy that ensures users creates strong and secure passwords.

But right now, they don't have any clue of this, and they'll get frustrated when trying to signup because they don't know what type of password your app expects.

To resolve this, I'm going to show how to build this type of password strength indicator.

bubble.io example of a password strength indicator

As you can see in the screenshot above, this indicator is pretty basic, but it gives a visual indication on the user's password strength.

Step 1 - Build your interface

As always, I'll start by building my signup page.

To save time, I chose a component from Nocodable's Components library and imported it to my app.

bubble.io login signup page template

Then I'll create a simple indicator by adding a group below my password input element and set it's layout to Row.

Inside of it, I'll then add 3 Shape elements :

bubble.io password security check

By default, I've set their color to gray. We'll use conditional to give them their colors based on the password strength.

Step 2 - Making our password strength indicator work

Now that we've built our interface we need to actually make it work (i.e making the indicator change color based on the password robustness.

By default, Bubble password inputs comes with a "Password strength" parameter that returns a value between 0 to 100 (100 is a very strong password, 0 is a very weak password).

If you don't see this parameter in your conditionals, make sure that your input element "Content format" is set to "Password"

It takes into account several parameters such as the password minimum length, whether it contains special characters, uppercase letters, numbers etc...

And this is precisely what we are going to use to give real time feedback that guides users into creating robust passwords.

Remember the shapes we added earlier ? Let's get back to them !

The final result we want to achieve is this :

password strength indicator in bubble

According to threshold values, the shapes are changing colors to indicate the password strength.

Nothing too complicated, all we need is a few conditionals.

We'll start by the shape on the left of our indicator :

This one indicates a weak password, so it will be red when the password strength is not high enough, and will progressively change color when the next strength threshold is crossed.

Translated as a conditional, it gives us this :

checking password strength in bubble.io

As you can see, the shape's color will be red when the password strength is under 50 (out of 100), orange when the strength is between 50 and 75 and green when it is above 75.

Now, all we need to do is repeat this conditions for the other shapes, and remove the one of the top for each threshold values.

So for the middle shape, we'll have this :

password strength plugin for bubble

And for the right shape we'll have this :

password robustness bubble.io

And there you go, your password strength indicator is now working perfectly !

This way, your app will give a clear real time feedback to your users, and you'll make that they have strong passwords, that keeps their data secured !

(Optional, but recommended) Step 3 - Indicating password policy requirements

Remember when we set up a password strength policy at the beginning of the article ?

Well one good thing for our users would be to actually tell them what they are supposed to insert into their password !

To do this, we can build a simple policy indicator to tell me what we expect, and check in realtime if their password includes each parameter or not.

bubble.io password policy check

In the screenshot above, you can see that this system checks each requirement and update the color and the icon of each parameter.

Detecting password length

The first and easiest step will be to detect the actual password length (i.e its number of characters). T

o do this, simply add the following conditional into your app, and make it modify the icon and the color of the icon and the text.

bubble.io password length

As you can see, nothing too difficult for this one.

Detecting Uppercase letters

Alright, now we enter a more complex realm, the realm of REGEX.

In short, they are little snippet of a specific language called Regular Expression that we can used to find and extract specific patterns.

In this case, we are going to use some Regex to detect the presence of an Uppercase letter in our password input field.

To do this, you can add the following condition :

bubble.io detecting uppercase letters in password

As you can see, this condition is slightly different from the one before since I've used the ":extract with Regex" operator and the ":first item is not empty" condition.

What this condition does is check for the presence of an uppercase letters and returns the list of result found.

If the first item is not empty (i.e if there is at least ont result), then the condition is verified !

Here is the Regex you need to use : .*[A-Z].*

Detecting numbers

To detect the presence of numbers in our password, we'll apply the same method, which is using a Regex !

bubble.io detecting numbers in password

Obviously this time we'll check for the presence of a number.

The regex you need to use is : .*[0-9].*

Detecting special characters

And finally, now we need to be able to detect special characters !

To do this, we'll once again use a Regex :

bubble.io detecting special characters in password

The Regex you need to use is : .*[#$^+=!*()@%&].*

And there you go !

You've built a complete password strength indicator system in your Bubble app, without needing any plugins.

With those visual elements, your users will easily following your password requirements and create truly secure passwords.

How amazing is that ?

Latest Articles