Search code examples
javascriptnode.jsexpresselectrongoogle-signin

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

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?

Solution

  • 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 (e.g. 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://authorize?code=XYZ. This sends all the data back to your main App.

    deeplink.on('received', (link) => {
    // parse out the code from the stuff here
});
    1. If you need the final data in your UI, you can pass the data to the UI with ipcRenderer.send()