3rd party User Auth with Electron

Question

I've been looking for resources on how to implement user auth in an Electron App.

I'd like to utilize third party services like Github to allow users to login and signup. With a "regular" Node.js application, I would likely utilize something like passport.js or similar to implement this.

My confusion arises because Electron apps are client side, so having things like your client secret keys in client side code seems wrong. So what is the process of implementing 3rd party user auth in Electron apps?

Answer 1

Think of electron app as a standard browser page. Then you will have standard oauth2 flow.

First of all you need middleware server where you will store clientId and clientSecret for third party services.

You need to create something like session between electron app and middleware server (below I will show example).

Below I will show example process to authorize github.

You need use https.

Lets assume that your middleware server is available on example.com. Your need minimum two endpoints :

1. GET: https://example.com/initAuth/
2. GET: https://example.com/oauth/token

Github client_id and client_secret are stored only in this server.

Your electron app send GET request to https://example.com/initAuth/. And your server should generate two uuid's. Which should be stored as pair (for example in redis). One uuid is for state parameter in authorization github link and second one as simple session/token to identify your electron app. Your server should build url to github access github access : GET https://github.com/login/oauth/authorize where

1. redirect_uri will be your second endpoint - https://example.com/oauth/token
2. state will be your first uuid
3. other parameters as usual.

Now you return from this endpoint to electron session/token uuid and built url.

Your electron show link with target="_blank" - it should be opened in separe tab/window. Electron should remember session/token uuid.

When user click link he will get into oauth process where he accept your app. And then he will be redirected to your middleware server second endpoint (https://example.com/oauth/token)

Your server will get in this endpoint code and state. YOur server should check if it has registered electron app with this state. And if it exist then server need exchange code and client_secret for access_token (I will not explain it - this is standard oauth flow). Now store it in temporary storage (redis) access_token and both uuid's. And as response render html view with script which will close this tab or just normal html view with some message.

Your electron app need to know if middleware server has access_token.

1. Electron can polling time to time middleware server by sending to third endpoint session/token uuid. And if there is access_token server will return it.
2. You can use websockets
3. Your main window can check if second "oauth" window is closed and then send request to middleware server for access_token.

Or alternativly you can store access_token in your middleware server and your electron wont send requests to github but only to your server and your server will send requests to github and responses return to electron.