User Components
Transcript Summary
Introduction
Hello, databasers! Sam here. In this video, you're going to learn all about system components, specifically the ones that affect users.
Key System Components
Let's talk about the key components:
- Login Component
- Forgot Password
- Password Reset
- Two-Factor Authentication
- Log Out
- Sign-Up Component
- Profile Component
These are the essential components we'll be covering, and I'll walk you through each of them.
Pages and Components in the Builder
We’re currently in the Page Builder, and the first thing I want to show you is the three default pages: Login, Sign-Up, and Profile. These pages cannot be deleted. If you click on the Components tab, you’ll notice two types of components:
- Data Components: Allow users to interact with data from your app.
- System Components: Affect the user’s interaction with the app, such as login, sign-up, and profile.
You can add these system components to any page in your app.
System Components Overview
There are three key system components:
- Login Component
- Sign-Up Component
- Profile Component
These components can be added anywhere in your app to allow users to log in, sign up, or access their profile. When adding these components to layouts, keep in mind that only system components can be added to layouts, not data components.
Pre-Built Pages
Every app comes with the login, sign-up, and profile pages by default. These pages include the corresponding system components, and while the pages can't be deleted, you can edit the components within them.
Login Process Example
Let’s walk through what the login process looks like in a live app. When a user attempts to log in, they’ll need to enter their email address and password. If they enter incorrect credentials, a customizable message will display: “The email or password entered is incorrect.”
If they click Forgot Password, the user is prompted to enter their email address to receive a verification code. After receiving the email with a verification code, they can enter it, set a new password, and then log in successfully.
Login Redirect Rules
When setting up login redirect rules, you can specify where users are redirected after logging in based on their role. For example, customers can be directed to a customer dashboard, while admins might be redirected to an admin dashboard.
Customizing the Login Component
You have many options to customize the login component, including:
- Customizing error messages for incorrect email or password
- Adding a Forgot Password link
- Setting up two-factor authentication (2FA), which will require a verification code at login if configured in the app settings.
Two-Factor Authentication and Security Settings
Two-factor authentication can be enabled under the App Security Settings. Once enabled, users will be required to input a verification code when logging in.
You can also set password complexity requirements and log failed login attempts. For example, after a certain number of failed login attempts, you can block the user’s IP address for a specified period.
Login Logs and User Status
In the User Settings, you can enable logging for successful logins and failed login attempts. You can also track active sessions for users logged into the app.
Additionally, you can restrict logins based on user status. For instance, only users with an active status can log in, while users with inactive or unverified status will be prevented from logging in.
Customizing Sign-Up and Profile Components
Sign-Up Component
The sign-up component is essentially a form component with unique features. You can add any fields from the user table to the sign-up form. It also has an option to automatically log users in after they sign up.
Profile Component
The profile component allows users to update their information. You can control which fields are visible or editable based on the user’s role. For example, admins might be able to update their email, but customers cannot.
User Menus and Navigation
You can add login and sign-up components to different pages in your app and customize the appearance and behavior of these components.
Conclusion
I hope this video gave you a clear overview of the login, sign-up, and profile components and their different options. Thank you for watching!