Create a Single Login Page for Multiple User Roles

In this article, we will provide a step-by-step guide on creating a login welcome page that enables users to access the app seamlessly, regardless of their assigned user roles.

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:

1. Two or more user roles are established to use your app.

2. Page menu tabs are set to show based on the logged-in user’s role.

3. 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 view 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 View 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 views. In this case, we will include a rich text view to showcase a warm welcome message and provide the user with helpful instructions.

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

Once you have added the rich text view to your app, simply open the view 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 view.

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

 

 

 

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.

---