In this article, we will explore login views and registration views and provide instructions on how to incorporate them into your Knack app.
This article includes the following topics:
About Logins
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:
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.
Note: In order to incorporate logins into your Knack app, you will need to enable users.
Login Pages
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, or giving permission to all users 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:
-
Select the dropdown arrow button next to the page name and choose the “Require Login” option.
-
Or, 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 specific user role(s) or give permissions to all users.
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 access to that specific page.
The settings for the login view can be found by selecting the pen icon highlighted below and then by selecting "Settings" from the left panel:
Tip: To learn more about the login view's settings, see the Login and Registration Settings section.
Adding a Login to a Child Page
To add logins to child pages, you can follow the same process as you would with an existing page by clicking on the dropdown arrow button next to the page name in the page tree. From there, select the "Require Login" option from the dropdown menu.
Alternatively, you can also select the lock icon and click on "Require Login" from there:
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.
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 "Secure every page with the same login". 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:
Note: Be sure to click on "Save Settings" after selecting the option.
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:
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 pen icon to access the login options:
Upon opening the login options, you will see Settings and Design options. To access the login settings, select "Settings".
Registration 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?".
Options:
-
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.
-
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 the account owner to notify them of their registration, allowing them to change their status to active if they 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.
-
Below is where you can update the status of a user:
-
Once you've selected "Update Status", a modal pop-up will appear where you can choose the new status for the selected user(s). Additionally, you have the option to send an approval email to these users if desired.
Note: Inline editing the user status from the Records view will automatically send an approval email to the user when setting the status to "Active".
Permissions
Permissions control which user roles will be able to log in 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.
Registration Forms
If the login page allows new users to register for access, a registration form view will be added below your login view in the Live App:
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 by selecting "Add Inputs".
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 and add dividers by accessing the "Static" fields tab:
Design Settings
In the Design settings, 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 log in again.
Tip: To learn more about user tokens, see our developer documentation here.