Native Login & User Management Suite
Complete session log documenting the exploration, architectural breakdown, and construction of a production-ready PHP authentication and user self-service portal in WYSIWYG Web Builder 21.0 using 100% native objects (LayoutGrid, loginLogin, loginSignup, loginProtectPage, loginLoginName, loginLogout, loginAdmin, loginEditProfile, loginChangePassword, and loginPasswordRecovery).
Based on the MCP schemas, object definitions, and underlying implementation in WYSIWYG Web Builder, the software provides an extensive, production-ready Login & User Management System MCP namespace login*).
It is designed to secure PHP-based websites without writing server-side code manually, handling everything from authentication and role-based page protection to email verification, OAuth social logins, and administrative dashboards.
1. Core Architecture & Security Foundation
flowchart TD
subgraph Storage ["Storage Layer"]
DB1["Flat-File (usersdb.php)"]
DB2["MySQL Database (USERS Table)"]
DB3["Built-in Users (JSON / Project)"]
end
subgraph Auth ["Authentication & Lifecycle"]
Signup["loginSignup
(Registration & Verification)"]
Login["loginLogin / loginSocialLogin
(Authentication Gate)"]
Recovery["loginPasswordRecovery
(Token Reset via Mail/SMTP)"]
end
subgraph Routing ["Access Control & Routing"]
Redirect["loginUserRedirect
(Role/User Dispatcher)"]
Protect["loginProtectPage
(Session & Role Validator)"]
Single["loginSinglePage
(Inline Page Barrier)"]
end
subgraph UserArea ["User Experience & Self-Service"]
Greeting["loginLoginName
(Username / Avatar)"]
Edit["loginEditProfile
(Update Profile / Avatar)"]
Pass["loginChangePassword
(Update Password)"]
Del["loginDeleteProfile
(Self-Delete Account)"]
Logout["loginLogout
(Session Termination)"]
end
subgraph AdminArea ["Administration"]
Admin["loginAdmin
(User Management Console)"]
end
Signup --> Storage
Login --> Storage
Storage --> Auth
Auth --> Routing
Routing --> Protect
Protect --> UserArea
Storage <--> Admin
Dual Backend Modalities
- Flat-File Database (
usersdb.php): - Stores users in an encrypted, PHP-protected flat text/CSV file directly on the web server.
- Requires zero MySQL configuration; works on virtually any basic PHP shared host.
- MySQL Database (
USERStable): - High-performance relational backend for sites with larger user bases.
- Automatically initializes and queries tables:
username,password,email,fullname,active,role,avatar, and custom profile fields. - Supports optional access logging to
USERS_LOGor CSV. - Built-in Users List (
login.database.users.json): - Static users defined in the project file, useful for simple password-protected client areas.
Session & Security Engine
- Session Management: Automatically emits
$PHPSESSION$, tracking$_SESSION['username'],$_SESSION['fullname'],$_SESSION['role'], and$_SESSION['avatar']. - Sliding Session Expiration: Enforces session timeouts (
login.sessionTimeout, default 600 seconds) and automatically invalidates abandoned sessions. - Referrer Memory (
$_SESSION['referrer']): When an unauthenticated visitor hits a protected page, it preserves the original URL ($_SERVER['REQUEST_URI']) so they are seamlessly routed back upon successful login. - Password Hashing: Configurable hashing supporting PHP
password_hash()(Bcrypt/Argon2), SHA, and MD5.
2. Comprehensive Tool Catalog (13 Built-in Objects)
A. Authentication & Sign-In
| Tool | MCP Type | Description & Capabilities |
|---|---|---|
| Login Form | loginLogin | The primary authentication form. Supports username or email address sign-in (allowEmailAddressLogin), password input, "Remember Me" persistent cookie, custom error pages, and direct or referrer-based redirection. |
| Single Page Barrier | loginSinglePage | An inline password barrier placed directly on a page. If unauthenticated, it presents an inline password challenge; once authorized, it reveals page content without navigating away. |
| Social Login | loginSocialLogin | OAuth 2.0 / OpenID Connect integration powered by Hybridauth (hybridauth/autoload.php). Authenticates with providers like Google, Facebook, Twitter, and LinkedIn, auto-provisioning the user into the database and assigning default roles. |
| Logout | loginLogout | Configurable logout button or link with FontAwesome icon support. Cleanly unsets all $_SESSION credentials and redirects to a public landing page. |
B. Access Control & Page Protection
| Tool | MCP Type | Description & Capabilities |
|---|---|---|
| Protect Page | loginProtectPage | An invisible controller placed at the top of protected pages. Emits early PHP header guards: checks session validity, verifies sliding timeout, checks authorized user lists, verifies User Roles (e.g. [admin], [editor], [member]), and bounces unauthorized traffic to Access Denied Page. |
| User Redirect | loginUserRedirect | A smart role-based dispatcher. After login, inspects $_SESSION['role'] (syntax [role]) or specific usernames and routes users to customized portals (e.g. [admin] → admin.php, [vip] → premium.php). |
C. Registration & Account Lifecycle
| Tool | MCP Type | Description & Capabilities |
|---|---|---|
| Sign Up Form | loginSignup | Full-featured user registration form with username availability checking, password strength regex matching, password confirmation, Captcha verification (reCAPTCHA, hCaptcha, simple math), avatar upload, and custom profile fields. |
| Account Activation | Embedded in loginSignup | Supports 3 activation modes: Immediate, Email verification link (tokenized activation link sent to user), or Manual Administrator Approval. |
| Password Recovery | loginPasswordRecovery | Handles forgotten passwords. Generates cryptographically secure one-time tokens and dispatches reset links or temporary credentials via PHP mail(), custom SMTP, or PHPMailer with SSL/TLS. |
| Change Password | loginChangePassword | Authenticated self-service form requiring the user to supply their current password before saving a validated new password. |
D. Profile Management & User Context
| Tool | MCP Type | Description & Capabilities |
|---|---|---|
| Login Name / Profile Greeting | loginLoginName | Context-aware dynamic display widget. Injects $_SESSION['username'], $_SESSION['fullname'], or the user's avatar (<img src="<?php echo $_SESSION['avatar']; ?>">). Can also query database stats to show total registered members or the newest member. |
| Edit Profile | loginEditProfile | Subclassed from loginSignup. Automatically prefills with the logged-in user's data and allows them to update their full name, email, avatar, and custom profile attributes. |
| Delete Profile | loginDeleteProfile | Self-service account deletion for privacy and GDPR compliance. Confirms with the user, purges their database record, unsets session tokens, and redirects them to a goodbye page. |
E. Administration & Management
| Tool | MCP Type | Description & Capabilities |
|---|---|---|
| User Administrator | loginAdmin | Web-based management portal. Protected by a dedicated admin password, it allows administrators to search, filter, paginate, manually create, edit, activate/deactivate accounts, and assign user roles without touching phpMyAdmin or the database directly. |
3. Comparing the 3 Storage Modes
| Capability | Built-in Users | Flat-File (usersdb.php) | MySQL Database |
|---|---|---|---|
| Setup Complexity | Zero (Design-time) | None (Creates file on upload) | Requires DB host, user, password |
Self-Registration (loginSignup) | ✕ No | ✓ Yes | ✓ Yes |
| Email Verification | ✕ No | ✓ Yes | ✓ Yes |
| User Roles & Permissions | Basic | ✓ Yes | ✅ Full relational support |
| Avatar & File Uploads | ✕ No | ⚠ Limited | ✅ Full support |
| Social OAuth Logins | ✕ No | ✕ No | ✅ Full Hybridauth support |
Web Admin Panel (loginAdmin) | ✕ No | ✓ Yes | ✓ Yes (Paginated & searchable) |
| Best For | Static client preview | Simple blogs & micro-sites | Enterprise apps, SaaS, community portals |
4. Standard Implementation Workflow
A standard member portal implementation in WYSIWYG Web Builder typically utilizes 5 core pages:
login.php(Public):- Houses
loginLoginandloginSocialLogin. - Links to
signup.phpandrecover.php. - Configured with
Destination Page: redirect.phpanduseReferrer: true. signup.php(Public):- Contains
loginSignupwith Captcha enabled andAccount Activation: Email Verification. - On submission, user receives an email pointing to
activate.php. redirect.php(Protected Dispatcher):- Invisible routing page containing
loginUserRedirect. - Evaluates roles:
[admin]→admin.php,[subscriber]→members.php. members.php(Protected Content Area):- Top of page:
loginProtectPageconfigured to require valid session and allowed roles. - Header area:
loginLoginName(displays avatar + "Welcome, John!"), andloginLogout. - Profile tab:
loginEditProfileandloginChangePassword. admin.php(Protected Management Portal):- Top of page:
loginProtectPageconfigured for role[admin]. - Body:
loginAdminfor user search, activation approval, and role assignments.
The demo website has been built using the native Login Tools in WYSIWYG Web Builder, strictly without any custom HTML or CSS objects.
Project Architecture Overview
| Page | URL | Purpose | Key Native WWB Objects Used |
|---|---|---|---|
| Portal Overview | index.php | Public landing page explaining features & testing steps | LayoutGrid, Heading, Text, Button |
| Member Sign In | login.php | Authentication screen with session creation | LayoutGrid, Heading, Text, loginLogin, Button |
| Registration | signup.php | Self-service registration & account creation | LayoutGrid, Heading, Text, loginSignup, Button |
| Member Dashboard | members.php | Protected portal for authenticated members | loginProtectPage, LayoutGrid, loginLoginName, loginLogout, Button |
| Profile & Security | profile.php | Self-service account profile and password updates | loginProtectPage, LayoutGrid, loginEditProfile, loginChangePassword, loginLogout |
| Admin Console | admin.php | Administrator user directory management | loginProtectPage, LayoutGrid, loginAdmin, loginLogout |
| Password Recovery | recover.php | Lost credentials recovery flow | LayoutGrid, Heading, Text, loginPasswordRecovery, Button |
Native Tools & Configurations
All pages and authentication tools share the flat-file user database (./usersdb.php, database.type: 0), requiring zero MySQL/SQL server configuration:
loginLogin(login.php):- Layout: Responsive (
login.style.layout: 1). - Destination: Redirects authenticated users to
members.php. - Error Handling: Redirects invalid attempts to
login.php. - Features: Remember-me persistent cookie and password hashing.
loginSignup(signup.php):- Layout: Responsive (
signup.style.layout: 1). - Activation: Automatic activation (
signup.approvalMode: 0), allowing users to log in immediately after registration. - Destination: Redirects upon creation to
login.php. loginProtectPage(members.php,profile.php,admin.php):- Injects server-side PHP session verification at the top of the file before page rendering.
- Redirects unauthenticated visitors to
login.phpwhile preserving the intended target URL. loginLoginName(members.php,profile.php):- Displays real-time logged-in user identity:
"Logged in as: <username>". loginLogout(members.php,profile.php,admin.php):- Native session destruction form button styled in slate red, redirecting back to
index.php. loginEditProfile(profile.php):- Self-service form allowing logged-in members to update their registered full name and email address.
loginChangePassword(profile.php):- Form verifying existing password and updating to a new hashed password.
loginAdmin(admin.php):- Embedded administrator management console with items pagination and user activation/editing tools.
- Administrator Password:
admin123. loginPasswordRecovery(recover.php):- Email-based password reset workflow.
Pre-Seeded Test Credentials
A starter database file (./usersdb.php) has been seeded in your project directory for testing:
- Admin User:
- Username:
admin - Password:
admin - Admin Console Password:
admin123 - Standard Member:
- Username:
demouser - Password:
123456 - New Registration:
- Navigate to
signup.phpto register any new username; accounts activate instantly and append directly to./usersdb.php.