How to Create Login Page in Canvas App

How to Create Login Page in Canvas App

A login page is often the first screen users interact with when accessing an application. Although Power Apps uses Microsoft authentication by default, developers sometimes create custom login screens for role-based navigation, demo applications, or additional validation requirements.

In this article, we'll learn how to create a custom login page in a Canvas App using text inputs, variables, and navigation functions.

Business Scenario

Suppose you want users to enter a username and password before accessing the main application dashboard. Based on the entered credentials, users can be redirected to different screens.

Step 1: Create Login Screen

  1. Create a new Canvas App.
  2. Add a Screen named LoginScreen.
  3. Add Text Input for Username.
  4. Add Text Input for Password.
  5. Add Login Button.
  6. Add Error Message Label.

Required Controls

Control Name
Text Input txtUsername
Text Input txtPassword
Button btnLogin
Label lblError

Step 2: Configure Password Field 

txtPassword.Mode =
TextMode.Password

This hides the password characters while typing.

Step 3: Login Button Formula 

If(
txtUsername.Text = "Admin"
&&
txtPassword.Text = "Admin123",

Navigate(
HomeScreen,
ScreenTransition.Fade
),

Notify(
"Invalid Username or Password",
NotificationType.Error
)
)

This validates the entered credentials and navigates the user to the Home Screen.

Step 4: Store Logged-in User 

Set(
CurrentUser,
txtUsername.Text
)

Store the logged-in username in a Global Variable.

Display Logged-in User 

"Welcome " &
CurrentUser

Advanced Login Using Collection 

If(
!IsBlank(
LookUp(
UsersCollection,
UserName = txtUsername.Text
&&
Password = txtPassword.Text
)
),

Navigate(
HomeScreen
),

Notify(
"Login Failed",
NotificationType.Error
)
)

This approach validates users from a collection, SharePoint list, or Dataverse table.

Important: Power Apps already uses Microsoft authentication. Custom login pages should only be used for business validation, role-based navigation, or demonstration purposes and should not replace enterprise authentication mechanisms.

Benefits

Key Takeaways