Creating a login page for your Bubble.io no code web app is certainly a critical part of your app’s design. And creating a strong account password is a big part of making sure your User’s account stays secured. The Bubble team introduced a nice “password strength” feature which allows you to provide your Users feedback on how good/strong their password is. This capability is a great UX feature enabling you to provide your Users with real-time feedback on their password. Watch the following video to get details on how to implement password strength in your Bubble.io no code web app.
Setting up this feature is fairly straightforward. You first need to determine the different levels of password strength you want your app to have, for example, “Weak”, “Medium” and “Strong”. Bubble automatically does a “strength” calculation based on the password being typed in. The values range from 0 (weak) to 100 (strong).
Since Bubble provides you a numeric value, you need to determine which range of values correspond to the different strength levels in your app. For instance, you might want a range of 0-39 to be designated as a Weak password strength, 40-79 is a Medium password strength and 80-100 is a Strong password strength.
You’ll want to have a default text with something like “Weak password” which is invisible until your app’s User starts typing in a password value (then make “Weak password” text visible).
You’ll need to have Conditionals setup for your text field such that the text changes based on the value of “password strength” (a Conditional field option which is calculated for you by Bubble). In the image below is an example of Conditionals setup to support Medium and Strong password strengths. Notice the text value changes depending on the value of “password strength”. Since you don’t have access to Bubble’s algorithm that calculates the password strength value, you can test out different password values and get a “feel” for what the value should be for a certain strength level. For purposes of this post, I chose 40 and 80 as the threshold values.
Watch this video to see the full implementation and try it out in your app.
