make auth flow possible to complete in dev (#172)

Author: szymonkaliski

README.md

@@ -31,6 +31,8 @@ You can then launch a packaged version of the app (needed to test certain featur
 
 To test your changes on other platforms, we recommend using a Virtual Machine host like [UTM](https://mac.getutm.app).
 
+When going through the authentication flow in development (through unpackaged app) on macOS and Linux, after clicking "Login" on the welcome page, a new empty Electron window will open. This is expected, as [deeplinks are not support in unpackaged apps](https://www.electronjs.org/docs/latest/tutorial/launch-app-from-url-in-another-app#:~:text=On%20macOS%20and%20Linux%2C%20this%20feature%20will%20only%20work%20when%20your%20app%20is%20packaged.%20It%20will%20not%20work%20when%20you%27re%20launching%20it%20in%20development%20from%20the%20command%2Dline). To finish the flow, copy the URL from the browser into the clipboard (it should look like `http://localhost:3000/desktopApp/authSuccess?authToken=...`), and from the app menubar choose "File -> Complete Auth From Clipboard". This menu item is only available in dev.
+
 ## API Versioning
 
 The Electron app communicates with the web frontend through the `replitDesktop` global object defined in `src/preload.ts`. As we develop both applications, this API has to be able to adapt, but at the same time can't break existing clients. The main failure mode we're trying to avoid is someone opening an older version of the Electron app and loading a newer version of the web client which requires a new API that's not supported by the old Electron client.
@@ -100,3 +102,4 @@ Note that to recreate the `pfx` file (which is what's ultimately needed to sign
 ### CI
 
 We sign the app in CI as part of the build and release process when publishing a new release. Make sure that the above env vars (`APPLE_*` and `WINDOWS_*`) remain valid credentials and are kept up to date in the repository secrets settings used by GitHub actions otherwise the app will not get correctly signed on subsequent releases.
+

src/createMenu.ts

@@ -1,11 +1,14 @@
 import {
   app,
+  clipboard,
+  dialog,
   Menu,
   MenuItem,
   MenuItemConstructorOptions,
 } from 'electron';
 import { isProduction } from './constants';
 import { createWindow } from './createWindow';
+import { handleAuthComplete } from './deeplink';
 import { isMac } from './platform';
 
 const newWindowMenuItem = {
@@ -14,6 +17,38 @@ const newWindowMenuItem = {
   click: () => createWindow(),
 };
 
+const completeAuthFromClipboardMenuItem = {
+  label: 'Complete Auth From Clipboard',
+  click: () => completeAuthFromClipboard(),
+};
+
+// we use deeplinking for authentication, but deeplinks are not supported in
+// unpackaged macOS and Linux builds, this is a dev-only workaround to finish
+// the authentication flow by copying the auth url into a clipboard
+async function completeAuthFromClipboard() {
+  const maybeUrl = clipboard.readText();
+
+  function showUrlInvalidDialog(url: string) {
+    dialog.showErrorBox(
+      'Authentication Error',
+      `The URL in the clipboard is not valid: ${url}`,
+    );
+  }
+
+  try {
+    const url = new URL(maybeUrl);
+    const authToken = url.searchParams.get('authToken');
+
+    if (url.pathname === '/desktopApp/authSuccess' && authToken?.length > 0) {
+      handleAuthComplete(authToken);
+    } else {
+      showUrlInvalidDialog(maybeUrl);
+    }
+  } catch (e) {
+    showUrlInvalidDialog(maybeUrl);
+  }
+}
+
 export function createDockMenu(): Menu {
   const menu = new Menu();
 
@@ -50,6 +85,7 @@ export function createApplicationMenu(): Menu {
     label: 'File',
     submenu: [
       newWindowMenuItem,
+      !isProduction ? completeAuthFromClipboardMenuItem : [],
       { type: 'separator' },
       isMac() ? { role: 'close' } : { role: 'quit' },
     ],
@@ -71,17 +107,16 @@ export function createApplicationMenu(): Menu {
     ],
   });
 
-  const devOnlyMenuItems = [
+  // View Menu
+  const devOnlyViewMenuItems = [
     { role: 'reload' },
     { role: 'forceReload' },
     { type: 'separator' },
   ];
-
-  // View Menu
   template.push({
     label: 'View',
     submenu: [
-      ...(!isProduction ? devOnlyMenuItems : []),
+      ...(!isProduction ? devOnlyViewMenuItems : []),
       ...(allowDevtools ? [{ role: 'toggleDevTools' }] : []),
       { role: 'togglefullscreen' },
     ],

src/deeplink.ts

@@ -130,8 +130,8 @@ function handleNew(language: string) {
 
 function handleRepl(url: string) {
   if (
-    !personalReplUrlRegex.test(url) && 
-    !teamReplUrlRegex.test(url) && 
+    !personalReplUrlRegex.test(url) &&
+    !teamReplUrlRegex.test(url) &&
     !legacyTeamReplUrlRegex.test(url)
   ) {
     log.error('Expected valid workspace URL');
@@ -152,7 +152,7 @@ function handleRepl(url: string) {
   });
 }
 
-function handleAuthComplete(authToken: string) {
+export function handleAuthComplete(authToken: string) {
   const windows = BrowserWindow.getAllWindows();
   const authUrl = `${baseUrl}${authPage}`;