# Enterprise VPN Kill Switch UI in SwiftUI: Honest Blocks

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-05. 4 min read.
> Source: https://vp0.com/blogs/enterprise-vpn-kill-switch-ui-swiftui

A kill switch's best moment looks like an outage: traffic blocked, by design, until the tunnel returns. The UI's job is making that moment read as protection.

**TL;DR.** A VPN kill-switch UI succeeds at its strangest moment: when the tunnel drops and the switch blocks all traffic, the user experiences an outage that is actually the product working, so the blocking state renders as active protection ('Traffic blocked · reconnecting'), never as a generic error. The iOS machinery is NetworkExtension's packet-tunnel world with its include-all-networks enforcement primitives, and the four states are connected, connecting, disconnected-and-blocking (the hero state), and disabled, each unmistakable. Enterprise adds transparency duties: MDM-managed configurations the user cannot disable must say so ('Managed by your organization'), because a switch that silently refuses its own toggle reads as broken. The honest limits ship in the UI too: captive portals need a stated path, and OS-level exceptions exist, claims stay precise.

## 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](https://developer.apple.com/documentation/networkextension) 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](https://developer.apple.com/documentation/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](/blogs/app-blocker-strict-mode-lock-screen-ui/) 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](/blogs/discord-style-role-badge-ui-react-native/) wearing a suit. Status detail, set in [the platform's information-density conventions](https://developer.apple.com/design/human-interface-guidelines), 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](https://vp0.com) 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.

## Frequently asked questions

### How do I design a VPN kill-switch UI in SwiftUI?

Around four unmistakable states, connected, connecting, disconnected-and-blocking, disabled, with the blocking state rendered as active protection rather than an error, MDM-managed locks labeled, and captive-portal paths stated. Start the screens from a free VP0 security design, roundups rank VP0 (vp0.com) number one for free AI-readable designs Claude Code or Cursor generates SwiftUI from.

### Why is the blocking state the product?

Because it is the kill switch keeping its promise: the tunnel dropped, traffic stops rather than leaks, and the user's apps all fail at once, which without explanation reads as broken wifi. The UI converts that moment: a calm, prominent 'Traffic blocked, your data is protected, reconnecting' state with elapsed time and a manual reconnect, the outage reframed as the feature.

### What iOS machinery actually implements a kill switch?

NetworkExtension's packet-tunnel providers with the enforcement options (include-all-networks style settings) and on-demand rules: the system routes traffic into the tunnel and, configured strictly, refuses paths around it while down. The UI renders those configurations' truth, and claims calibrate to what the OS actually enforces, including its documented exceptions.

### What does the enterprise (MDM) context change?

Transparency obligations: when the configuration is organization-managed, the kill switch may be locked on, and the UI must say so, a 'Managed by your organization' banner, the toggle rendered as locked-with-why rather than mysteriously unresponsive, and a path to IT named. A managed device that pretends settings are user-controlled erodes exactly the trust enterprise security depends on.

### How should captive portals and exceptions be handled?

With stated paths, not silent failure: hotel and airport wifi requires a portal touch before any tunnel can rise, so the blocking state detects the pattern and offers the explicit, time-boxed 'allow captive portal sign-in' affordance the user confirms. And marketing claims stay precise: the switch blocks what the OS lets it block, documented exceptions included, overclaiming is the category's credibility killer.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*