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.
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.
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.
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 :
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 :
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 :
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 :
And for the right shape we'll have this :
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.
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.
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 :
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 !
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 :
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 ?
