Login: Create a Working User Login Page

Back to Demo walkthroughs: Demo Projects HQ

Login: Create a Working User Login Page

See the real Demo Projects HQ login flow, from the page form to the shared Security Provider.

Use Demo Projects HQ as the reference implementation for login because it shows the full chain clearly. The frontend page is `views/login.ejs`. Its `login_form` submits to `/api/auth/login` through a `dmx-serverconnect-form`. On success it redirects to `/`, and on `401` it shows a focused invalid-credentials message.

The backend action is app/api/auth/login.json. It accepts username, password, and remember, then runs auth.login with the shared security provider. That provider is defined in app/modules/SecurityProviders/security.json as a Database provider against the users table, with password verification enabled and an admin permission derived from the role column.

That is the modern login mental model to teach: one shared provider, one login action, one page form, and protected routes that reuse the same identity and permission state after sign-in.

Working login flow

Start with the shared provider and form wiring, then follow the same identity into protected pages and secure actions.

Start here

Setting up Site Security Settings

Understand Wappler Security Providers, provider types, and the shared settings that power login and access control across a project.

Open hub

Security Provider fundamentals

See how Security Providers drive login sessions, action restrictions, and protected page flows across a Wappler project.

Open tour

Server Connect components (data + forms)

Load data and submit forms via Server Connect components, using built-in state (executing/lastError/data).

Open tour

Continue with protected app flows

Security: Restricting Access to Your Page

Use the App Root security properties to understand shared layout protection, page-specific access rules, and the inspector fields that control login and permission redirects.

Open tour

Role-Based Redirects After Login

Use provider permissions and route decisions to send different Wappler users to the right post-login destination.

Open tour

Logout Button and Session Exit

Build a predictable logout flow in Wappler so sessions end cleanly and protected areas become inaccessible immediately.

Open tour

Demo walkthrough: Route, page, and action handoff

Use Demo Projects HQ to connect route-aware pages, layouts, and the real Server Connect actions that power them.

Open tour

Demo walkthrough: User update (routing + session + security)

Use the real users/update.json action in Demo Projects HQ to connect route params, session context, permissions, and a secure database update.

Open tour

Expand the auth flow

Register and Auto Login

Plan a registration flow in Wappler that creates the account, starts the session, and hands the user into the app cleanly.

Open tour

Google OAuth Login

Understand how Google OAuth fits into Wappler security flows, from provider setup to callback handling and protected routes.

Open tour

Secure Server-Side Data

Learn how Wappler protects server actions with shared providers, session context, and permission-aware enforcement.

Open tour

Go to

Security and Login

Start here for security-aware workflows in Wappler: session context, login-related server logic, and safe state handling.

Open tour

Wappler Docs Index

Structured hub for Wappler learning paths across onboarding, how-to guides, reference tours, switching guides, and product-area indexes.

Open tour