Auth0 authentication in Electron

Got auth0 authentication working in static Electron by registering the custom app:// protocol.
ashleydavis · Apr 9, 2024 · 9321972 · 9321972
1 parent 10b4a91
commit 9321972
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 19 deletions.
diff --git a/electron/main.js b/electron/main.js
@@ -1,10 +1,21 @@
-const { app, BrowserWindow } = require('electron');
+const { app, BrowserWindow, protocol, net } = require('electron');
+const path = require('path');
 
 let HTML_PAGE = process.env.HTML_PAGE;
 if (!HTML_PAGE) {
-    HTML_PAGE = "frontend/dist/index.html";
+    HTML_PAGE = "app://localhost/index.html";
 }
 
+//
+// Register the app protocol.
+//
+protocol.registerSchemesAsPrivileged([
+    { 
+        scheme: 'app', 
+        privileges: { corsEnabled: true, standard: true } ,
+    }
+]);
+
 //
 // Creates the browser window.
 //
@@ -21,18 +32,30 @@ function createWindow() {
     // Open the DevTools.
     mainWindow.webContents.openDevTools();
 
-    if (HTML_PAGE.startsWith("http://")) {
-        //
-        // Loads the web page served by the dev server.
-        //
-        mainWindow.loadURL(HTML_PAGE);
-    }
-    else {
-        //
-        // Loads the prebuilt web page.
-        //
-        mainWindow.loadFile(HTML_PAGE);
-    }
+    mainWindow.loadURL(HTML_PAGE);
+}
+
+//
+// Register a custom protocol. 
+// This is required for Auth0 redirection.
+//
+function registerProtocol() {
+    protocol.registerFileProtocol('app', (request, callback) => {
+        const [ url, query ] = request.url.split('?');
+        let filePath = url.substring('app://localhost/'.length);
+        if (filePath == "on_login") {
+            filePath = "index.html";
+        }
+        else if (filePath == "on_logout") {
+            filePath = "index.html";
+        }
+
+        filePath = `frontend/dist/${filePath}`;
+
+        console.log(`Loading file ${filePath} from url ${request.url}`);
+
+        callback({ path: filePath }); // Maps the URL to a file path.
+    });
 }
 
 //
@@ -41,6 +64,8 @@ function createWindow() {
 // Some APIs can only be used after this event occurs.
 //
 app.whenReady().then(() => {
+
+    registerProtocol();
     createWindow()
 
     app.on('activate', () => {
@@ -63,4 +88,4 @@ app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
         app.quit();
     }
-});
+});
diff --git a/electron/package.json b/electron/package.json
@@ -4,10 +4,10 @@
   "description": "The Electron desktop application for Photosphere",
   "main": "main.js",
   "scripts": {
-    "start": "pnpm run --filter electron-frontend build && electron .",
-    "electron:dev": "wait-on --interval 5000 http://localhost:8080 && cross-env HTML_PAGE=http://localhost:8080 electron .",
-    "start:dev": "concurrently --names=\"dev-server,electron\" \"pnpm --filter electron-frontend run start\" \"pnpm run electron:dev\"",
-    "start:prod": "concurrently --names=\"dev-server,electron\" \"pnpm --filter electron-frontend run start:prod\" \"pnpm run electron:dev\""
+    "start:prod:static": "pnpm run --filter electron-frontend build && electron .",
+    "start:prod": "concurrently --names=\"dev-server,electron\" \"pnpm --filter electron-frontend run start:prod\" \"pnpm run electron:dev\"",
+    "start:dev": "concurrently --names=\"dev-server,electron\" \"pnpm --filter electron-frontend run start\" \"wait-on --interval 5000 http://localhost:8080 && cross-env HTML_PAGE=http://localhost:8080 electron .\"",
+    "start": "pnpm run start:dev"
   },
   "keywords": [],
   "author": "[email protected]",