Paul Pietzko

In this article, you’ll learn how to implement deep link authentication using Electron and Supabase Auth.

Prerequisites Before starting, you should have:

A basic Electron application

A Supabase project

A web application for handling authentication

You can use the official Supabase Next.js starter:

Use Supabase with Next.js | Supabase Docs

Step 1: Open External Authentication Pages First, we need a way to open external websites from inside the Electron application. We can achieve this using shell.openExternal. In the same step we can add onDeepLink as a hook for later.

create a preload.js file:

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electron", { openExternal: (url) => ipcRenderer.send("open-external", url), onDeepLink: (callback) => ipcRenderer.on("deep-link", (_event, url) => callback(url)), }); and update your main.js

import { app, BrowserWindow, ipcMain, shell } from "electron"; import path from "node:path"; import { fileURLToPath } from "node:url";

// add this alongside your other ipcMain/app listeners: ipcMain.on("open-external", (_event, url) => { shell.openExternal(url); });

const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename);

let mainWindow;

function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, "preload.js"), }, });

// DEV

...