How can I use Google sign-in inside of an Electron desktop application?

Question

I'm using Node.js and Express to make a simple app. It relies heavily on Google sign-in for profile pictures and nicknames, and when testing it in a new Electron app I got thrown the error -

" This browser or app may not be secure

Try using a different browser. If you're already using a supported browser, you can refresh your screen and try again to sign in. "

- when trying to sign in with Google. I briefly considered opening the sign in inside of the user's browser, before realising this wouldn't pass the details back to the app. A lot of the solutions that I found online relied on Firebase, which I'm not using.

Is there a way I can send data from the browser back to the app? Or some other solution that I haven't considered yet?

Answer 1

This might not be directly related to your mission, but for those of you whose projects are indirectly affected by this issue (eg. if you are building a web browser interface with Electron where you want to allow users to visit Gmail etc. inside the browser), the best way to go about this is to change Electron's user agent to Firefox's.

view.webContents.userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0";

This will cause Google Accounts to think you're running on Firefox and not Electron, and therefore it'll prevent further barring checks from happening. Setting the user agent to Chromium won't work for this scenario since Google Accounts can still detect that the browser is Electron-based. Setting the user agent to Firefox somehow disables this check.

This seems to work, according to the developers of the Wexond Electron-based web browser.

See https://github.com/wexond/browser-base/issues/424 for a relevant issue fix on a related project (I'm not affiliated with it).

Answer 2

You don't need firebase to do this. You can do this by taking a user to their regular browser and back again. It is possible to pass the details back to the app. We do this in Amna .

It is a tad more involved (but useful for any other providers too). I am assuming you have used some kind of OAuth provider before.

1. Register a custom url handler in your Electron app (eg myapp:// . You can do this with the protocol ). We used the electron-deeplink library

2. On your app's website, setup a side page that can launch your app. For example, we have an authorize page that launches our app. You want to register this website as the redirect url from Google, so when Google hits this url, it passes the validate tokens to it. You can do any OAuth Work here.

3. Finally, from your website, call your app's url handler. myapp://authroize?code=XYZ . This sends all the data back to your main App.

deeplink.on('received', (link) => {
    // parse out the code from the stuff here
});

4. If you need the final data in your UI, you can pass the data to the UI with ipcRenderer.send()