guides
Guide

How to Implement Auth on Electron with Magic

Magic Staff · March 4, 2021
How to Implement Auth on Electron with Magic

#Quick Start Instructions

Bash
01git clone https://github.com/magiclabs/example-electron.git
02cd example-electron
03mv .env.example .env // enter your Magic Publishable API key
04yarn install
05yarn electron

#Introduction

This tutorial shows how you can integrate Magic passwordless authentication into a desktop app using Electron. Electron is a JavaScript framework based on Chromium and Node.js that allows you to use HTML, CSS, and JS to build cross-platform (Windows, Mac and Linux) native desktop applications. For this, we'll be using React.

View the example code here.

#File Structure

01├── .env
02├── README.md
03├── electron
04│   └── main.js
05├── package.json
06├── public
07│   └── index.html
08├── src
09│   ├── components
10│   │   ├── App.js
11│   │   ├── Loading.js
12│   │   ├── Login.js
13│   │   └── Profile.js
14│   ├── index.js
15│   ├── magic.js
16│   └── styles.css
17└── yarn.lock

#Magic React Boilerplate

The Magic React app boilerplate will be taken from the Hello World (React) template using the npx make-magic command.

Bash
01$ npx make-magic
02npx: installed 1 in 1.472s
03
04
05 █▀▀ █▀█ █▀▀ ▄▀█ ▀█▀ █▀▀
06 █▄▄ █▀▄ ██▄ █▀█  █  ██▄
07
08 █▀▄▀█ ▄▀█ █▀▀ █ █▀▀
09 █ ▀ █ █▀█ █▄█ █ █▄▄
10
11 ▄▀█ █▀█ █▀█
12 █▀█ █▀▀ █▀▀
13
14
15Running scaffold create-magic-app
16
17✔ What is your project named? · example-electron
18✔ Choose a template: · hello-world-react
19✔ Enter your Magic publishable API key: · pk_live_3F8F2B46C789AB90
20✔ Choose an NPM client: yarn

Since we won't be adding a redirect back to the app, go ahead and delete

  1. the redirectURI parameter given to loginWithMagicLink()
  2. the /components/Callback.js component
  3. the /callback route in App.js

#Installing Dependencies

electron-builder is what compiles our app. concurrently and wait-on will be used together in the start script which will run our React app and build the Electron app at the same time.

Javascript
01yarn add electron electron-builder concurrently wait-on

#Main.js

electron/main.js contains the main process for the app. When it's ready, we create our Electron app using the BrowserWindow module, and load it with our React app which is running in the background on localhost:3000. All of this code is run in a Node.js environment.

Javascript
01const { app, BrowserWindow } = require('electron');
02
03// Build a new browser window for your app to open up
04function createWindow() {
05  const win = new BrowserWindow({
06    width: 800,
07    height: 600,
08  });
09
10  win.loadURL('http://localhost:3000');
11}
12
13// Once app is initialized, create the app
14app.whenReady().then(createWindow);
15
16// Quit the app when no windows are open
17app.on('window-all-closed', () => {
18  if (process.platform !== 'darwin') {
19    app.quit();
20  }
21});
22
23// Only create a new window if no windows are already open (prevents your app being open multiple times)
24app.on('activate', () => {
25  if (BrowserWindow.getAllWindows().length === 0) {
26    createWindow();
27  }
28});

#Package.json

Our package.json will need additional fields to know how to start the app.

  1. Add "main": "electron/main.js" to specify where the main process is being run.
  2. Below is the start script that needs to be added inside the scripts object. The React app needs to be running before the Electron app is able to load and this ensures that happens.
Json
01"electron": "concurrently \"npm start\" \"wait-on http://localhost:3000 && electron .\""

#Done

Your Electron app is now secured with Magic, and you can run the app with yarn electron!

Let's make some magic!