How to implement google authentication in your Electron app?

4 min readAug 27, 2020

By the end of this article, your Electron app will have google authentication.

Disclaimer: This is my first blog in Medium (Actually, First ever blog 🙂 ). Feel free to point out the mistakes that you find in this story so that I can improve on it.

Authentication has become a necessary feature in most of the applications that we use. Today, we are going to see how to implement Google Authentication to an Electron application.

For this process, we need three main things:

Electron application
Front end application
Communication between Front-end application and Electron application.

Electron Application

1. Setup the Electron project

For this tutorial, I am creating a new fresh Electron app. If you already have an Electron application, please skip this step.

I am using the Boilerplate that is provided by the Electron application.

mkdir Electron-Authentication
cd Electron-Authentication
git clone https://github.com/electron/electron-quick-start .
npm i

Quick Overview of the file:

i) index.html: HTML file for the electron application.

ii) Main.js: This is the entry file for the Electron application. Here is the place where the HTML page will be loaded.

iii) Renderer.js: This is the js file for the Electron application.

2. Provide a name for the Electron application

Now, the application is running. Let’s provide a name to the application to integrate our app into the operating system. This will be used to redirect the callback response of Google authentication when the user login successfully.

So, our main.js will be looking something like this:

3. Let’s add a Button to the Electron application which redirects to the Front-end application for the Google Authentication.

Note: We will see why we need a Front end application for the authentication process.

4. Let’s run the Electron application

i) Open the terminal and go to the project folder.

ii) run yarn start

You can see that the Electron application running in your system.

Setup the Front End application

Why are we doing this? Since Google Oauth sends a callback to a HTTP origins, we need this front end application to capture the success callback and send it to our Electron application.

Work Flow of Electron Google Authentication

I am using a Basic React application for this Front-end implementation.

Electron React Front End Application — A Simple Basic React Application

I am going to use a simple library for the Google Oauth Sign-in component in my application.

You can follow this guideline to create an authorization credential for the front-end application. https://developers.google.com/identity/protocols/oauth2/web-server

Communication between Front-end application and Electron application.

Once the user login successfully, the Google Oauth redirects to the front end application with the success response callback. Now, we will redirect the response to the Electron application using the name that we have provided to it.

2. Now, let’s capture the response from the Front-end application in the Electron app using open-url

That’s it. We have captured the success response data of the Google Oauth in our Electron application. Let’s see it in action.

Therefore, our Electron application will now able to capture the success response when the user signs in using Google authentication. From here, you can store it in the application (Eg., LocalStorage) and navigate the application respectively.

Additionally, people who want to know how to communicate the data that we received from main.js to renderer.js

In order to communicate the data from the main.js to renderer.js, IPC (Inter-Process Communication) is used. This acts as a bridge between main.js and renderer.js

First, we will send the data from main.js.

2. Now, the message has been sent from the main.js. Let’s receive that message in the renderer.js

Thanks for reading my blog. Feel free to provide feedback about this blog so I can improve on it.