Brent Haskins / Applied AI
Security UX Is a Product Problem: What the 2026 MFA Deadline Teaches Us About Auth Design
By July 2026, Salesforce will enforce MFA in production orgs, forcing teams to update their authentication flows. Most will bolt on a one-time code field and call it done — a mistake that treats security as a backend config rather than a product surface. This post argues that MFA UX is a product engineering problem: state mapping, recovery flows, copy, and context-aware step-up authentication. Drawing on the Salesforce roadmap, no-code auth trends, and real shipping experience, it gives concrete patterns for turning a compliance mandate into a trust-building feature.
The short answer
Salesforce will enforce MFA in sandboxes from June 22, 2026, and in production orgs from July 20, 2026. If your product touches Salesforce or follows similar compliance trends, you're facing a deadline. The easy route is to drop in a TOTP prompt and call it done. That's a mistake.
Auth UX is not a configuration setting. It's a product surface with states, recovery paths, trust signals, and copy that either builds confidence or breeds resentment. Treating MFA as a purely backend requirement ignores the fact that every authentication screen is a moment of truth where a user decides whether your product respects their time and security.
The teams that get this right will turn a compliance mandate into a trust-building feature. The rest will leak users to support tickets and frustrated app closes.
Key takeaways
- Treat auth flows like any other product surface. Map every state: initial, loading, success, error, expired, recovery, and device trust. Each state has a design, a copy strategy, and a fallback.
- Use step-up authentication. Don't prompt for MFA on every login. Risk-score user actions and require MFA only for sensitive operations (billing, data export, role changes).
- Design the recovery flow first. It's the most important screen you'll build for auth. A user without access to their authenticator app should have a clear, time-bound path back in.
- Communicate why, not just how. The UI copy should explain why MFA is required and what's being protected. This reduces friction and builds trust.
- Don't outsource auth UX to a no-code builder's defaults. Tools like WeWeb, Supabase, and Xano can handle logic visually, but you still own the state mapping, error messages, and recovery UX.
The real problem: Auth UX is an afterthought
Most engineering teams treat MFA as a backend toggle. Security ops says "enable MFA," DevOps configures the identity provider, and frontend adds a text field with a generic error state. The result: users hit a confusing prompt with no context, no recovery option, and no idea why they're being asked for a six-digit code they never set up.
Coursera's article on cybersecurity UX design makes a crucial point: "Inform the UX designers about information laws and simple ways to enhance security without compromising the flow of the UX design." But that insight rarely makes it past the design handoff. In practice, security and UX are siloed. Security writes requirements; UX puts a field on the page; engineering wires it up. No one owns the whole experience.
The Salesforce enforcement deadline exposes this gap. Teams will scramble to add MFA by July 2026. The ones that succeed without wrecking their user experience will be those that already think of auth as a product feature with ownership, specs, and testing.
Designing auth as a product surface
Phenomenon Studio's guide to AI-ready UX lists what should be included in modern UI/UX design services: "role logic, state mapping, component rules, responsive behavior, accessibility checks, and handoff notes." Auth flows embody every item on that list.
Start with state mapping. For every auth screen — login, MFA challenge, device verification, recovery — define:
- Loading state: What does the button say? How long before you show a spinner or progress indicator?
- Error state: What happens when the code is wrong? Do you clear the field or let the user correct digits? Do you show a retry timer?
- Expired state: OTP expiration is common. Does the UI automatically refresh or require manual action?
- Recovery state: If the user has lost their device, what's the path? Does it require email verification? Admin approval?
- Device trust state: Can the user mark this device as trusted? What's the trust duration? Can they revoke it?
Each of these states needs component rules, copy, and accessibility checks (focus management, error announcements for screen readers). Write product specs for auth screens just like you would for a dashboard or checkout flow.
The recovery flow is your most important auth screen
Crypto UX articles emphasize trust, transparency, and recovery options. The same applies to any SaaS product. A user who locks themselves out of your application is one bad recovery experience away from churn. The recovery flow is not a support ticket — it's a product screen you should design, test, and monitor.
Map the full recovery journey: user loses phone with authenticator → clicks "can't access device" → verifies identity via email or backup codes → sees a clear timeline for regaining access → can optionally set up a new device. Each step should have a loading state, error state, and fallback.
Crypto custody articles talk about "multi-sig provider evaluation" with categories like security model, recovery options, and UX. Apply that same thoroughness to your own auth recovery. Document your recovery paths in a decision log. Test them with real users who aren't logged into your product.
Where no-code tools fit (and where they don't)
Web application development tools like WeWeb, Xano, and Supabase now handle auth flows visually. You can configure logic, define API endpoints, and set up auth flows in "minutes rather than days." That speed is valuable for prototyping, but it's dangerous to ship production auth on default settings.
A no-code builder's MFA screen likely lacks custom error messages, locale-specific recovery instructions, and transparent copy about why MFA is required. It probably doesn't handle edge cases like expired sessions during a multi-step flow or accessible focus management.
Use these tools for speed, but always audit the auth UI against your state map. Replace default text with your own. Test recovery flows in a sandbox before going live. Own the UX even when the backend is configured through a visual builder.
Closing: A concrete next step
Before the June 2026 deadline, pick one auth screen in your product and write a full product spec for it. Include: entry points, all states (loading, error, empty, success, recovery), copy that explains the value, accessibility requirements, and a test plan for recovery flows. Treat it like a feature you'd ship to increase conversion — because it is.
Security UX is not a compliance problem. It's a product engineering problem. Own it.
FAQ
Questions people ask about this topic.
How do you balance security and UX without annoying users?
Use step-up authentication — require MFA only for high-risk actions like billing changes or data export, not every login. Communicate why each step matters in the UI copy. Map every screen's states (loading, error, recovery) like any product feature. Support device trust so returning users skip prompts until risk signals change.
What's the most common mistake in MFA implementation?
Treating the recovery flow as an afterthought. When users lose their phone or authenticator app, they hit a dead end — then call support or abandon the product. A good recovery UX includes backup codes, trusted device fallback, and clear timelines for re-enrollment. Design recovery as a product surface, not a hallway to a ticket.
How should product engineers prepare for the 2026 MFA enforcement?
Audit your current auth flows against every user state: initial device, second device, lost device, expired session, and account recovery. Add product spec entries for each screen's loading, error, and success states. Review copy — does it explain why MFA is required and how to set it up? Test recovery flows end-to-end before enforcement dates.
Sources
Referenced sources
- https://www.salesforceben.com/june-2026-security-requirements-what-to-expect-and-how-to-prepare/
- https://www.coursera.org/articles/cybersecurity-ux-design
- https://www.weweb.io/blog/web-application-development-process-tools-trends
- https://geekvibesnation.com/phenomenon-studio-guide-to-choosing-a-product-partner-for-ai-ready-ux-web-platforms-and-mvp-growth/