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

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

Look at the example below; while I’m entering the password, it displays in dots, and the icon is hidden view. When I clicked on that icon, it changed to the view icon, and the text I entered in the password fields changed to text format.

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.

2. Provide the formula below for the OnVisible property of the Screen. To hide the password by default when we open this page.

Set(SecurePassword,true);

3. 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.

4. Add the below code to the Icon property of the view icon to change the icon based on the mode of the password text.

If(SecurePassword=true,Icon.Hide,Icon.View)

5. 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:

• Power Apps Modern Button Control
• Trigger an Action When the Enter Key is Pressed in Power Apps
• How to show/hide buttons based on conditions in Power Apps
• How to apply multiple filters on the Power Apps gallery?
• Power Apps search function
• How to filter the Power Apps gallery