#Quick Start Instructions

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.

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.

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.

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.

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!