Enable users to choose stronger passwords

How-to Add Password Strength Indicator to Your Bubble.is App

Creating a login page for your Bubble.is 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 has recently 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.is app.

VIDEO: How to add Password Strength to Your Bubble.is 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).

Enable users to choose stronger passwords
Example of Login screen with “Weak password”

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.

Example of Conditional setup to support different password strengths

Watch this video to see the full implementation and try it out in your app.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s