Using OAuth in an Electron application

Let’s imagine you have a Website, or want to use a public API, and you want to develop a new desktop application based on Electron (OK, nothing original these days about this…). One of the easiest way to authenticate user to the Website will be to use a OAuth workflow if the Website is an OAuth provider. If not, this is another story, but to have some fun this article shows how to implement all this OAuth stuff on the Electron app side. It uses GitHub as the OAuth provider (because we are developers after all). Of course, this can be updated to match your favorite OAuth provider.

Let’s play with Electron now (and with Vue.js, but more will come in another article). I will not go into details on what is Electron nor OAuth (well a little bit in fact), because there is a lot about this everywhere over the Internets.
Our goal here is to be able to authenticate a user on GitHub from a desktop application without providing nor storing credentials on the application itself. On standard Web applications, once the user clicks on the famous ‘Login with XXX’, this triggers a workflow opening new Web page so that the user authorize the Web application to access to his data or not. Then, there are several exchanges between the Web application and the OAuth provider which results into a token. This token can then be used by the Web application to make (HTTP) API calls. When the provider handle the requests, it knows who is doing the requests and does not need to ask for user nor password anymore until the token expires.

In fact, this is the same which will occur on our Electron desktop application: When the user clicks on the login button, a new window will open, asking for credentials, asking for authorization to access user data, then all the exchanges will be achieved in the background without having to deal with anything but getting the token at the end.

On the renderer side, when the user clicks on the Login with GitHubbutton, we have to send the event to the main process using the ipcRenderermodule.

On the main process side, we will use the chamerling/electron-oauth2 module (which is a fork of mawie81/electron-oauth2, waiting for PR merge). This module creates a new BrowserWindow, displays the OAuth stuff, and handle all the exchanges and resolves with the token.

On the code snippet above, the githubAuth.getAccessToken function is called from an event received on the ipcMainevent listener. The ipcMainmodule is used to communicate asynchronously between the main and the renderer processes. This call will open a new BrowserWindow targeting the Github authentication page. Once the user authenticated as usual on GitHub, it will close and send back the token as promise result. Then, it is up to your app, but in the current case, the token is sent back to the browser process and stored in the localStorage at the end.

The next snippet shows how this is done in the application, by using Vuex, the Vue.js state management module.

On the snippet above, we receive the token from the github-oauth-replyevent, commiting it in the Vuex store, then dispatch the getUseraction which will call the GitHub User API to get current user information. For now it does nothing more than updating the application header by setting the current user avatar, but I am pretty sure you feel the power.

If you want to play with it, clone the https://github.com/chamerling/electron-oauth-github-vue repository

git clone https://github.com/chamerling/electron-oauth-github-vue.git

Then you will have to create your own OAuth application on GitHub. Go to your GitHub OAuth applications page in Developer settings, then create a new application by clicking on ‘Register new application’, fill the fields and be sure to set http://localhost as your ‘Authorization callback URL’.

You should see your new application page with your ‘Client ID’ and ‘Client secret’. Copy then paste the values into the main/config.jsfile

Then you ‘just’ have to install all the dependencies and run the application to have the same as the video at the top:

yarn # or npm install
./node_modules/.bin/electron . # or npm start

On a next article, I will go into more details on how to play with the awesome Vue.js framework. While waiting, if you want to have fun at work, come to work with us, we also do Electron app and many many more: Have a look to our job offers on https://jobs.linagora.com, drop us a line on Twitter, Facebook or send an issue on GitHub.

(You can also click on this beautiful ❤️ icon below, leave some comments, etc…)