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:

1. Login Component
2. Sign-Up Component
3. 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

When using menus and user menus, the app will only show the login option if the user is logged out, and it will display the log out option if the user is logged in. Similarly, the profile option only appears if the user is logged in.

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!