diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -27,6 +27,8 @@
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
+import { createTunnelbrokerSocket } from 'lib/shared/socket-utils.js';
+import { TunnelbrokerProvider } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { registerConfig } from 'lib/utils/config.js';
@@ -64,6 +66,7 @@
 import VisibilityHandler from './redux/visibility-handler.react.js';
 import history from './router-history.js';
 import { MessageSearchStateProvider } from './search/message-search-state-provider.react.js';
+import { createTunnelbrokerInitMessage } from './selectors/tunnelbroker-selectors.js';
 import AccountSettings from './settings/account-settings.react.js';
 import DangerZone from './settings/danger-zone.react.js';
 import CommunityPicker from './sidebar/community-picker.react.js';
@@ -79,6 +82,7 @@
 // so we disable the autoAddCss logic and import the CSS file. Otherwise every
 // icon flashes huge for a second before the CSS is loaded.
 import '@fortawesome/fontawesome-svg-core/styles.css';
+
 faConfig.autoAddCss = false;
 
 registerConfig({
@@ -112,6 +116,7 @@
   +dispatch: Dispatch,
   +modals: $ReadOnlyArray<React.Node>,
 };
+
 class App extends React.PureComponent<Props> {
   componentDidMount() {
     const {
@@ -366,17 +371,24 @@
       [modalContext.modals],
     );
 
+    const tunnelbrokerInitMessage = useSelector(createTunnelbrokerInitMessage);
+
     return (
       <AppThemeWrapper>
-        <App
-          {...props}
-          navInfo={navInfo}
-          entriesLoadingStatus={entriesLoadingStatus}
-          loggedIn={loggedIn}
-          activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
-          dispatch={dispatch}
-          modals={modals}
-        />
+        <TunnelbrokerProvider
+          initMessage={tunnelbrokerInitMessage}
+          openSocket={createTunnelbrokerSocket}
+        >
+          <App
+            {...props}
+            navInfo={navInfo}
+            entriesLoadingStatus={entriesLoadingStatus}
+            loggedIn={loggedIn}
+            activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
+            dispatch={dispatch}
+            modals={modals}
+          />
+        </TunnelbrokerProvider>
       </AppThemeWrapper>
     );
   },
diff --git a/web/selectors/tunnelbroker-selectors.js b/web/selectors/tunnelbroker-selectors.js
new file mode 100644
--- /dev/null
+++ b/web/selectors/tunnelbroker-selectors.js
@@ -0,0 +1,30 @@
+// @flow
+
+import { createSelector } from 'reselect';
+
+import type { ConnectionInitializationMessage } from 'lib/types/tunnelbroker/session-types.js';
+
+import type { AppState } from '../redux/redux-setup.js';
+
+export const createTunnelbrokerInitMessage: AppState => ?ConnectionInitializationMessage =
+  createSelector(
+    state => state.cryptoStore.primaryIdentityKeys?.ed25519,
+    state => state.commServicesAccessToken,
+    state => state.currentUserInfo?.id,
+    (
+      deviceID: ?string,
+      accessToken: ?string,
+      userID: ?string,
+    ): ?ConnectionInitializationMessage => {
+      if (!deviceID || !accessToken || !userID) {
+        return null;
+      }
+      return ({
+        type: 'ConnectionInitializationMessage',
+        deviceID,
+        accessToken,
+        userID,
+        deviceType: 'web',
+      }: ConnectionInitializationMessage);
+    },
+  );