I’m working on an Electron app where I need to send a device ID from the Electron main process to a Vue app. The device ID is generated based on system information, and I’m trying to pass it to the Vue app when it loads. However, the device ID isn’t being received in the Vue app. Here are the relevant parts of my code:

import { app, BrowserWindow } from 'electron';
import si from 'systeminformation';
import * as path from "path";

async function getDeviceId() {
    try {
        const disks = await si.diskLayout();
        return disks.length > 0 ? disks[0].serialNum : 'NoDiskFound';
    } catch (error) {
        console.error('Failed to get disk information:', error);
        return 'ErrorGeneratingId';
    }
}

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: path.join(__dirname, 'preload.js')
        }
    });

    mainWindow.loadFile('loader.html');

    mainWindow.webContents.once('did-finish-load', async () => {
        const deviceId = await getDeviceId();
        mainWindow.webContents.send('device-id', deviceId);
        mainWindow.loadURL('https://localhost:8080');
    });

    mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.show();
    });
}

app.on('ready', createWindow);

Preload script (preload.ts):

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electron', {
    receiveDeviceId: (callback: (arg0: any) => void) => {
        ipcRenderer.on('device-id', (event, deviceId) => {
            callback(deviceId);
        });
    }
});

console.log('IPC setup should be complete now');

on the vue component in this url http://localhost:8080/auth/signup

 onMounted(() => {
            console.log(window);
            window.electron.receiveDeviceId((receivedDeviceId) => {
                deviceId.value = receivedDeviceId;
                console.log('Device ID received:', deviceId.value);
            });
        });

I’m not receiving the device ID in the Vue app. The console.log(‘Device ID received:’, deviceId.value); does not print the expected device ID. I’m also not sure if the IPC message is being sent at the right time or being lost during the page load or it actually being sent. I’ve checked that the preload.js is properly loaded and the IPC setup message is printed in the console.

Any suggestions or insights would be greatly appreciated!