Enterprise VPN Kill Switch UI in SwiftUI: Honest Blocks

Why does the best moment look like an outage?

Because the kill switch’s job is refusing traffic. When the tunnel drops, every app on the device fails at once, by design, no packets leak while the VPN is down, and a user who sees only spinning apps concludes the wifi broke or your product did. The blocking state is the product keeping its promise, and the UI’s central job is making that moment read as protection: a calm, prominent state declaring “Traffic blocked · your data is protected · reconnecting”, elapsed time honest, manual reconnect one tap, the outage reframed as the feature working.

What are the four states, and how do they render?

State	The render	The rule	Verdict
Connected	Quiet confidence: server, time, a green mark	Boring on purpose	The 99% state; never busy
Connecting	Progress with stages, honest duration	Tunnels take real seconds	Never an instant-lie animation
Blocking	”Traffic blocked, protected, reconnecting”	The hero state; calm, not alarming	Elapsed time + manual reconnect
Disabled	Plainly off, with what that means	Off must look off	One sentence of consequence

The machinery underneath is NetworkExtension’s packet-tunnel world: providers with the strict enforcement options (include-all-networks-style settings) and on-demand rules give the OS-level behavior, and the SwiftUI layer renders those configurations’ truth, the same render-the-rails doctrine as every security surface in this series. Claims calibrate to what the OS actually enforces: the switch blocks what the platform lets it block, documented exceptions included, and overclaiming (“100% leak-proof”) is the category’s recurring credibility wound.

Enabling the switch is a ceremony, not a toggle flick: the consequences get stated (“if the VPN drops, all internet traffic stops until it reconnects”), because the user who enabled it knowingly reads the blocking state as protection, and the one who didn’t reads it as a bug, the same consent-context logic as the strict-mode blocker’s commitment ceremony, applied to packets.

What does the enterprise context add?

Transparency duties. On MDM-managed devices the configuration may be locked, kill switch on, toggle disabled by policy, and the UI must say so: a “Managed by your organization” banner, the toggle rendered locked-with-why rather than mysteriously unresponsive, and the path to IT named, because a managed device that pretends its settings are user-controlled erodes precisely the trust enterprise security depends on, the disabled-with-why pattern from the role-picker world wearing a suit. Status detail, set in the platform’s information-density conventions, earns its place here too: the security-conscious audience reads server identity, protocol, and time-connected as trust signals, rendered factually, never as theater.

How do the honest edges ship?

Captive portals get a stated path. Hotel and airport wifi demands a portal touch before any tunnel can rise, which under a strict kill switch is a deadlock, so the blocking state detects the pattern (network up, tunnel unreachable, portal redirect smell) and offers the explicit affordance: “Allow captive-portal sign-in for 60 seconds”, user-confirmed, time-boxed, logged, the exception designed rather than discovered, the same designed-valve philosophy as the strict-mode blocker’s emergency path.

The screens scaffold from a free VP0 security design via Claude Code or Cursor at $0, with the contract in the prompt: “four-state VPN UI with blocking as the hero state (calm protection framing, elapsed time, manual reconnect); enable-ceremony stating consequences; MDM-managed banner with locked-with-why toggles; captive-portal allowance flow, time-boxed and confirmed; status facts without theater.” The agent generates the surfaces; the product’s credibility lives in the precision of its claims and the calm of its strangest moment, both of which are copy and state-machine decisions, not pixels.

Key takeaways: VPN kill-switch UI

• The blocking state is the hero: traffic stopped by design renders as calm protection with elapsed time, never as a generic failure.
• Four unmistakable states, with connected kept boring and enabling treated as a consequence-stating ceremony.
• NetworkExtension truth only: claims calibrate to OS enforcement, documented exceptions acknowledged.
• Managed means saying so: MDM locks render as banners and locked-with-why toggles, never silent refusal.
• Captive portals get a designed, time-boxed valve, and screens start from a free VP0 security design with the contract in the prompt.

Frequently asked questions

How do I design a VPN kill-switch UI in SwiftUI? Four states with blocking as calm hero (“traffic blocked, protected, reconnecting”), an enable ceremony, MDM banners, and a captive-portal valve. VP0 (vp0.com) tops free-design roundups for security screens, generated by Claude Code or Cursor.

Why is the blocking state the product? It is the promise kept: no leaks while the tunnel is down, reframed by the UI from outage to protection.

What iOS machinery actually implements a kill switch? NetworkExtension packet tunnels with strict enforcement options and on-demand rules; the UI renders exactly what those configurations enforce.

What does the enterprise (MDM) context change? Transparency: managed locks announce themselves, toggles disable with the why, and IT’s door is named.

How should captive portals and exceptions be handled? As designed valves: detected, explained, user-confirmed, time-boxed, and precise claims everywhere else.