Skip to content

Login: Create a Working User Login Page

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

Back to Setting up Site Security Settings

Login: Create a Working User Login Page

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

### Demo Projects HQ shows the full login chain

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.

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.

Security Provider fundamentals

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

Server Connect components (data + forms)

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

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.

Role-Based Redirects After Login

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

Logout Button and Session Exit

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

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.

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.

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.

Google OAuth Login

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

Secure Server-Side Data

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

Go to

Security and Login

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

Wappler Docs Index

Browse Wappler tours by topic and jump into areas like Why Wappler, Learning the Basics, and Wappler's UI.