Create a Single Login Page for Multiple User Roles

What You'll Learn

You'll discover how to create a unified entry point for all user types in your application, with a welcoming interface that automatically adjusts to show each user only the pages they have permission to access—creating a more cohesive, professional user experience while maintaining your role-based security model.

Use Case

Multiple user roles interact with your app, and the goal is to provide a seamless experience for all users by allowing them to access the app from a single page.

For instance, your app caters to both Managers and Employees, each with their own dedicated pages based on their user role. Nevertheless, it is desired that these users have the convenience of accessing the app from a unified "Welcome" page.

Requirements

The following are requirements for implementing this setup:

• Two or more user roles are established to use your app.
• Page menu tabs are set to show based on the logged-in user's role.
• Separate login pages are in place for each user role.

Steps

This setup will use a "Welcome Page" (also occasionally referred to as a "Home" page) where every user will login and access their global tabs:

1. Add a new login page for all user roles.
2. Add a Rich Text element with welcome message.

For this scenario, we are using a Project Management app in which has user roles for Admin, Project Managers, and Employees.

Adding a New Login Page for All User Roles

To begin, ensure that you have set up a minimum of two login pages in the Pages section of the Builder.

Simply click on the "+" button and choose the "Login Page" option from the dropdown menu.

You will be prompted to set up your new page by first specifying which user roles should have access. Simply select the "Give permission to all users" option and select "Continue".

Next, you will be prompted to name your new page. In this example, we have named it "Welcome Page".

Adding a Rich Text Element With a Welcome Message

After setting up the user access and providing a name for your page, it's time to enhance your new page with additional elements. In this case, we will include a rich text element to showcase a warm welcome message and provide the user with helpful instructions.

Select the Rich Text element type from the toolbox on the left-hand side.

Once you have added the rich text element to your app, simply open the element editor to include your welcome message.

In this new window, simply type the message you want to display. You'll find various formatting options above the text input to help you customize the way your message appears in the element.

Congratulations! You have successfully saved the changes to your rich text element, completing the setup.

Tip: You can learn more about managing rich text elements here.

Login & Test

Take a look at your new single page login and give it a test run.

To access the page in the Live App, simply click on the "Go to Live App" option in the top navigation. You can also select the "Preview" button highlighted below:

Log in using the credentials for one of the user roles. After a successful login, you will be greeted with a welcome message and gain access to all the pages that are available for your user role.

To stop previewing the Live App page, locate the "Stop Preview" button in the top right-hand corner.

Optional Feature

You have the option to create a landing page in your app that all users can access. By utilizing Page Rules, you can seamlessly guide users to the appropriate page based on their specific user role.

To accomplish this, simply create a landing page in your app that is accessible to all users for login. Then, implement a page rule that will automatically redirect users to the appropriate pages in the app based on their user role.

In the example mentioned earlier, admins will be directed to a dedicated page upon logging in where they can conveniently view their projects.