URL and Token provider

Summary:
Use an URLProvider paired with a token provider for attempts to establish a websocket connection.

This gives extra flexibility whenever a token is not available or changes as the ReconnectingWebSocket will call the URLProvider after each unsuccessful connection.

Reviewed By: antonk52

Differential Revision: D50220329

fbshipit-source-id: f53993a90c9c0f64bf213019b6b8af5fa818048d

desktop/flipper-server-client/src/FlipperServerClient.tsx

@@ -30,10 +30,15 @@ export type {FlipperServer, FlipperServerCommands, FlipperServerExecOptions};
 export function createFlipperServer(
   host: string,
   port: number,
-  args: URLSearchParams,
+  tokenProvider: () => Promise<string | null | undefined>,
   onStateChange: (state: FlipperServerState) => void,
 ): Promise<FlipperServer> {
-  const socket = new ReconnectingWebSocket(`ws://${host}:${port}?${args}`);
+  const URLProvider = async () => {
+    const token = await tokenProvider();
+    return `ws://${host}:${port}?token=${token}`;
+  };
+
+  const socket = new ReconnectingWebSocket(URLProvider);
   return createFlipperServerWithSocket(socket as WebSocket, onStateChange);
 }
 
@@ -49,7 +54,7 @@ export function createFlipperServerWithSocket(
         reject(
           new Error(
             `Failed to connect to the server in a timely manner.
-             It may be unresponsive. Run the following from the terminal 
+             It may be unresponsive. Run the following from the terminal
              'sudo kill -9 $(lsof -t -i :52342)' as to kill any existing running instance, if any.`,
           ),
         );

desktop/flipper-ui-browser/src/index.tsx

@@ -34,20 +34,26 @@ async function start() {
   setLoggerInstance(logger);
 
   const params = new URL(location.href).searchParams;
-  let token = params.get('token');
-  if (!token) {
-    console.info(
-      '[flipper-client][ui-browser] Get token from manifest instead',
-    );
-    const manifestResponse = await fetch('manifest.json');
-    const manifest = await manifestResponse.json();
-    token = manifest.token;
-  }
 
-  console.info(
+  const tokenProvider = async () => {
-    '[flipper-client][ui-browser] Token is available: ',
+    const providerParams = new URL(location.href).searchParams;
-    token?.length != 0,
+    let token = providerParams.get('token');
-  );
+    if (!token) {
+      console.info(
+        '[flipper-client][ui-browser] Get token from manifest instead',
+      );
+      const manifestResponse = await fetch('manifest.json');
+      const manifest = await manifestResponse.json();
+      token = manifest.token;
+    }
+
+    console.info(
+      '[flipper-client][ui-browser] Token is available: ',
+      token?.length != 0,
+    );
+
+    return token;
+  };
 
   const openPlugin = params.get('open-plugin');
   if (openPlugin) {
@@ -66,13 +72,11 @@ async function start() {
     cachedDeepLinkURL = deeplinkURL.toString();
   }
 
-  const searchParams = new URLSearchParams({token: token ?? ''});
-
   console.info('[flipper-client][ui-browser] Create WS client');
   const flipperServer = await createFlipperServer(
     location.hostname,
     parseInt(location.port, 10),
-    searchParams,
+    tokenProvider,
     (state: FlipperServerState) => {
       switch (state) {
         case FlipperServerState.CONNECTING:
@@ -213,7 +217,7 @@ async function initializePWA() {
 // getLogger() is not  yet created when the electron app starts.
 // we can't create it here yet, as the real logger is wired up to
 // the redux store and the rest of the world. So we create a delegating logger
-// that uses a simple implementation until the real one comes available
+// that uses a simple implementation until the real one comes available.
 function createDelegatedLogger(): Logger {
   const naiveLogger: Logger = {
     track(...args: [any, any, any?, any?]) {