Electron Auth0 Login
Enables Auth0 login for your Electron.js app.
Usage is simple: you call a getToken
method, and one of three things happens (in order of preference):
- If you have a valid token in memory, and won't expire in the next 60 seconds, we return it
- If you have a refresh token, we exchange it for a new token
- If you have no refresh token (or have refresh tokens disabled), we open a new window with the Auth0 login page and begin a PKCE flow.
Refresh tokens are stored securely on the user's machine using node-keytar.
Supports TypeScript out of the box.
Simple setup (without refresh tokens)
Auth0 setup
Make sure you have an Auth0 application set up for your Electron app (as a 'native' type, not 'machine-to-machine') and have whitelisted the following redirect URL:
https://{your-auth0-domain}/mobile
Dependencies
# Installing electron-auth0-login
npm install electron-auth0-login --save
# Installing peer dependencies
npm install request request-promise-native --save
Initialisation
Note: you should add the initialisation code to your main process.
Create a module called auth.ts
/auth.js
:
; ;
Advanced setup - with refresh tokens
To store refresh tokens securely, we use the node-keytar package as an optional peerDependency. This uses native code to call Credential Store on Windows, Keychain on Mac, or libsecret on Linux. As such it must be compiled against your Electron v8 version using electron-rebuild
.
Dependencies & compile
npm install node-keytar --save
npm install electron-rebuild --save-dev
Then run Electron-Rebuild:
./node_modules/.bin/electron-rebuild
Call this again every time you upgrade Electron.
Initialisation
The application config then requires a few tweaks. Again, this code must be in your main process, not app process:
; ;
Usage
You can call getToken
any time you need an auth0 token, in either the main or app process:
In main process code:
; // module defined above
In renderer / app process code:
; ; // depending where you put 'auth.js'
Configuring the login window
You can also pass options to the electron BrowserWindow
by adding a windowOptions
object to your config, e.g.
;
These options will be merged into the default options, which are
{
width: 800,
height: 600,
alwaysOnTop: true,
title: 'Log in',
backgroundColor: '#202020'
};
Credits
This package is based loosely on @adeperio's Electron PKCE example: https://gist.github.com/adeperio/73ce6680d4b80b45e624ab62bacfbdca