In this article, we will explore Login views and Registration views and provide instructions on how to incorporate them into your Knack app.
If you have users enabled in your app, you have the option to incorporate a login feature on any page. Here is an example of what a login page in the Live App would look like after adding a login:
Users are required to log in with a valid user account in order to access and view the page.
The handling of logins is facilitated through a dedicated login page and login view. Within the login view, there are various settings available that govern the functionality and behavior of the login process.
You can easily identify a login page by the lock icon. This lock icon serves as an indicator that all pages and views created under the login feature are also protected by the login.
Adding Login Pages
Adding a Login to a New Page
When adding a new page to your app, you will be given the option of creating a "Public Page", a "Login Page", or a "Dropdown Menu":
Selecting the "Login Page" option from the dropdown will guide you to determine whether this page will be available to all users, regardless of their user role, or if access will be restricted to specific user roles.
After selecting the user roles that have access to your page and saving your selection, you can proceed to name and create your new login page.
Adding a Login to an Existing Page
There are two options to add a login to an existing page. The first is to select the page from the page tree. Then click on the dropdown arrow button next to the page name and choose the “Require Login” option.
You can also click the lock icon in the top page navigation and choose "Require Login":
You can then follow the prompts to select whether you would like to restrict the login to a specific user role.
Once the login is added, the page will have a new parent page, known as the top-level login page, which is indicated by the "lock" icon. This login page provides settings to effectively manage the access to that specific page.
Adding a Login to a Child Page
Logins can also be added to child pages by clicking on the dropdown arrow button next to the page name in the page tree, then selecting the "Require Login" option from the dropdown:
Once the login is added, the page will have a new parent page, referred to as the top-level login page, which can be identified by the "lock" icon. This login page grants access to settings that effectively manage the control of access to that specific page.
Creating a Single Login Page for All Users
If you would like all users to have access to the same pages and data, you can navigate to the user login settings and select the option to "require a single login to access your entire application." By doing so, a single login page will be created in your app with a new page menu tab for each page you create.
To access the login settings, navigate to Settings and select User Logins:
Next, in the User Logins section, choose the option that says "Secure every page with the same login" as seen above.
After applying this setting, you will be able to add pages in the pages section. These pages will automatically be included in the page menu as you add them.
Note: Be sure to click on "Save Settings" after selecting the option in the User Logins page.
As these pages are accessible to all users, there is no provision to create separate login pages.
Removing Login Pages
Login pages can also be removed in the Builder by clicking on the dropdown arrow next to the page name in your page tree and selecting the "Remove Login" option from the dropdown:
Caution: Removing a login page will have an impact on any pages and views that rely on that login page. We highly recommend creating a copy of your app and testing the change in the app copy before implementing it in your live app.
Login and Registration Settings
Each login view offers various options for managing access and registration. To access and edit the login details and settings, simply click on the lock icon located in the top page navigation.
Another option is to directly click on the login view or select the edit "pencil" icon to access the login options.
Upon opening the login options, you will see Settings, Registration Forms, and Design options. To access the login settings, select "Settings".
In the Settings section, you have the ability to determine if registration links will be available for new users to sign up and create a new user account. You can make this decision based on your response to the initial question, "Can new users register to access this page?".
- No: No registration is allowed, only active users will be able to log in and view this page.
- Yes: New users can register and gain immediate access to this page. This will display a “Sign Up” link to a registration form (see below).
- Pending approval: New users have the option to register, however, access to the page will only be granted after their registration has been approved. An email notification will be sent to you to notify you of their registration, allowing you to change their status to active if you decide to approve them.
- Notifications for new users that need to be approved will be sent to your app's email address that you have saved in the App Settings.
Note: Editing the User Status inline on the record from "inactive" or "pending approval" will not automatically trigger an approval email to be sent to the user. You must use the "Update Status" feature in order for an approval email to be sent to the user.
Permissions control which user roles will be able to login to view the page.
- Limit permissions to specific user roles: Only users with the designated roles will have the ability to access this page. If any other users attempt to log in, they will receive a message informing them that they do not have the necessary access to view that page.
This feature is accessible only if you have created additional user roles. For instance, if you have both teacher and student users, you can choose to grant access to specific pages only to teachers or students, depending on their respective roles.
Tip: Learn more about security settings available with user logins to help ensure the security of your Live App pages.
Single Sign On
If you have a single sign-on provider that you would like users to use to access your app, you can configure that here. You can learn more about adding the Single Sign On option to your page in this article: Single Sign-On with Google, Facebook, Twitter, and Custom.
Note: The single sign-on feature is only available on the Pro plan and up.
If this login page accepts registrations, a registration form view will be added below your login view:
To manage the registration form that new users will complete for sign-up or access requests, simply click on the arrow next to the "Sign Up" button.
The registration form follows a similar structure as the Form view. You have the flexibility to add optional fields as inputs from the left menu.
To successfully add a new user record, it is essential to include the minimum fields of name, email, and password inputs. These fields are necessary for the creation of a new user account.
You also have the option to customize the Title/Instructions for the registration form by accessing the Static fields tab.
The user will access this registration form from a link below the login in the live application page.
In the Design setting, you have the ability to edit the Title and the Description of your Login view:
- Title: Provide a title for your form, which will be displayed at the top of your form.
- Description: Provide a brief description of your form. This text will be displayed below the title of your login form.
"Remember me" Option When Logging Into the Live App
By selecting the "Remember me" option when logging into a Live App, the user token will remain valid for two weeks instead of the default 48 hours. This means that as long as the session is active, the user will not be prompted to view the login page in the Live App and they will be automatically logged in.
If the user happens to clear their browser cache and cookies, this will make their user token invalid and will require them to login again.
Tip: To learn more about user tokens, see our developer documentation here.