diff --git a/lib/tunnelbroker/tunnelbroker-context.js b/lib/tunnelbroker/tunnelbroker-context.js
--- a/lib/tunnelbroker/tunnelbroker-context.js
+++ b/lib/tunnelbroker/tunnelbroker-context.js
@@ -53,6 +53,8 @@
 
 type Props = {
   +children: React.Node,
+  +shouldBeOpened?: boolean,
+  +onClose?: () => mixed,
   +initMessage: ?ConnectionInitializationMessage,
   +peerToPeerMessageHandler?: (message: PeerToPeerMessage) => mixed,
 };
@@ -70,6 +72,8 @@
 function TunnelbrokerProvider(props: Props): React.Node {
   const {
     children,
+    shouldBeOpened,
+    onClose,
     initMessage: initMessageProp,
     peerToPeerMessageHandler,
   } = props;
@@ -83,11 +87,14 @@
   const isAuthorized = !unauthorizedDeviceID;
 
   const initMessage = React.useMemo(() => {
+    if (!shouldBeOpened) {
+      return null;
+    }
     if (!unauthorizedDeviceID) {
       return initMessageProp;
     }
     return createAnonymousInitMessage(unauthorizedDeviceID);
-  }, [unauthorizedDeviceID, initMessageProp]);
+  }, [shouldBeOpened, unauthorizedDeviceID, initMessageProp]);
 
   const previousInitMessage =
     React.useRef<?TunnelbrokerInitializationMessage>(initMessage);
@@ -144,6 +151,7 @@
     tunnelbrokerSocket.onclose = () => {
       // this triggers the effect hook again and reconnect
       setConnected(false);
+      onClose?.();
       console.log('Connection to Tunnelbroker closed');
     };
     tunnelbrokerSocket.onerror = e => {
@@ -258,6 +266,7 @@
     resetHeartbeatTimeout,
     stopHeartbeatTimeout,
     peerToPeerMessageHandler,
+    onClose,
   ]);
 
   const sendMessage: (message: ClientMessageToDevice) => Promise<void> =
diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -77,6 +77,7 @@
 import css from './style.css';
 import { TooltipProvider } from './tooltips/tooltip-provider.js';
 import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js';
+import { useWebLock, TUNNELBROKER_LOCK_NAME } from './web-lock.js';
 
 void initOpaque();
 
@@ -401,9 +402,15 @@
 
     const tunnelbrokerInitMessage = useSelector(createTunnelbrokerInitMessage);
 
+    const { lockStatus, releaseLock } = useWebLock(TUNNELBROKER_LOCK_NAME);
+
     return (
       <AppThemeWrapper>
-        <TunnelbrokerProvider initMessage={tunnelbrokerInitMessage}>
+        <TunnelbrokerProvider
+          initMessage={tunnelbrokerInitMessage}
+          shouldBeOpened={lockStatus === 'acquired'}
+          onClose={releaseLock}
+        >
           <App
             {...props}
             navInfo={navInfo}
diff --git a/web/web-lock.js b/web/web-lock.js
--- a/web/web-lock.js
+++ b/web/web-lock.js
@@ -137,4 +137,6 @@
   removeDisposeHandler: ((data: mixed) => void) => void,
 };
 
-export { useWebLock };
+const TUNNELBROKER_LOCK_NAME = 'tunnelbroker-lock';
+
+export { useWebLock, TUNNELBROKER_LOCK_NAME };