Power Apps Login Page Forgot Password Feature

A few weeks before, I developed a user registration application. There, I needed to add the forgot password functionality to the application so users could create new passwords if they forgot theirs.

In this article, I will explain how to add the forgot password functionality to the Power Apps login page.

Power Apps Login Page Forgot Password Feature

Look at the example below: The “Forgot Password” text appears as a link on the Power Apps login page. When I click on it, I am directed to another screen where I can enter my email address. After submitting the, I receive an email in Outlook with a link that takes me to the Power Apps screen, where I can create a new password.

Here is the SharePoint list that stores all users’ details:

Look at the columns with the data types in the above list.

Column Name	Data Type
User ID	Title
Password	Single line of text
Full Name	Single line of text
Email Address	Single line of text
Phone Number	Single line of text
Age	Number
Department	Choice(IT,HR,Finance, Marketing)

1. Add a text label on the Power Apps login page and provide the formulas below for the given properties.

Text = "Forgot Password?"
OnSelect = Navigate(UserEmails_screen,ScreenTransition.Fade)

Here, UserEmails_screen is the screen name in the Navigate() function. In this screen, we must provide our email address to create a new password.

2. As in the image below, design your screen by adding the following controls to the Power Apps screen.

• Container = To group all controls.
• Home Icon = To navigate back to the login page.
• Button = To trigger the Power Automate flow
• Text input control = To enter the email address.
• Text label = To display “Email Address” on top of text input control.

Home Icon‘s OnSelect property provides the below formula to navigate back to the login screen.

Navigate(Login_screen)

3. Design the new password screen like in the image below by taking the controls I mentioned below.

• Text input controls = For New and confirmed passwords.
• Text labels = For displaying the new and confirmed password names.
• Button control = To create a new password.
• Icons = To display the password fields.

NOTE: Add the code below on the OnVisible property of the below screen.
              Set(VarEmail, Param("email"));

Now, we will create a flow to check whether a provided email address is in the SharePoint list.

• If present, we’ll send the Create New Password Power Apps screen link.
• If not, we’ll inform the user that he is not a part of the organization.

5. To create Power Automate flow from the Power Apps application. Click on the ellipse(…) on the left navigation in the app ->Click on Power Automate.-> Click +Add flow -> Click on +Create new flow.

6. In the flow, the Power Apps (V2) trigger will be there by default -> Click on +Add an input and select it as Email, provide some name “Ask in Power Apps.” -> Then add the Get items action from the SharePoint connector to retrieve the user details.

For the Site Address and List Name, provide the address from the dropdown in the text boxes next to the fields.

7. Add Filter array action to check whether the email address is present in the SharePoint list or not.

Now, under the Parameters, provide the information below:

• From: Provide Body/value from the dynamic content of the Get items action.
• Filter Query:
  • Left Value: item()?[‘Email’]
  • Operator: is equal to
  • Right Value: triggerBody()?[’email’]

8. Add a condition action to check whether the email address is present or not. Provide the condition below.

length(body('Filter_array')) is equal to  0

It returns true when the provided email address is not in the SharePoint list. And false if it is present.

9. Add Send an Email (V2) action under the true section in the condition.

Under Parameters, provide the following values:

• To: Dynamically, take the email address from the Power Apps V2 trigger input.
• Subject: Provide subject.
• Body: Since they are not in the organization, provide the body as shown in the image below.

10. If they are present, we need to send the create new password screen. So, we need to do deep linking. In Power Apps, the App object provides the code below to the StartScreen property.

If(Param("screen") = "New_Password", Set_NewPassword_screen)

Here, Param(“screen”) will fetch the screen value from the URL. Set_NewPassword_screen is the screen name.
So, the screen name from the URL matches the screen we provided here, and then it displays the start screen as Set_NewPassword_screen.

11. Then, open the Details of the application -> Copy the Weblink -> Paste it notepad and remove the “&Source = 1738788…..” from the URL and paste the below one at last like in the below.

https://apps.powerapps.com/play/e/default-798a21d4-ed73-44f4-8cac-c7bde6d52e57/a/afe09d5a-3b10-45b1-9ff8-55935cb7c1c7?tenantId=798a21d4-ed73-44f4-8cac-c7bde6d52e57&screen=New_Password

12. In the flow under the false section, add this URL within the anchor tag’s href.

<a href="https://apps.powerapps.com/play/e/default-798a21d4-ed73-44f4-8cac-c7bde6d52e57/a/afe09d5a-3b10-45b1-9ff8-55935cb7c1c7?tenantId=798a21d4-ed73-44f4-8cac-c7bde6d52e57&amp;screen=New_Password&email=triggerBody()?['email']">Create New Password</a>

13. Save and publish the flow. Then, in Power Apps, submit button OnSelect property. Provide the below code to run the flow when clicking submit after entering the email address.

PowerAppsSendForgetPasswordLink.Run(txt_Email.Text);

PowerAppsSendForgetPasswordLink is the flow name. And txt_Email is the name of the email input control.

14. On the create new password screen, the create new password button control’s OnSelect property provides the code below to create a new password.

If(
    txt_newPassword.Text = txt_confirmPassword.Text,
    Patch(
        'Event Registration Form',
        LookUp('Event Registration Form','Email Address'= VarEmail),
        {
            Password: txt_confirmPassword.Text
        }
    );
    Notify("Password updated successfully", NotificationType.Success),
    Notify("Passwords do not match", NotificationType.Error)
);

The above code checks whether the new and confirmed password fields contain the same password. If yes:

• Using the LookUp function, we’re fetching the record that matches the email address from the URL (varEmail).
• The Patch() function will create a new password for the record that the lookup function returns.
• The Notify () function returns a success message.

If no, it returns an error message indicating to the user that the new and confirmed passwords are different.

Save the changes and publish the app once. While previewing, check the entire process; you can create a new password if you forget it. Look at the image below; for the email in the URL, the given password is updated; check the SharePoint list.

This way, we can add the forgot password functionality to the Power Apps login page in the canvas application.

I hope you understand how to add this forgot password functionality to the Power Apps canvas app. Here, I have explained step by step how to achieve this using Power Automate flow and deep linking methods. Follow this article while trying to build a user login screen with forgot password functionality.

Also, you may like:

• Show/Hide Password in Power Apps Login Page
• Trigger an Action When the Enter Key is Pressed in Power Apps
• Show the Current Logged In User in a Combo Box On a Power Apps Modern Form
• Display a User Photo or Initials in Power Apps