How to Create Login Page in Power Apps Using SharePoint + Remember Me Option

Automatically filling in the details when logging into an application frequently can be useful for quick access. This is possible by using the Remember Me feature/option during Power Apps login.

In this Power Apps article, I will show you how to create a login page using SharePoint and the Remember Me option, step by step.

Look at the gif below.

How to Create Login Page in Power Apps Using SharePoint

Here, I have a SharePoint list called Event Registration Form that stores registered users’ UserID and Password credentials.

We’ll check the user credentials from this SharePoint list to log in to an application. If the user exists, it will successfully log in to some page. Otherwise, it will show an error.

Refer to the table below, which contains the above SharePoint list columns and their data type.

Column Name	Data Type
UserID	Title(Single line of text)
Password	Single line of text
First Name	Single line of text
Last Name	Single line of text
Email Address	Single line of text
Phone Number	Single line of text

Follow the steps below to achieve this!

1. Create one blank Power Apps application. Then, add the following controls to the app.

• Two Text Inputs – For UserID, Password.
• Two Text labels – For UserID, Password.
• One Button Control – For login.
• Add User, Lock, and View icons if you want.

Design the screen with the above controls as shown below.

2. Now, connect with the SharePoint list from Data in the Power Apps navigation.

3. Provide the formula below in the screen’s OnVisible property. It will convert the text in the password field to dots.

Set(lblview,TextMode.Password);

Here, TextMode.Password will hide the actual text with dots for security. Now, it is assigned to the lblview variable with the Set function.

4. Now, use that variable in the Mode property of the password text input control.

5. Provide the formula below in the OnSelect property of the View Icon. Then, save the changes.

Set(lblview,TextMode.SingleLine)

It will convert the dots in the password field into text.

6. Provide the formula below in the OnSelect property of button control.

Set(VarUserID, txt_userID.Text);
Set(VarPassword,txt_password.Text);
Set(VarUserExist,!IsBlank(LookUp('Event Registration Form',Title = VarUserID )));
If(
    !VarUserExist,
    Set(varErrorMessage,"User ID not found"),
    If(LookUp('Event Registration Form',Title = VarUserID ).Password = VarPassword,
    Set(varErrorMessage,"");
        Navigate(Event_CompleteDetails_screen),
        Set(varErrorMessage, "Password is incorrect.") 
       )
);

In this code,

• VarUserID and VarPassword are the variables that contain the text entered in the UserID text input control(txt_userID) and Password text input control(txt_password).
• The VarUserExist variable holds the LookUp() value. This lookup function checks whether the user ID value is present or not in the SharePoint list.
• varErrorMessage is the variable used to display the error message if the user ID or Password does not exist.
• The Title and password are the column names in the Event Registration Form.
• Event_CompleteDetails_screen is the screen name containing the events’ details in Power Apps.

The above code will check whether the User ID is in the SharePoint list. If present, it will again check its password. If that password is matched, it will navigate to another screen.

Otherwise, it displays an error message for the password. If the user ID does not exist in SharePoint, it will display an error message.

7. Now, add one text label to display the error message. Then, add the variable that contains an error message in the Text property of the label.

Text: varErrorMessage

8. Save the changes and preview the app once. After providing the correct User credentials, it logs to another screen. It displays an error message if we enter the wrong password or a user ID that does not exist.

In this way, we can create the login form in Power Apps.

How to Implement Remember Me in Power Apps Login Page

In Power Apps login forms, we can use the Remember Me functionality to auto-fill the passwords for users who log in regularly. This makes the login process quicker and easier.

Look at the example below. After clicking the remember me check box while logging in, the password auto-fills next time.

Follow the steps below to achieve this.

1. Add one Check box control to the Power Apps login form. Then, provide the below name in its Text property.

Text :  "Remember Me"

2. In the OnCheck property of the check box, provide the formula below.

ClearCollect(
    UserCredentials,
    {
        UserID: txt_userID.Text,
        Password: txt_password.Text
    }
)

This formula creates a collection to store the user ID and Password. Here, UserCredentials is the collection name, and txt_userID and txt_password are the text input control names for user ID and password.

3. Now, in the OnSelect property of the login button, add the below formula.

If(
    chk_RememberMe.Value,
    Set(LocalUserCredentials,UserCredentials),
"");

Here, chk_RememberMe is the checkbox control name, and LocalUserCredentials is the variable containing the UserCredentials values.

So, when this Remember Me checkbox is clicked, the userID and password will be set into the LocalUserCredentials.

4. Provide the formula below in the Default property of the password text input control.

LookUp(LocalUserCredentials,UserID=txt_userID.Text,Password)

This will fetch the password and populate it in the password text input control when we type userID.

Now, save the changes and preview the app. After clicking the Remember me check box while logging in, the password will populate automatically the next time you enter the User ID.

Implement Remember Me in Power Apps Login Page [SharePoint List]

The above approach uses the Power Apps collection to store user credentials when a user checks the Remember Me checkbox. However, that approach only works when the app is running continuously. When the app is loaded newly, the collection data will be empty, and when you log in again, it won’t fetch your password.

Look at the example below; even when I reloaded the Power Apps app, the password was automatically displayed when I entered my User ID.

Follow the steps below to achieve this!

1. Add a Yes/No field to the SharePoint list as in the image below and name that field as Remember Me.

2. In the Power Apps application, provide the below code in the Default property of the Password text input control.

LookUp('Event Registration Form','Remember Me'= true && Title = txt_userID .Text , 
Password)

Here,

• ‘Event Registration Form’ = SharePoint list name.
• ‘Remember Me’ =SharePoint list field name.
• Title = Which contains User IDs in SharePoint list.
• Password = Password Field name.

The LookUp() function will fetch the password of the entered user ID when the remember me field value is true.

3. Update the previous code in the OnSelect property of the Log In button with the below code.

If(chk_RememberMe.Value,
Patch('Event Registration Form',LookUp('Event Registration Form',Title=txt_userID.Text),{'Remember Me':chk_RememberMe.Value})
);

Here,

• chk_RememberMe = Check box control name.
• The Patch () function updates the remember me check box value in the SharePoint list.

Save the changes and publish the application. Then, try to log in with your credentials by checking the Remember Me feature. Later, reload the application and provide your user ID automatically. The password will be displayed as in the example above.

Moreover, you may like some more Power Apps articles:

• Update SharePoint List Item Using Power Apps Patch Function
• Get Selected User Manager Name By Default in Power Apps
• Link to a Specific Screen in Power Apps
• PowerApps Play Video From SharePoint
• How to Use Power Apps DropDown Control
• Power Apps Delegation Warnings
• Create Cascading Dropdown in Power Apps

I hope you found this article useful. I have explained how to create a login form in Power Apps using the SharePoint list and how to autofill the password using the Remember me in the Power Apps login form.

You can follow the steps that I have explained above whenever you are trying to create a login form and need to populate the user credentials.