The Complete Login Module - for Web, PWA and Native - React Ready

Content Type: Module
Categories: Utility,User Interface,Authentication

Overview

Login Module (React Ready & Fully Configurable) A polished, secure, multilingual login experience with runtime configuration, React Ready, Native and PWA  readiness, and powerful UX.

✨ Highlights

  • ✅ React-ready: use the same entities & flows across Web, Native & PWA
  • ✅ Strong validation UX with real-time password policy feedback
  • ✅ Fully translatable, with runtime control for messages & announcements
  • ✅ Responsive design with easily configurable visuals (image/logo/snippets)
  • ✅ Deeply integrated Forgot Password flow with QR deeplink support for mobile
  • ✅ Language switching on all pages, with session-based fallback
  • ✅ Modular: works standalone, or integrate with your own login flows

🚀 Features

  • 🔐 Secure login with validation
    • Checks for filled-in username + password
    • Enforces admin-defined password rules
    • Friendly and translatable validation and error messages
  • 💠 Admin-configurable password policies
    • Digit / Mixed case / Symbol / Minimum length
    • Obfuscation toggle: visible during reset, hidden during login
    • Password reset flow shows live checklist of requirements
  • 📣 Announcement Management
    • One active announcement at a time on the login page
    • Multi-language runtime configuration of Announcements
    • Admin-only publish window with title/message
  • ↻ Forgot Password flow
    • Includes email + QR deep link support (for Native apps; based on xzing (Google))
    • Translatable forgot password templates,
    • Forgot password mails sent in the session language of the anon user
    • Supports username or email-based lookup
    • Incremental lockout after failed reset attempts
    • Fully audit-logged with secure token expiry
  • 🌐 Language Switching
    • Shown on login and pw reset pages
    • Keeps filled-in form data when switching language
    • Optional visibility toggle per app needs by Admin
  • 🌍 Runtime Translation Support
    • Dynamic translations manageable via Translator UI
    • Built-in translator role for runtime updates
    • Ships with nl_NL and en_US prefilled
    • Greatly reduced number of static tokens by using ENUM_Translations
  • 🖼️ Customizable Look & Feel
    • Based on standard Mx login.html layout; fully responsive
    • Easily swap background image, logo, and styles
    • Snippets reusable across your app pages
    • All styling contained in main.scss — tweak to your liking.

📆 Required Modules

  • CommunityCommons
  • NanoflowCommons
  • NativeMobileResources
  • ForgotPassword (+ dependencies):
    • EmailConnector
    • Encryption
    • MxModelReflection

🔄 Tip: After installing modules, re-download Data Widgets module and run "Update all widgets" to make sure you have the latest widgets.

👤 Roles

  • Login.Anon — used by anonymous users to log in
  • Login.Admin — configure password policies + announcements
  • Login.Translator — manage dynamic translation tokens

🔐 Example App/Module Role Setup

  • Admin user roles:
    • Administration.Administrator
    • CommunityCommons.Administrator
    • EmailConnector.EmailConnectorAdmin
    • ForgotPassword.Administrator
    • MxModelReflection.ModelAdministrator
    • Login.Admin
    • Login.Translator
  • Anonymous user roles:
    • Login.Anon

🛠️ Implementation Guide

  1. Install dependencies & fix initial errors
    • Exclude 'Step3_DL_SetNewPassword from ForgotPassword' (deprecated)
    • Right-click to "Update all widgets"
    • Update security in EmailConnector if needed
    • Right-click design property errors → "Update all..."
    • For React-ready: convert reference selector to ComboBox in Forgot Password; skip the missing onChange error (notified Mendix team)
  2. Configure roles
    • Connect app roles to module roles (see example above)
    • If necessary, set up anonymous user:
      • Add the Anonymous user role to your project security
      • Add a demo_anon demo user + use Account as entity.
      • Map the anonymous role only to the Login.Anon module role
      • Do no connect the anonymous user to Forgot Password (not necessary)
  3. Startup microflow
    • Add ASU_LoginConfiguration_GetOrCreate to your After Startup logic
  4. Set up navigation
    • Login.Login_Anon → Anonymous role-based home page
    • Login.LoginConfiguration_Admin → Admin navigation
    • Login.TranslatedAnnouncement_Overview_Admin → Admin navigation
    • Login.Translation_Overview → Translator nav or Admin nav
    • Don't forget:
      • MxModelReflection.MxObjects_Overview -> Admin nav
      • ForgotPassword.ForgotPasswordConfiguration_Edit -> Admin nav
      • Email_Connector.ACT_EmailAccount_LaunchEmailConnectorOverview -> admin nav
  5. Set up Encryption Constants
    • Define 32-character strings for:
      • Encryption.EncryptionKey
      • Encryption.EncryptionPrefix
  6. Enable email support
    • Configure SMTP using EmailConnector
    • Create email templates (at least one per supported language)
    • Use Mailhog or similar for local dev
    • Templates automatically apply based on session language
  7. Mx Model Reflection setup
    • Enable reflection for:
      • EmailConnector
      • Forgot Password
      • Login
      • MxModelReflection
  8. Module UI tweaks (optional but recommended)
    • In ForgotPassword admin page ForgotPasswordConfiguration_Edit, swap in the Login module version of the ForgotPasswordConfiguration snippet
    • If needed: fix EmailTemplateLanguage read access for EmailConnectorAdmin role
  9. Final touches
    • Go to Login.LoginConfiguration_Admin
      • Set your password policy to match that of your app
      • Toggle language switcher (disable if single-language app)

🖼️ Tips & Customizations

  • Change login background image? Go to Login.Login_Anon, edit the image widget → changes will auto-apply on all pages using the snippet.
  • Want to use on React Native? Copy Login.Login_Anon, reset layout to a native one, and replace widgets with native equivalents. (A Native Extension Module will be released soon.)
  • Want web QR codes? Go to '_1_MFC_StringUsernameEmail_SendNewPassword' and change the input of 'SUB_UrlString_GenerateQrCodeEmailAttachment' to the web link. Then change the Emailtemplate messages to your liking. 
  • Need full translations for templates? Use Login.Enum_Translations or edit the generated templates directly.
  • Emails in session language? This is supported — Dutch session gets Dutch email; English gets English.

💡 Missing Feature Ideas for Next Release?

  • Sign up with workflow for Admin user account approval
  • Native extension module

🥳 You're done! Log in, reset passwords, send announcements, switch languages — all from one flexible, React-ready module.

 

Documentation

Typical usage scenario

This module is ideal for applications that require a modern, secure, and flexible login experience. It supports both internal business apps and public-facing platforms, especially those targeting a multilingual audience or needing mobile support. Customers can use this module to:

  • Log in securely across Web, PWA, and React Native

  • Handle password resets via email and QR codes

  • Configure password strength policies without development changes

  • Show multilingual system announcements to anonymous users

  • Manage login translations dynamically without redeployment

It solves challenges around centralized configuration, translation, login security, and cross-platform consistency.

Features and limitations

Features:

  • React Native compatible flows and entities

  • Password validation and live feedback

  • Configurable password strength policies (length, case, symbol, digit)

  • Translatable forgot password flows and announcements

  • QR code support for password reset (mobile-friendly)

  • Language switching on all pages (session-aware)

  • Runtime dynamic translation editor (Translator role)

  • Support for easily changing visuals (logo, background, layout)

  • Admin UI to configure login settings, announcements, and translations

Limitations:

  • No built-in CAPTCHA or brute-force protection (yet)

  • No MFA (Multi-Factor Authentication) or SSO/OIDC support out-of-the-box -> can be added easily with relevant modules

  • No out-of-the-box user registration flow (planned) -> is easy to implement with the same module prereqs.

  • Native page layouts must be manually recreated (extension coming soon)

  • Not yet localized beyond nl_NL and en_US

Dependencies

This module depends on the following other Marketplace modules:

  • CommunityCommons

  • NanoflowCommons

  • NativeMobileResources

  • ForgotPassword (and its dependencies):

    • EmailConnector

    • Encryption

    • MxModelReflection

Installation

  1. Download the module and all its dependencies

  2. Update widgets and fix expected errors (instructions included)

  3. Configure roles (Admin, Anon, Translator)

  4. Add ASU_LoginConfiguration_GetOrCreate to your app’s After Startup microflow

  5. Set up navigation for anonymous and admin roles

  6. Create and configure email templates for each supported language

  7. Optionally tweak visuals and email content

  8. Test login, reset, and translation flows

Configuration

  • Use the LoginConfiguration_Admin page to define password policies

  • Use the TranslatedAnnouncement_Overview_Admin to manage multilingual system messages

  • Use the Translation_Overview page to add or edit dynamic translations

  • EmailConnector must be connected to a valid SMTP account

  • The language switcher can be disabled if your app uses only one language

Known bugs

  • ForgotPassword module may show a read-access error on EmailTemplateLanguage_EmailTemplate → fix with a read rule for the EmailConnectorAdmin role

  • Converting the reference selector to ComboBox for Native use causes a missing onChange validation warning (harmless)

  • Some styling elements require manual tweaks if you deviate from the default layout

Frequently Asked Questions

Q: Can I use this in a Native app?A: Yes! All entities and flows are designed to be Native compatible. You’ll need to create native versions of the pages (see tips in the README).

Q: Are the emails fully translatable?A: Yes. Templates are selected based on the session language of the user. You can tweak or override them as needed.

Q: Is it secure?A: Yes. All flows are audit-logged, password inputs are obfuscated, reset tokens expire, and configurations are admin-controlled.

Q: Can I change the layout or logo?A: Absolutely. The layout is snippet-based, and images are easily swappable. Styling is in main.scss.

Q: Does it support sign-up flows?A: Not yet, but it's planned. The foundation is ready for it.

Releases

Version: 1.0.0
Framework Version: 10.21.0
Release Notes: First release