trog.codes

Electron

Posted on: 2025-03-13 08:43:25

Electron

Over the last few weeks, I have spent a lot of time getting to know Electron.

Being super comfortable with the process of cramming javascript into places it doesn’t belong, I am already adept with a good chunk of the curriculum. The only thing that has been in the dark for me for years is the specifics on how to use electron IPC. I understand that Electron uses a special Chromium instance, Node.js and a process isolation model between the two. A main process runs as a native context on the user’s OS, which spawns sandboxed BrowserWindow instances (whose process is called a “renderer”). BrowserWindows in Electron are just undecorated Chromium windows with stunted permissions. I have focused on learning the surface areas of:

So far my understanding is that these are essentially three of the most core pieces of using IPC. Everything revolves around nodejs EventEmitters and a “Context Bridge” that is used to expose individual functions from the main process to the Chromium window available in the renderer process.

I thought a good exercise would be to get something like an OAuth code grant flow working in an Electron app, since this requires familiarity with:

  1. spawning windows, since we must open one to send the user to the OAuth url,
  2. IPC between the main process and renderers, so the main process can make requests with secrets and complete the OAuth grant flow in conjunction with the renderer process.

I’ve been able to get decently far, but right now am stuck with an IPC issue I am still debugging my way through: I am able to open a new window to the twitch.tv auth URL, get a scope approvals prompt, and redirect back to localhost:5173 - however the redirect happens in the popup window instead of following the code I thought I got right, which says to extract the access_token, send it to the backend, and close the popup window. So something towards the end of the process is going wrong, since I am getting a successful redirect but am screwing up either the code extraction or the “close the popup window” directives in electron.