How to Show/Hide Password in Power Apps Login Page?

by

A few weeks before, I developed a login application in Power Apps. In the login screen, when entering credentials like user ID and password, I was required to hide the password until we clicked on the view icon/eye icon. With the help of the toggle variable, I achieved this!

In this article, I will explain how to show/hide password in Power Apps login page using a simple scenario.

Show/Hide Password in Power Apps Login Page

The example below shows that when I enter the password by default, it looks like dots. Once I click the view icon, the password I entered is displayed in text format.

how to show and hide passwords in power apps

To achieve this, follow the steps below!

1. Add the View Icon from the +Insert tab in Power Apps. Then, provide the formula below in its OnSelect property.

Set(SecurePassword,!SecurePassword)

Here, the Set() function creates a variable called SecurePassword, which has the opposite value of its default value.

For example, this variable’s value is false by default. Once we click this icon, its value is set to true again, and if we click again, it changes to false.

how to hide and display password in power apps

2. Provide the below formula in the Mode property for the “password text input control.”

If(SecurePassword,TextMode.Password,TextMode.SingleLine)

This formula will change the text mode based on the value of the SecurePassword variable. If the value is actual, text mode is a password; if it is false, then text mode is single line means text.

show hide password in power apps

3. Now, save the changes and preview the app. The password will be displayed and hidden when you click the view icon.

I hope you understand how to display and hide the password in Power Apps. You can follow this article when creating change and updating password screens in the Power Apps login application.

Also, you may like some Power Apps tutorials:

>