diff --git a/lib/hooks/qr-auth.js b/lib/hooks/qr-auth.js
index ba3d9ea0a..58120e38e 100644
--- a/lib/hooks/qr-auth.js
+++ b/lib/hooks/qr-auth.js
@@ -1,177 +1,174 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { IdentityClientContext } from '../shared/identity-client-context.js';
 import { useTunnelbroker } from '../tunnelbroker/tunnelbroker-context.js';
 import type { BackupKeys } from '../types/backup-types.js';
 import {
   tunnelbrokerMessageTypes,
   type TunnelbrokerMessage,
 } from '../types/tunnelbroker/messages.js';
 import {
   peerToPeerMessageTypes,
   peerToPeerMessageValidator,
   type QRCodeAuthMessage,
 } from '../types/tunnelbroker/peer-to-peer-message-types.js';
 import {
   qrCodeAuthMessageTypes,
   type QRCodeAuthMessagePayload,
 } from '../types/tunnelbroker/qr-code-auth-message-types.js';
 
 type QRAuthHandlerInput = {
   +secondaryDeviceID: ?string,
   +aesKey: ?string,
   +performSecondaryDeviceRegistration: (userID: string) => Promise<void>,
   +composeMessage: (
     encryptionKey: string,
     payload: QRCodeAuthMessagePayload,
   ) => Promise<QRCodeAuthMessage>,
   +processMessage: (
     encryptionKey: string,
     message: QRCodeAuthMessage,
   ) => Promise<?QRCodeAuthMessagePayload>,
   +performBackupRestore?: (backupKeys: BackupKeys) => Promise<void>,
 };
 
 function useQRAuth(input: QRAuthHandlerInput) {
   const {
     secondaryDeviceID,
     aesKey,
     processMessage,
     composeMessage,
     performSecondaryDeviceRegistration,
     performBackupRestore,
   } = input;
   const [primaryDeviceID, setPrimaryDeviceID] = React.useState<?string>();
   const {
     setUnauthorizedDeviceID,
     addListener,
     removeListener,
-    connected: tunnelbrokerConnected,
-    isAuthorized,
+    socketState,
     sendMessage,
   } = useTunnelbroker();
 
   const identityContext = React.useContext(IdentityClientContext);
   const identityClient = identityContext?.identityClient;
 
   React.useEffect(() => {
     if (
       !secondaryDeviceID ||
       !aesKey ||
-      !tunnelbrokerConnected ||
-      !isAuthorized ||
+      !socketState.isAuthorized ||
       !primaryDeviceID
     ) {
       return;
     }
 
     void (async () => {
       const message = await composeMessage(aesKey, {
         type: qrCodeAuthMessageTypes.SECONDARY_DEVICE_REGISTRATION_SUCCESS,
         requestBackupKeys: true,
       });
       await sendMessage({
         deviceID: primaryDeviceID,
         payload: JSON.stringify(message),
       });
     })();
   }, [
-    tunnelbrokerConnected,
-    isAuthorized,
     sendMessage,
     primaryDeviceID,
     aesKey,
     secondaryDeviceID,
     composeMessage,
+    socketState,
   ]);
 
   const tunnelbrokerMessageListener = React.useCallback(
     async (message: TunnelbrokerMessage) => {
       invariant(identityClient, 'identity context not set');
       if (
         !aesKey ||
         message.type !== tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE
       ) {
         return;
       }
 
       let innerMessage;
       try {
         innerMessage = JSON.parse(message.payload);
       } catch {
         return;
       }
       if (
         !peerToPeerMessageValidator.is(innerMessage) ||
         innerMessage.type !== peerToPeerMessageTypes.QR_CODE_AUTH_MESSAGE
       ) {
         return;
       }
 
       let qrCodeAuthMessage;
       try {
         qrCodeAuthMessage = await processMessage(aesKey, innerMessage);
       } catch (err) {
         console.warn('Failed to decrypt Tunnelbroker QR auth message:', err);
         return;
       }
 
       if (
         qrCodeAuthMessage &&
         qrCodeAuthMessage.type ===
           qrCodeAuthMessageTypes.BACKUP_DATA_KEY_MESSAGE
       ) {
         const { backupID, backupDataKey, backupLogDataKey } = qrCodeAuthMessage;
         void performBackupRestore?.({
           backupID,
           backupDataKey,
           backupLogDataKey,
         });
         return;
       }
 
       if (
         !qrCodeAuthMessage ||
         qrCodeAuthMessage.type !==
           qrCodeAuthMessageTypes.DEVICE_LIST_UPDATE_SUCCESS
       ) {
         return;
       }
       const { primaryDeviceID: receivedPrimaryDeviceID, userID } =
         qrCodeAuthMessage;
       setPrimaryDeviceID(receivedPrimaryDeviceID);
 
       await performSecondaryDeviceRegistration(userID);
       setUnauthorizedDeviceID(null);
     },
     [
       setUnauthorizedDeviceID,
       identityClient,
       aesKey,
       performSecondaryDeviceRegistration,
       performBackupRestore,
       processMessage,
     ],
   );
 
   React.useEffect(() => {
     if (!secondaryDeviceID) {
       return undefined;
     }
 
     addListener(tunnelbrokerMessageListener);
     return () => {
       removeListener(tunnelbrokerMessageListener);
     };
   }, [
     secondaryDeviceID,
     addListener,
     removeListener,
     tunnelbrokerMessageListener,
   ]);
 }
 
 export { useQRAuth };
diff --git a/lib/tunnelbroker/tunnelbroker-context.js b/lib/tunnelbroker/tunnelbroker-context.js
index df8c8a2a2..26fd281fd 100644
--- a/lib/tunnelbroker/tunnelbroker-context.js
+++ b/lib/tunnelbroker/tunnelbroker-context.js
@@ -1,437 +1,449 @@
 // @flow
 
 import invariant from 'invariant';
 import _isEqual from 'lodash/fp/isEqual.js';
 import * as React from 'react';
 import uuid from 'uuid';
 
 import { PeerToPeerProvider } from './peer-to-peer-context.js';
 import { PeerToPeerMessageHandler } from './peer-to-peer-message-handler.js';
 import type { SecondaryTunnelbrokerConnection } from './secondary-tunnelbroker-connection.js';
 import { tunnnelbrokerURL } from '../facts/tunnelbroker.js';
 import { IdentityClientContext } from '../shared/identity-client-context.js';
 import { tunnelbrokerHeartbeatTimeout } from '../shared/timeouts.js';
 import { isWebPlatform } from '../types/device-types.js';
 import type { MessageSentStatus } from '../types/tunnelbroker/message-to-device-request-status-types.js';
 import type { MessageToDeviceRequest } from '../types/tunnelbroker/message-to-device-request-types.js';
 import {
   type TunnelbrokerMessage,
   tunnelbrokerMessageTypes,
   tunnelbrokerMessageValidator,
 } from '../types/tunnelbroker/messages.js';
 import type {
   AnonymousInitializationMessage,
   ConnectionInitializationMessage,
   TunnelbrokerInitializationMessage,
   TunnelbrokerDeviceTypes,
 } from '../types/tunnelbroker/session-types.js';
 import type { Heartbeat } from '../types/websocket/heartbeat-types.js';
 import { getConfig } from '../utils/config.js';
 import { getContentSigningKey } from '../utils/crypto-utils.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 export type TunnelbrokerClientMessageToDevice = {
   +deviceID: string,
   +payload: string,
 };
 
 export type TunnelbrokerSocketListener = (
   message: TunnelbrokerMessage,
 ) => mixed;
 
 type PromiseCallbacks = {
   +resolve: () => void,
   +reject: (error: string) => void,
 };
 type Promises = { [clientMessageID: string]: PromiseCallbacks };
 
+type TunnelbrokerSocketState =
+  | {
+      +connected: true,
+      +isAuthorized: boolean,
+    }
+  | {
+      +connected: false,
+    };
+
 type TunnelbrokerContextType = {
   +sendMessage: (
     message: TunnelbrokerClientMessageToDevice,
     messageID: ?string,
   ) => Promise<void>,
   +addListener: (listener: TunnelbrokerSocketListener) => void,
   +removeListener: (listener: TunnelbrokerSocketListener) => void,
-  +connected: boolean,
-  +isAuthorized: boolean,
+  +socketState: TunnelbrokerSocketState,
   +setUnauthorizedDeviceID: (unauthorizedDeviceID: ?string) => void,
 };
 
 const TunnelbrokerContext: React.Context<?TunnelbrokerContextType> =
   React.createContext<?TunnelbrokerContextType>();
 
 type Props = {
   +children: React.Node,
   +shouldBeClosed?: boolean,
   +onClose?: () => mixed,
   +secondaryTunnelbrokerConnection?: SecondaryTunnelbrokerConnection,
 };
 
 function getTunnelbrokerDeviceType(): TunnelbrokerDeviceTypes {
   return isWebPlatform(getConfig().platformDetails.platform) ? 'web' : 'mobile';
 }
 
 function createAnonymousInitMessage(
   deviceID: string,
 ): AnonymousInitializationMessage {
   return ({
     type: 'AnonymousInitializationMessage',
     deviceID,
     deviceType: getTunnelbrokerDeviceType(),
   }: AnonymousInitializationMessage);
 }
 
 function TunnelbrokerProvider(props: Props): React.Node {
   const { children, shouldBeClosed, onClose, secondaryTunnelbrokerConnection } =
     props;
 
   const accessToken = useSelector(state => state.commServicesAccessToken);
   const userID = useSelector(state => state.currentUserInfo?.id);
 
   const [unauthorizedDeviceID, setUnauthorizedDeviceID] =
     React.useState<?string>(null);
   const isAuthorized = !unauthorizedDeviceID;
 
   const createInitMessage = React.useCallback(async () => {
     if (shouldBeClosed) {
       return null;
     }
 
     if (unauthorizedDeviceID) {
       return createAnonymousInitMessage(unauthorizedDeviceID);
     }
 
     if (!accessToken || !userID) {
       return null;
     }
 
     const deviceID = await getContentSigningKey();
     if (!deviceID) {
       return null;
     }
     return ({
       type: 'ConnectionInitializationMessage',
       deviceID,
       accessToken,
       userID,
       deviceType: getTunnelbrokerDeviceType(),
     }: ConnectionInitializationMessage);
   }, [accessToken, shouldBeClosed, unauthorizedDeviceID, userID]);
 
   const previousInitMessage =
     React.useRef<?TunnelbrokerInitializationMessage>(null);
 
-  const [connected, setConnected] = React.useState(false);
+  const [socketState, setSocketState] = React.useState<TunnelbrokerSocketState>(
+    { connected: false },
+  );
   const listeners = React.useRef<Set<TunnelbrokerSocketListener>>(new Set());
   const socket = React.useRef<?WebSocket>(null);
   const socketSessionCounter = React.useRef(0);
   const promises = React.useRef<Promises>({});
   const heartbeatTimeoutID = React.useRef<?TimeoutID>();
 
   const identityContext = React.useContext(IdentityClientContext);
   invariant(identityContext, 'Identity context should be set');
   const { identityClient } = identityContext;
 
   const stopHeartbeatTimeout = React.useCallback(() => {
     if (heartbeatTimeoutID.current) {
       clearTimeout(heartbeatTimeoutID.current);
       heartbeatTimeoutID.current = null;
     }
   }, []);
 
   const resetHeartbeatTimeout = React.useCallback(() => {
     stopHeartbeatTimeout();
     heartbeatTimeoutID.current = setTimeout(() => {
       socket.current?.close();
-      setConnected(false);
+      setSocketState({ connected: false });
     }, tunnelbrokerHeartbeatTimeout);
   }, [stopHeartbeatTimeout]);
 
   // determine if the socket is active (not closed or closing)
   const isSocketActive =
     socket.current?.readyState === WebSocket.OPEN ||
     socket.current?.readyState === WebSocket.CONNECTING;
 
   const connectionChangePromise = React.useRef<?Promise<void>>(null);
   // The Tunnelbroker connection can have 4 states:
   // - DISCONNECTED: isSocketActive = false, connected = false
   //   Should be in this state when initMessage is null
   // - CONNECTING: isSocketActive = true, connected = false
   //   This lasts until Tunnelbroker sends ConnectionInitializationResponse
   // - CONNECTED: isSocketActive = true, connected = true
   // - DISCONNECTING: isSocketActive = false, connected = true
   //   This lasts between socket.close() and socket.onclose()
   React.useEffect(() => {
     connectionChangePromise.current = (async () => {
       await connectionChangePromise.current;
       try {
         const initMessage = await createInitMessage();
         const initMessageChanged = !_isEqual(
           previousInitMessage.current,
           initMessage,
         );
         previousInitMessage.current = initMessage;
 
         // when initMessage changes, we need to close the socket
         // and open a new one
         if (
           (!initMessage || initMessageChanged) &&
           isSocketActive &&
           socket.current
         ) {
           socket.current?.close();
           return;
         }
 
         // when we're already connected (or pending disconnection),
         // or there's no init message to start with, we don't need
         // to do anything
-        if (connected || !initMessage || socket.current) {
+        if (socketState.connected || !initMessage || socket.current) {
           return;
         }
 
         const tunnelbrokerSocket = new WebSocket(tunnnelbrokerURL);
 
         tunnelbrokerSocket.onopen = () => {
           tunnelbrokerSocket.send(JSON.stringify(initMessage));
         };
 
         tunnelbrokerSocket.onclose = () => {
           // this triggers the effect hook again and reconnect
-          setConnected(false);
+          setSocketState({ connected: false });
           onClose?.();
           socket.current = null;
           console.log('Connection to Tunnelbroker closed');
         };
         tunnelbrokerSocket.onerror = e => {
           console.log('Tunnelbroker socket error:', e.message);
         };
         tunnelbrokerSocket.onmessage = (event: MessageEvent) => {
           if (typeof event.data !== 'string') {
             console.log('socket received a non-string message');
             return;
           }
           let rawMessage;
           try {
             rawMessage = JSON.parse(event.data);
           } catch (e) {
             console.log('error while parsing Tunnelbroker message:', e.message);
             return;
           }
 
           if (!tunnelbrokerMessageValidator.is(rawMessage)) {
             console.log('invalid TunnelbrokerMessage');
             return;
           }
           const message: TunnelbrokerMessage = rawMessage;
 
           resetHeartbeatTimeout();
 
           for (const listener of listeners.current) {
             listener(message);
           }
 
           // MESSAGE_TO_DEVICE is handled in PeerToPeerMessageHandler
           if (
             message.type ===
             tunnelbrokerMessageTypes.CONNECTION_INITIALIZATION_RESPONSE
           ) {
-            if (message.status.type === 'Success' && !connected) {
-              setConnected(true);
+            if (message.status.type === 'Success' && !socketState.connected) {
+              setSocketState({ connected: true, isAuthorized });
               console.log(
                 'session with Tunnelbroker created. isAuthorized:',
                 isAuthorized,
               );
-            } else if (message.status.type === 'Success' && connected) {
+            } else if (
+              message.status.type === 'Success' &&
+              socketState.connected
+            ) {
               console.log(
                 'received ConnectionInitializationResponse with status: Success for already connected socket',
               );
             } else {
-              setConnected(false);
+              setSocketState({ connected: false });
               console.log(
                 'creating session with Tunnelbroker error:',
                 message.status.data,
               );
             }
           } else if (
             message.type ===
             tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE_REQUEST_STATUS
           ) {
             for (const status: MessageSentStatus of message.clientMessageIDs) {
               if (status.type === 'Success') {
                 promises.current[status.data]?.resolve();
                 delete promises.current[status.data];
               } else if (status.type === 'Error') {
                 promises.current[status.data.id]?.reject(status.data.error);
                 delete promises.current[status.data.id];
               } else if (status.type === 'SerializationError') {
                 console.log('SerializationError for message: ', status.data);
               } else if (status.type === 'InvalidRequest') {
                 console.log('Tunnelbroker recorded InvalidRequest');
               }
             }
           } else if (message.type === tunnelbrokerMessageTypes.HEARTBEAT) {
             const heartbeat: Heartbeat = {
               type: tunnelbrokerMessageTypes.HEARTBEAT,
             };
             socket.current?.send(JSON.stringify(heartbeat));
           }
         };
 
         socket.current = tunnelbrokerSocket;
         socketSessionCounter.current = socketSessionCounter.current + 1;
       } catch (err) {
         console.log('Tunnelbroker connection error:', err);
       }
     })();
   }, [
-    connected,
     isSocketActive,
     isAuthorized,
     resetHeartbeatTimeout,
     stopHeartbeatTimeout,
     identityClient,
     onClose,
     createInitMessage,
+    socketState.connected,
   ]);
 
   const sendMessageToDeviceRequest: (
     request: MessageToDeviceRequest,
   ) => Promise<void> = React.useCallback(
     request => {
       return new Promise((resolve, reject) => {
-        const socketActive = connected && socket.current;
+        const socketActive = socketState.connected && socket.current;
         if (!shouldBeClosed && !socketActive) {
           throw new Error('Tunnelbroker not connected');
         }
         promises.current[request.clientMessageID] = {
           resolve,
           reject,
         };
         if (socketActive) {
           socket.current?.send(JSON.stringify(request));
         } else {
           secondaryTunnelbrokerConnection?.sendMessage(request);
         }
       });
     },
-    [connected, secondaryTunnelbrokerConnection, shouldBeClosed],
+    [socketState, secondaryTunnelbrokerConnection, shouldBeClosed],
   );
 
   const sendMessage: (
     message: TunnelbrokerClientMessageToDevice,
     messageID: ?string,
   ) => Promise<void> = React.useCallback(
     (message: TunnelbrokerClientMessageToDevice, messageID: ?string) => {
       const clientMessageID = messageID ?? uuid.v4();
       const messageToDevice: MessageToDeviceRequest = {
         type: tunnelbrokerMessageTypes.MESSAGE_TO_DEVICE_REQUEST,
         clientMessageID,
         deviceID: message.deviceID,
         payload: message.payload,
       };
 
       return sendMessageToDeviceRequest(messageToDevice);
     },
     [sendMessageToDeviceRequest],
   );
 
   React.useEffect(
     () =>
       secondaryTunnelbrokerConnection?.onSendMessage(message => {
         if (shouldBeClosed) {
           // We aren't supposed to be handling it
           return;
         }
 
         void (async () => {
           try {
             await sendMessageToDeviceRequest(message);
             secondaryTunnelbrokerConnection.setMessageStatus(
               message.clientMessageID,
             );
           } catch (error) {
             secondaryTunnelbrokerConnection.setMessageStatus(
               message.clientMessageID,
               error,
             );
           }
         })();
       }),
     [
       secondaryTunnelbrokerConnection,
       sendMessageToDeviceRequest,
       shouldBeClosed,
     ],
   );
 
   React.useEffect(
     () =>
       secondaryTunnelbrokerConnection?.onMessageStatus((messageID, error) => {
         if (error) {
           promises.current[messageID].reject(error);
         } else {
           promises.current[messageID].resolve();
         }
         delete promises.current[messageID];
       }),
     [secondaryTunnelbrokerConnection],
   );
 
   const addListener = React.useCallback(
     (listener: TunnelbrokerSocketListener) => {
       listeners.current.add(listener);
     },
     [],
   );
 
   const removeListener = React.useCallback(
     (listener: TunnelbrokerSocketListener) => {
       listeners.current.delete(listener);
     },
     [],
   );
 
   const getSessionCounter = React.useCallback(
     () => socketSessionCounter.current,
     [],
   );
 
   const doesSocketExist = React.useCallback(() => !!socket.current, []);
 
   const socketSend = React.useCallback((message: string) => {
     socket.current?.send(message);
   }, []);
 
   const value: TunnelbrokerContextType = React.useMemo(
     () => ({
       sendMessage,
-      connected,
-      isAuthorized,
+      socketState,
       addListener,
       removeListener,
       setUnauthorizedDeviceID,
     }),
-    [addListener, connected, removeListener, sendMessage, isAuthorized],
+    [sendMessage, socketState, addListener, removeListener],
   );
 
   return (
     <TunnelbrokerContext.Provider value={value}>
       <PeerToPeerMessageHandler
         getSessionCounter={getSessionCounter}
         doesSocketExist={doesSocketExist}
         socketSend={socketSend}
       />
       <PeerToPeerProvider>{children}</PeerToPeerProvider>
     </TunnelbrokerContext.Provider>
   );
 }
 
 function useTunnelbroker(): TunnelbrokerContextType {
   const context = React.useContext(TunnelbrokerContext);
   invariant(context, 'TunnelbrokerContext not found');
 
   return context;
 }
 
 export { TunnelbrokerProvider, useTunnelbroker };
diff --git a/native/profile/tunnelbroker-menu.react.js b/native/profile/tunnelbroker-menu.react.js
index 15522363a..38c412a79 100644
--- a/native/profile/tunnelbroker-menu.react.js
+++ b/native/profile/tunnelbroker-menu.react.js
@@ -1,264 +1,264 @@
 // @flow
 
 import * as React from 'react';
 import { useState } from 'react';
 import { Text, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { IdentityClientContext } from 'lib/shared/identity-client-context.js';
 import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import {
   tunnelbrokerMessageTypes,
   type TunnelbrokerMessage,
 } from 'lib/types/tunnelbroker/messages.js';
 import {
   type EncryptedMessage,
   peerToPeerMessageTypes,
 } from 'lib/types/tunnelbroker/peer-to-peer-message-types.js';
 import {
   createOlmSessionsWithOwnDevices,
   getContentSigningKey,
 } from 'lib/utils/crypto-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Button from '../components/button.react.js';
 import TextInput from '../components/text-input.react.js';
 import { olmAPI } from '../crypto/olm-api.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, useStyles } from '../themes/colors.js';
 
 type Props = {
   +navigation: ProfileNavigationProp<'TunnelbrokerMenu'>,
   +route: NavigationRoute<'TunnelbrokerMenu'>,
 };
 
 // eslint-disable-next-line no-unused-vars
 function TunnelbrokerMenu(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   const currentUserID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const identityContext = React.useContext(IdentityClientContext);
 
-  const { connected, addListener, sendMessage, removeListener } =
+  const { socketState, addListener, sendMessage, removeListener } =
     useTunnelbroker();
   const [messages, setMessages] = useState<TunnelbrokerMessage[]>([]);
   const [recipient, setRecipient] = useState('');
   const [message, setMessage] = useState('');
   const [deviceID, setDeviceID] = React.useState<?string>();
 
   React.useEffect(() => {
     void (async () => {
       const contentSigningKey = await getContentSigningKey();
       setDeviceID(contentSigningKey);
     })();
   }, []);
 
   const listener = React.useCallback((msg: TunnelbrokerMessage) => {
     setMessages(prev => [...prev, msg]);
   }, []);
 
   React.useEffect(() => {
     addListener(listener);
     return () => removeListener(listener);
   }, [addListener, listener, removeListener]);
 
   const onSubmit = React.useCallback(async () => {
     try {
       await sendMessage({ deviceID: recipient, payload: message });
     } catch (e) {
       console.log(e.message);
     }
   }, [message, recipient, sendMessage]);
 
   const onCreateSessions = React.useCallback(async () => {
     if (!identityContext) {
       return;
     }
     const authMetadata = await identityContext.getAuthMetadata();
     try {
       await createOlmSessionsWithOwnDevices(
         authMetadata,
         identityContext.identityClient,
         sendMessage,
       );
     } catch (e) {
       console.log(`Error creating olm sessions with own devices: ${e.message}`);
     }
   }, [identityContext, sendMessage]);
 
   const onSendEncryptedMessage = React.useCallback(async () => {
     try {
       if (!currentUserID) {
         return;
       }
       await olmAPI.initializeCryptoAccount();
       const encryptedData = await olmAPI.encrypt(
         `Encrypted message to ${recipient}`,
         recipient,
       );
       const signingKey = await getContentSigningKey();
       const encryptedMessage: EncryptedMessage = {
         type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE,
         senderInfo: {
           deviceID: signingKey,
           userID: currentUserID,
         },
         encryptedData,
       };
       await sendMessage({
         deviceID: recipient,
         payload: JSON.stringify(encryptedMessage),
       });
     } catch (e) {
       console.log(`Error sending encrypted content to device: ${e.message}`);
     }
   }, [currentUserID, recipient, sendMessage]);
 
   return (
     <ScrollView
       contentContainerStyle={styles.scrollViewContentContainer}
       style={styles.scrollView}
     >
       <Text style={styles.header}>INFO</Text>
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>Connected</Text>
-          <Text style={styles.text}>{connected.toString()}</Text>
+          <Text style={styles.text}>{socketState.connected.toString()}</Text>
         </View>
       </View>
 
       <Text style={styles.header}>DEVICE ID</Text>
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>{deviceID}</Text>
         </View>
       </View>
 
       <Text style={styles.header}>USER ID</Text>
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>{currentUserID}</Text>
         </View>
       </View>
 
       <Text style={styles.header}>SEND MESSAGE</Text>
 
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>Recipient</Text>
           <TextInput
             style={styles.textInput}
             value={recipient}
             onChangeText={setRecipient}
           />
         </View>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>Message</Text>
           <TextInput
             style={styles.textInput}
             value={message}
             onChangeText={setMessage}
           />
         </View>
         <Button
           onPress={onSubmit}
           style={styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={colors.panelIosHighlightUnderlay}
           iosActiveOpacity={0.85}
         >
           <Text style={styles.submenuText}>Send Message</Text>
         </Button>
         <Button
           onPress={onCreateSessions}
           style={styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={colors.panelIosHighlightUnderlay}
           iosActiveOpacity={0.85}
         >
           <Text style={styles.submenuText}>
             Create session with own devices
           </Text>
         </Button>
         <Button
           onPress={onSendEncryptedMessage}
           style={styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={colors.panelIosHighlightUnderlay}
           iosActiveOpacity={0.85}
         >
           <Text style={styles.submenuText}>
             Send encrypted message to recipient
           </Text>
         </Button>
       </View>
 
       <Text style={styles.header}>MESSAGES</Text>
       {messages
         .filter(msg => msg.type !== tunnelbrokerMessageTypes.HEARTBEAT)
         .map((msg, id) => (
           <View key={id} style={styles.section}>
             <Text style={styles.submenuText}>{JSON.stringify(msg)}</Text>
           </View>
         ))}
     </ScrollView>
   );
 }
 
 const unboundStyles = {
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     marginVertical: 2,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   submenuButton: {
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 10,
     alignItems: 'center',
   },
   submenuText: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontSize: 16,
   },
   text: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 14,
   },
   textInput: {
     color: 'modalBackgroundLabel',
     flex: 1,
     fontSize: 16,
     margin: 0,
     padding: 0,
     borderBottomColor: 'transparent',
   },
 };
 
 export default TunnelbrokerMenu;
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
index 3658b3e2e..3f551acc0 100644
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -1,302 +1,302 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useLogOut,
   logOutActionTypes,
   useSecondaryDeviceLogOut,
 } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
 import { IdentityClientContext } from 'lib/shared/identity-client-context.js';
 import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import {
   createOlmSessionsWithOwnDevices,
   getContentSigningKey,
 } from 'lib/utils/crypto-utils.js';
 import { isDev } from 'lib/utils/dev-utils.js';
 import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import css from './account-settings.css';
 import AppearanceChangeModal from './appearance-change-modal.react.js';
 import BackupTestRestoreModal from './backup-test-restore-modal.react.js';
 import PasswordChangeModal from './password-change-modal.js';
 import BlockListModal from './relationship/block-list-modal.react.js';
 import FriendListModal from './relationship/friend-list-modal.react.js';
 import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';
 import TunnelbrokerTestScreen from './tunnelbroker-test.react.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
 import Button from '../components/button.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 function AccountSettings(): React.Node {
   const sendLogoutRequest = useLogOut();
   const sendSecondaryDeviceLogoutRequest = useSecondaryDeviceLogOut();
   const dispatchActionPromise = useDispatchActionPromise();
   const logOutUser = React.useCallback(
     () => dispatchActionPromise(logOutActionTypes, sendLogoutRequest()),
     [dispatchActionPromise, sendLogoutRequest],
   );
   const logOutSecondaryDevice = React.useCallback(
     () =>
       dispatchActionPromise(
         logOutActionTypes,
         sendSecondaryDeviceLogoutRequest(),
       ),
     [dispatchActionPromise, sendSecondaryDeviceLogoutRequest],
   );
   const identityContext = React.useContext(IdentityClientContext);
 
   const userID = useSelector(state => state.currentUserInfo?.id);
   const [deviceID, setDeviceID] = React.useState<?string>();
 
   React.useEffect(() => {
     void (async () => {
       const contentSigningKey = await getContentSigningKey();
       setDeviceID(contentSigningKey);
     })();
   }, []);
 
   const { pushModal, popModal } = useModalContext();
   const showPasswordChangeModal = React.useCallback(
     () => pushModal(<PasswordChangeModal />),
     [pushModal],
   );
 
   const openFriendList = React.useCallback(
     () => pushModal(<FriendListModal />),
     [pushModal],
   );
 
   const openBlockList = React.useCallback(
     () => pushModal(<BlockListModal />),
     [pushModal],
   );
 
   const isAccountWithPassword = useSelector(state =>
     accountHasPassword(state.currentUserInfo),
   );
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const stringForUser = useStringForUser(currentUserInfo);
 
   const staffCanSee = useStaffCanSee();
-  const { sendMessage, connected, addListener, removeListener } =
+  const { sendMessage, socketState, addListener, removeListener } =
     useTunnelbroker();
   const openTunnelbrokerModal = React.useCallback(
     () =>
       pushModal(
         <TunnelbrokerTestScreen sendMessage={sendMessage} onClose={popModal} />,
       ),
     [popModal, pushModal, sendMessage],
   );
 
   const openTunnelbrokerMessagesModal = React.useCallback(
     () =>
       pushModal(
         <TunnelbrokerMessagesScreen
           addListener={addListener}
           removeListener={removeListener}
           onClose={popModal}
         />,
       ),
     [addListener, popModal, pushModal, removeListener],
   );
 
   const onCreateOlmSessions = React.useCallback(async () => {
     if (!identityContext) {
       return;
     }
     const authMetadata = await identityContext.getAuthMetadata();
     try {
       await createOlmSessionsWithOwnDevices(
         authMetadata,
         identityContext.identityClient,
         sendMessage,
       );
     } catch (e) {
       console.log(`Error creating olm sessions with own devices: ${e.message}`);
     }
   }, [identityContext, sendMessage]);
 
   const openBackupTestRestoreModal = React.useCallback(
     () => pushModal(<BackupTestRestoreModal onClose={popModal} />),
     [popModal, pushModal],
   );
 
   const showAppearanceModal = React.useCallback(
     () => pushModal(<AppearanceChangeModal />),
     [pushModal],
   );
 
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
   }
 
   let changePasswordSection;
   if (isAccountWithPassword) {
     changePasswordSection = (
       <li>
         <span>Password</span>
         <span className={css.passwordContainer}>
           <span className={css.password}>******</span>
           <a className={css.editPasswordLink} onClick={showPasswordChangeModal}>
             <SWMansionIcon icon="edit-1" size={22} />
           </a>
         </span>
       </li>
     );
   }
 
   let experimentalLogOutSection;
   if (isDev) {
     experimentalLogOutSection = (
       <li>
         <span>Log out secondary device</span>
         <Button variant="text" onClick={logOutSecondaryDevice}>
           <p className={css.buttonText}>Log out</p>
         </Button>
       </li>
     );
   }
 
   let preferences;
   if (staffCanSee) {
     preferences = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Preferences</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>Appearance</span>
               <a className={css.editPasswordLink} onClick={showAppearanceModal}>
                 <SWMansionIcon icon="edit-1" size={22} />
               </a>
             </li>
           </ul>
         </div>
       </div>
     );
   }
   let tunnelbroker;
   if (staffCanSee) {
     tunnelbroker = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Tunnelbroker menu</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>Connected</span>
-              <span>{connected.toString()}</span>
+              <span>{socketState.connected.toString()}</span>
             </li>
             <li>
               <span>Send message to device</span>
               <Button variant="text" onClick={openTunnelbrokerModal}>
                 <p className={css.buttonText}>Insert data</p>
               </Button>
             </li>
             <li>
               <span>Trace received messages</span>
               <Button variant="text" onClick={openTunnelbrokerMessagesModal}>
                 <p className={css.buttonText}>Show list</p>
               </Button>
             </li>
             <li>
               <span>Create session with own devices</span>
               <Button variant="text" onClick={onCreateOlmSessions}>
                 <p className={css.buttonText}>Create</p>
               </Button>
             </li>
           </ul>
         </div>
       </div>
     );
   }
   let backup;
   if (staffCanSee) {
     backup = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Backup menu</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>Test backup restore</span>
               <Button variant="text" onClick={openBackupTestRestoreModal}>
                 <p className={css.buttonText}>Insert data</p>
               </Button>
             </li>
           </ul>
         </div>
       </div>
     );
   }
   let deviceData;
   if (staffCanSee) {
     deviceData = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Device ID</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>{deviceID}</span>
             </li>
           </ul>
         </div>
         <h4 className={css.preferencesHeader}>User ID</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>{userID}</span>
             </li>
           </ul>
         </div>
       </div>
     );
   }
 
   return (
     <div className={css.container}>
       <div className={css.contentContainer}>
         <h4 className={css.header}>My Account</h4>
         <EditUserAvatar userID={currentUserInfo.id} />
         <div className={css.content}>
           <ul>
             <li>
               <p className={css.logoutContainer}>
                 <span className={css.logoutLabel}>{'Logged in as '}</span>
                 <span className={css.username}>{stringForUser}</span>
               </p>
               <Button variant="text" onClick={logOutUser}>
                 <p className={css.buttonText}>Log out</p>
               </Button>
             </li>
             {experimentalLogOutSection}
             {changePasswordSection}
             <li>
               <span>Friend List</span>
               <Button variant="text" onClick={openFriendList}>
                 <p className={css.buttonText}>See List</p>
               </Button>
             </li>
             <li>
               <span>Block List</span>
               <Button variant="text" onClick={openBlockList}>
                 <p className={css.buttonText}>See List</p>
               </Button>
             </li>
           </ul>
         </div>
         {preferences}
         {tunnelbroker}
         {backup}
         {deviceData}
       </div>
     </div>
   );
 }
 
 export default AccountSettings;