Implement User Authentication & Authorization in Canva

Implement user authentication and authorization in Power Apps by creating a secure login system with username and password validation. Use functions like IsBlank(), LookUp(), and Filter() to manage user credentials and control access to dashboard information.

Authentication and authorization are fundamental concepts in system security. Authentication verifies a user’s identity, while authorization determines what resources a user can access.

Business case

To address the business case, we can implement a secure login system that ensures only authorized users can access sensitive dashboard information.

1. User Authentication: Ensure that the app requires unique credentials for authentication. This can be done using a combination of username and password fields that are verified against a secure database.
2. Authorization Check: After successful authentication, perform an authorization check to determine the permissions the user has.
3. Conditional Access to Dashboard: Display dashboard information conditionally based on the user’s authorization level. This ensures that each user only sees the information they are permitted to view.

Prerequisites

Before we begin, ensure you have a SharePoint List and a Power Apps license. Assuming familiarity with connecting to SharePoint via Power Apps, we’ll proceed directly to creating a simple login screen for a Power Apps canvas app.

Login Authentication Code

In Power Apps, IsBlank() checks for blank or empty values. It returns true if a value is blank or empty. Conversely, !IsBlank() checks if a value is not blank or empty.

Login Button OnSelect Event

If(
    !IsBlank(
        LookUp(
            'Login Form Credentials',
            Title = txtUserName.Text And Password = txtPassword.Text
        ).Title
    ),
    Reset(txtUserName);
    Reset(txtPassword);
    Navigate(WorkspaceScreen),
    Notify(
        "Incorrect username and password, please contact system admin.",
        NotificationType.Error
    )
)

This code resets the username and password fields and navigates to the WorkspaceScreen if login credentials are found. Otherwise, it notifies the user of incorrect credentials.

Fetching User Profile Information

Set(
    varLoggedUserEmail, 
    Office365Users.UserProfileV2(User().Email).mail
);

This line retrieves the logged-in user’s email from Office 365 and stores it in the varLoggedUserEmail global variable.

Filtering Records

ClearCollect(
    collAuthUsr,
    Filter(
        WSAccess,
        varLoggedUserEmail in WorkspaceAccess.Email
    )
);

This code populates the collAuthUsr collection with records from the WSAccess list where the logged-in user’s email matches any email in the WorkspaceAccess.Email field.

Sorting Gallery Items

Sort(
  collAuthUsr,
  WorkspaceOrder,
  SortOrder.Ascending
)

The Sort function arranges items in the collAuthUsr collection in ascending order based on WorkspaceOrder.

The IsBlank() function1, LookUp() function2, Office365Users.UserProfileV2()3, and Filter() function2 are essential for creating efficient Power Apps that handle data and user interactions effectively. The provided code snippets demonstrate their practical application in a login authentication scenario.

Gallery view after authentication of the user.

Admin Icon Visibility: The admin icon’s visibility is controlled by the following code snippet, which checks the logged-in user’s email.

Visible = If(
    varLoggedUserEmail = "[email protected]",
    true,
    false
)

This code sets the Visible property to true if the user’s email matches the admin’s email, making the icon visible only to the admin. Otherwise, it remains hidden.

Only the admin can have access to the below list.

SharePoint list schema for ref.

Thanks for reading.

Happy coding