Adding Magic to an Electron desktop app

Build a native desktop app with React and Electron.

1 Like

Thanks for checking out this guide. If you have any questions or comments, please reply below!

https://community.magic.link/latest

1 Like

I’m in need of accessing the Magic instance from the Electron main thread. This however isn’t working:

 INFO  Launching Electron...
App threw an error during load
ReferenceError: window is not defined
    at new SDKBase (webpack:///./node_modules/@magic-sdk/provider/dist/module/core/sdk.js?:122:28)

Is there an alternative way for accessing the Magic instance in this environment?

Hey, yes the window object needs to be defined in order for Magic to be initiated. You can try something like this which will just ensure window is available before creating the Magic instance. Let me know if this works for you!

import { Magic } from 'magic-sdk';

const createMagic = (key) => typeof window != 'undefined' && new Magic(key);

export const magic = createMagic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY);

Thank you @hcote - the problem is that in the context of Electron main process, as far as I can see, window is never defined (everything works fine in the render process). So it does not look like i can use Magic in this scenario, given its requirement to a window object :frowning:

You can create a browser window with something along the lines of the code snippet below, taken from our example.

const { app, BrowserWindow } = require('electron');

// Build a new browser window for your app to open up
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadURL('http://localhost:3000');
}

// Once app is initialized, create the app
app.whenReady().then(createWindow);