User components are the interface elements that enable authentication, registration, and profile management in your application. These components provide the user-facing functionality for logging in, signing up, managing profiles, and resetting passwords. In this article, you'll learn to configure and customize these essential components.

Tadabase provides several built-in components for user management:

Component	Purpose	Typical Use
Login Component	User authentication	Login page
Signup Component	User registration	Registration page
User Menu	User account menu	Navigation bar
Profile Component	View/edit user data	Profile page
Password Reset	Reset forgotten password	Forgot password page
Email Verification	Verify email address	Verification page

The login component allows users to authenticate and access your application.

Adding a Login Component

1. Create a new page (typically named "Login")
2. Set page as Public (in page permissions)
3. Go to Page Builder
4. Click "Add Component"
5. Select "Login" from System Components
6. Configure settings
7. Save

Login Component Settings

Basic Settings

• Title - Heading displayed above login form (e.g., "Sign In")
• Button Text - Text on submit button (e.g., "Login", "Sign In")
• Logo - Company logo displayed on login page
• Background Image - Full-page background image
• Background Color - Solid color background

Authentication Options

• Email/Password Login - Standard authentication (always enabled)
• Google SSO - "Sign in with Google" button
• Microsoft SSO - "Sign in with Microsoft" button
• SAML SSO - Enterprise single sign-on (requires configuration)
• Remember Me - Checkbox to stay logged in

Additional Elements

• Forgot Password Link - Link to password reset page
• Signup Link - Link to registration page (e.g., "Don't have an account? Sign up")
• Custom Text - Additional messaging or instructions
• Terms of Service Link - Link to terms and conditions

Redirect Settings

• After Login Redirect - Where to send users after successful login
• Role-Specific Redirects - Different landing pages per role
• Return to Previous Page - Send users back to page they were trying to access

Login Component Examples

Example 1: Simple Login Page

Settings:
- Title: "Welcome Back"
- Button Text: "Sign In"
- Show Forgot Password: Yes
- Show Signup Link: Yes ("Don't have an account? Sign up")
- After Login Redirect: Dashboard

Example 2: Branded Corporate Login

Settings:
- Logo: Company logo (200px wide)
- Background Image: Corporate office photo
- Title: "Employee Portal"
- Button Text: "Access Portal"
- Show SSO: Google and Microsoft
- Show Forgot Password: Yes
- Custom Text: "For assistance, contact IT at ext. 1234"

Example 3: Customer Portal Login

Settings:
- Title: "Customer Login"
- Background Color: Brand color (#0066CC)
- Show Signup Link: Yes ("New customer? Create account")
- Remember Me: Enabled
- After Login: Redirect to "My Orders"
- Terms Link: Link to terms page

Customizing Login Styling

You can customize the appearance using:

• Theme Settings - Apply app-wide theme
• Custom CSS - Advanced styling (requires CSS knowledge)
• Component Settings - Colors, fonts, spacing
• Page Background - Images or colors

Login Security Settings

Configure in Settings → Users → Login Security:

• Failed Login Attempts - Lock account after X failed attempts
• Account Lockout Duration - How long accounts stay locked
• Session Timeout - Auto-logout after inactivity
• Password Requirements - Complexity, length, expiration
• Two-Factor Authentication - Require 2FA (higher-tier plans)

The signup component allows users to create new accounts (self-registration).

Adding a Signup Component

1. Create a new page (typically named "Signup" or "Register")
2. Set page as Public
3. Go to Page Builder
4. Click "Add Component"
5. Select "Signup" from System Components
6. Configure settings
7. Save

Signup Component Settings

Basic Settings

• Title - Heading (e.g., "Create Account", "Sign Up")
• Button Text - Submit button text (e.g., "Create Account", "Register")
• Logo - Company logo
• Background - Image or color

Default Role

• Assign New Users To - Which role new signups receive
• Typically set to lowest privilege role (Customer, Member, etc.)
• Can be changed by admins later

Fields to Include

Select which fields users must complete during signup:

• Email - Always required (login identifier)
• Password - Always required
• First Name - Optional but recommended
• Last Name - Optional but recommended
• Phone - Optional
• Custom Fields - Any custom user fields you've added

Field Requirements

For each field:

• Required - Must be filled in
• Optional - Can be left blank
• Hidden - Not shown (auto-filled or not needed)

Email Verification

• Require Email Verification - Users must verify email before accessing app
• Verification Email Template - Customize verification message
• Verification Success Page - Where to redirect after verification

Admin Approval

• Require Admin Approval - Admin must approve before user can login
• Approval Notification - Email admin when new signups occur
• Pending Message - Message shown to users awaiting approval

Additional Elements

• Login Link - "Already have an account? Login"
• Terms of Service Checkbox - "I agree to terms"
• Privacy Policy Link - Link to privacy policy
• CAPTCHA - Prevent bot signups (higher-tier plans)
• Custom Text - Additional messaging

After Signup

• Success Message - "Account created successfully!"
• Redirect To - Where to send users after signup
• Auto-Login - Automatically log in after signup (if no verification)
• Welcome Email - Send welcome email to new users

Signup Component Examples

Example 1: Simple Public Signup

Settings:
- Title: "Create Your Account"
- Button Text: "Sign Up"
- Fields: Email, Password, First Name, Last Name
- Default Role: Customer
- Require Email Verification: No
- Auto-Login After Signup: Yes
- Redirect To: Dashboard
- Show Login Link: Yes

Example 2: Verified Signup with Approval

Settings:
- Title: "Join Our Platform"
- Fields: Email, Password, First Name, Last Name, Company, Phone
- All fields required
- Default Role: Member (status: Pending)
- Require Email Verification: Yes
- Require Admin Approval: Yes
- After Signup: Show "Your account is pending approval"
- Notify Admin: Yes

Example 3: Detailed Registration Form

Settings:
- Title: "Student Registration"
- Fields:
  - Email (required)
  - Password (required)
  - First Name (required)
  - Last Name (required)
  - Student ID (required)
  - Department (required, dropdown)
  - Phone (optional)
  - Address (optional)
- Terms Checkbox: Required
- Default Role: Student
- Email Verification: Yes
- Welcome Email: Yes (custom template)

Controlling Who Can Signup

Options for restricting signups:

Open Signup

• Anyone can create account
• Public signup page
• Good for: Customer portals, community sites

Invitation-Only

• Remove or hide signup page
• Admins create users manually or via invitation
• Good for: Internal apps, enterprise systems

Domain-Restricted Signup

• Use page rules to check email domain
• Only allow signups from specific domains (@company.com)
• Good for: Company-specific apps

Code-Required Signup

• Add "Signup Code" field
• Users must enter valid code to signup
• Good for: Limited access programs, beta testing

The user menu is a dropdown menu that appears after login, typically in the navigation bar.

Adding a User Menu

1. The user menu typically appears in your app's header/navigation
2. Go to Page Builder → Layout
3. Edit your header layout
4. Add User Menu component
5. Configure menu items
6. Save

User Menu Elements

Display Options

• Show User Name - Display logged-in user's name
• Show User Avatar - Profile picture (if available)
• Show User Role - Display role name
• Icon Style - User icon, avatar, or custom

Menu Items

Standard menu items:

• My Profile - Link to profile page
• Account Settings - Link to settings page
• Change Password - Link to password change page
• Logout - Sign out
• Custom Links - Add any page links

Conditional Items

Show menu items conditionally:

• Admin Panel - Only visible to Admin role
• Manager Dashboard - Only visible to Managers
• Billing - Only for paid accounts

User Menu Examples

Example 1: Simple User Menu

Display: User name with dropdown arrow
Menu Items:
- My Profile
- Change Password
- Logout

Example 2: Full-Featured Menu

Display: User avatar + name + role badge
Menu Items:
- My Dashboard
- My Profile
- Account Settings
- Billing (if subscription active)
- Help & Support
---
- Admin Panel (Admin only)
- User Management (Admin only)
---
- Logout

Example 3: Role-Specific Menu

Display: User name
Menu Items (All Roles):
- My Profile
- Logout

Additional Items by Role:
Admin:
- User Management
- System Settings
- Reports

Manager:
- Team Dashboard
- Approvals

Employee:
- My Tasks
- My Timesheet

The profile component allows users to view and edit their own information.

Creating a Profile Page

1. Create a new page (e.g., "My Profile")
2. Set permissions: All authenticated roles
3. Add components to display and edit user data
4. Link from user menu

Profile Page Components

Details Component

Display user information:

1. Add Details Component
2. Data Source: Users table
3. Filter: Record = Logged In User
4. Select fields to display
5. Customize layout

Form Component

Allow users to edit their profile:

1. Add Form Component
2. Data Source: Users table
3. Type: Update form
4. Filter: Record = Logged In User
5. Select editable fields
6. Configure field permissions

Profile Fields

Typical Profile Fields

Field	Editable	Notes
First Name	Yes	User can update
Last Name	Yes	User can update
Email	Yes	May require re-verification
Phone	Yes	User can update
Profile Picture	Yes	File upload field
Address	Yes	User can update
Role	No	Read-only, admin controlled
Department	No/Maybe	Depends on your app
Account Status	No	Admin controlled
Created Date	No	System field

Profile Page Examples

Example 1: Basic Profile

Page Layout:
[Header: "My Profile"]

[Details Component]
- Profile Picture
- Name
- Email
- Phone
- Member Since

[Form Component: "Edit Profile"]
- First Name (editable)
- Last Name (editable)
- Phone (editable)
- Profile Picture (upload)
- Submit Button

[Link: "Change Password"]

Example 2: Comprehensive Profile

Page Layout:
[Tab 1: Basic Information]
- Profile picture
- Name, email, phone (editable)
- Address (editable)
- Bio (editable)

[Tab 2: Account Settings]
- Email notifications (toggle switches)
- Timezone (dropdown)
- Language preference (dropdown)
- Privacy settings (checkboxes)

[Tab 3: Security]
- Current password strength indicator
- Change password button
- Two-factor authentication setup
- Active sessions list

[Tab 4: Activity]
- Login history (table component)
- Recent actions
- Account statistics

Example 3: Employee Profile

Page Layout:
[Left Column: Employee Info]
- Photo
- Name
- Title
- Department
- Manager
- Employee ID
- Hire Date

[Right Column: Editable Fields]
- Contact Info (phone, email)
- Emergency Contact
- Preferences
- Upload Documents

[Bottom: Related Records]
- My Projects (table)
- My Tasks (table)
- My Timesheets (table)

Password management includes changing passwords and resetting forgotten passwords.

Change Password

Creating a Change Password Page

1. Create a new page (e.g., "Change Password")
2. Permissions: All authenticated users
3. Add Form Component
4. Data Source: Users table
5. Type: Update form
6. Filter: Logged In User
7. Include only password field
8. Require current password confirmation

Change Password Form Fields

• Current Password - Verify user knows current password
• New Password - Enter new password
• Confirm New Password - Re-enter for verification
• Password Strength Indicator - Visual feedback
• Requirements Display - Show password rules

Forgot Password (Password Reset)

Password Reset Flow

1. User clicks "Forgot Password" on login page
2. User enters email address
3. System sends password reset email
4. User clicks link in email
5. User creates new password
6. User logs in with new password

Creating Password Reset Page

1. Create "Forgot Password" page
2. Set as Public
3. Add Password Reset Component
4. Configure email template
5. Set reset link expiration time
6. Configure success/error messages

Password Reset Settings

• Reset Link Expiration - How long reset link is valid (e.g., 24 hours)
• Email Template - Customize reset email message
• From Email - Which address sends the email
• Success Page - Where to redirect after reset
• Rate Limiting - Prevent abuse (max requests per hour)

Password Security Best Practices

• Minimum Length - Require 8+ characters
• Complexity - Require mix of uppercase, lowercase, numbers, symbols
• Password History - Prevent reusing recent passwords
• Expiration - Force password change every 90 days (for sensitive apps)
• Failed Attempts - Lock account after failed attempts
• No Common Passwords - Block "password123", etc.

Email verification ensures users own the email address they register with.

How Email Verification Works

1. User signs up with email address
2. Account created with "Pending" status
3. Verification email sent automatically
4. User clicks verification link in email
5. Account status changes to "Active"
6. User can now log in

Configuring Email Verification

1. Go to Settings → Users
2. Enable "Require Email Verification"
3. Customize verification email template
4. Set verification page
5. Configure error messages

Verification Email Template

Customize the email sent to users:

• Subject Line - "Verify Your Email Address"
• From Name - Your company name
• Message Body - Friendly message with verification link
• Button Text - "Verify Email"
• Branding - Logo, colors, footer

Verification Page

Create a page for verification success/failure:

• Success Message - "Your email has been verified! You can now log in."
• Failure Message - "Verification link is invalid or expired."
• Resend Link - Option to resend verification email
• Login Button - Direct link to login page

Resending Verification Emails

Allow users to resend if they didn't receive the email:

1. Create "Resend Verification" page
2. User enters email address
3. System sends new verification email
4. Show confirmation message

Allow users to log in with existing accounts from Google, Microsoft, etc.

Enabling Google SSO

1. Go to Settings → Users → Authentication
2. Enable "Google SSO"
3. Configure OAuth credentials (from Google Cloud Console)
4. Set allowed domains (optional, restrict to specific domains)
5. Save
6. Google button automatically appears on login/signup components

How SSO Works

1. User clicks "Sign in with Google"
2. Redirected to Google authentication
3. User authorizes access
4. If email exists in Tadabase: User is logged in
5. If email doesn't exist: New user account is created (if enabled)
6. User redirected to application

SSO Settings

• Auto-Create Accounts - Automatically create user if doesn't exist
• Default Role - Role assigned to new SSO users
• Allowed Domains - Restrict to specific email domains
• Profile Field Mapping - Map SSO fields to Tadabase user fields

Enterprise SSO (SAML)

Available on enterprise plans:

• Integrate with Okta, OneLogin, Azure AD, etc.
• Centralized user management
• Automatic provisioning/de-provisioning
• Enhanced security
• Requires IT/developer configuration

Add extra security layer requiring second verification factor.

Enabling 2FA

1. Available on higher-tier plans
2. Go to Settings → Users → Security
3. Enable "Two-Factor Authentication"
4. Choose method: SMS or Authenticator App
5. Configure settings
6. Users set up 2FA in their profile

2FA Methods

SMS-Based 2FA

• User enters phone number
• Receives code via text message
• Enters code to complete login
• Requires SMS service integration

Authenticator App 2FA

• User scans QR code with authenticator app (Google Authenticator, Authy, etc.)
• App generates time-based codes
• User enters code to complete login
• More secure than SMS

2FA Settings

• Required vs. Optional - Force all users or let them choose
• Grace Period - Give users time to set up before enforcing
• Recovery Codes - Backup codes in case they lose access
• Remember Device - Don't ask for code on trusted devices

2FA User Experience

1. User logs in with email/password
2. Prompted for 2FA code
3. Enters code from SMS or app
4. Access granted if code is valid
5. Option to "Remember this device for 30 days"

Follow these guidelines for effective user components:

1. Keep Signup Simple

• Only ask for essential information
• Minimize required fields
• Collect additional data later in profile
• Reduce friction to increase conversions

2. Clear Instructions

• Explain what each field is for
• Show password requirements upfront
• Provide helpful error messages
• Guide users through the process

3. Mobile Friendly

• Ensure components work well on mobile
• Large, tappable buttons
• Readable text size
• Avoid complex layouts

4. Brand Consistency

• Use company colors and logo
• Match overall app design
• Consistent tone in messaging
• Professional appearance

5. Security Visibility

• Show password strength indicator
• Display security requirements
• Explain why you need certain information
• Build trust with users

6. Helpful Links

• Always include "Forgot Password" link
• Link between login and signup
• Provide "Need Help?" contact
• Link to terms and privacy policy

7. Welcome New Users

• Send welcome email after signup
• Provide onboarding guidance
• Explain next steps
• Make great first impression

8. Test Thoroughly

• Test signup process completely
• Verify email verification works
• Test password reset flow
• Try on different devices/browsers
• Have others test (fresh perspective)

Here's a complete user authentication system:

Pages to Create

1. Login - Public page with login component
2. Signup - Public page with signup component
3. Forgot Password - Public page with password reset
4. Email Verification - Public page for verification confirmation
5. My Profile - Authenticated page for viewing/editing profile
6. Change Password - Authenticated page for password changes
7. Account Settings - Authenticated page for preferences

Navigation Links

• Login page → Links to Signup and Forgot Password
• Signup page → Links to Login
• User menu (after login) → Links to Profile, Settings, Change Password, Logout
• Email verification → Link to Login after success

User Flow

New User

1. Visit Signup page
2. Complete signup form
3. Receive verification email (if enabled)
4. Click verification link
5. Redirected to Login page
6. Log in
7. Redirected to Dashboard

Returning User

1. Visit Login page
2. Enter credentials
3. Redirected to Dashboard

Forgot Password

1. Click "Forgot Password" on Login
2. Enter email address
3. Receive reset email
4. Click reset link
5. Create new password
6. Redirected to Login
7. Log in with new password

In this article, you learned:

• Login component - Authenticating users
• Signup component - User registration and self-service account creation
• User menu - Providing account access in navigation
• Profile component - Viewing and editing user information
• Password management - Changing and resetting passwords
• Email verification - Confirming user email addresses
• Social login - SSO with Google, Microsoft, etc.
• Two-factor authentication - Enhanced security
• Best practices - Creating effective user experiences
• Complete authentication flow - Tying it all together

User components provide the interface for all user authentication and management functions. Properly configured, they create a seamless, secure experience for your application users.

In the next article, you'll learn about security best practices - implementing enterprise-grade security throughout your application.

Hands-On Exercise (To Be Added)

Exercise placeholders will include practical activities such as:

• Creating a complete login/signup flow
• Configuring email verification
• Building a user profile page
• Setting up password reset functionality
• Adding a user menu to navigation
• Testing the complete authentication system

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• Purpose of each user component
• How to configure signup requirements
• Email verification process
• Password reset flow
• Best practices for user authentication
• When to use different authentication methods