Securing Electron Applications with OpenID Connect and OAuth 2.0

Learn how to secure your Electron applications using standards like OpenID Connect and OAuth 2.0.

Brought to you by @bruno.krebs :man_technologist:t5:

Read on :computer:

1 Like

What do you think? It was easy to secure Electron with OAuth 2.0 and OpenID Connect? Leave a comment!

Edit: This article was updated to Electron v5 and comments moved to community.

Thanks for the article!
Given electron lets you execute custom code on the browser windows, don’t the electron app developers have the power to capture the auth0 credentials?
Shouldn’t the oauth flow be happening on the browser itself?
Thanks!

Hey there! Yes, it is technically possible for the developer to capture traffic there; that said, that is true for any process running with sufficient privileges on the desktop regardless of whether they are in focus (whereas if you’d be working on an app on iOS or Android, every app would have exclusive focus at any giving time hence outsourcing auth to the system browser would be an effective way of preventing keylogging).
Use of the system browser on the desktop is problematic, mostly for user experience limitations with today’s browser support on desktop operating systems. In fact, most desktop apps (slack, office, visual studio, visual studio code, even the google drive app) nowadays use some form of embedded browser. Desktop clients using the system browser are rare (github is the only example I know of, really) and do have usability challenges.
There is good progress occurring in the modern operating systems, see for example the new features in Apple beta OS making it possible in the desktop to invoke the system browser in the same style. But for the time being, if you want to target current OSes the embedded browser is what most native clients do on desktops.

For more details, please see Desktop and Mobile Apps

1 Like

Thanks for the quick reply.
Actually slack, even though it uses the webview for displaying the actual application, when you want to add a new workspace, you get redirected to the browser in order to perform authentication. That’s also true for Talkdesk (https://support.talkdesk.com/hc/en-us/articles/115005728186-Logging-in-to-Talkdesk-Callbar).

My rationale is only that if I was an IdP, I wouldn’t want products with embedded browsers to be using SSO with my service, as I would be putting at risk my own users (although I don’t think there would be a way for me to prevent it)

That is a legitimate concern, however as of today the usability issues I mentioned are hard- and the use of a system browser doesn’t fully assuage those concerns: for example, unless you use the secure desktop API in windows there’s always the possibility of the app to have a global keylogger that will intercept the message pump no matter what app is in focus. The main reason for tolerating the usability issues of the system browser on desktop is achieving SSO rather than sheer security (whereas in mobile platforms the security advantages are more substantial)

2 Likes

I’m struggling to find a method to pull app_metadata or user_metadata. How would you recommend doing that in your electron example? Thanks!

Hey there, sorry for the delay.

Can you take a look at this thread (How to retrieve user metadata in the id_token?) to see if it helps?

So i’ve done everything I can think of, and even re-made and copy/pasted this code several times, but half a year later and this code doesnt seem to work anymore.

The app seems to work initially, the Auth0 login pops up and I’m able to log in, but then after login I just get a white screen with an error in the developer console saying:
“Not allowed to load local resource: file:///callback?code=UrbEZWNlanWrODBJ”

I know this is not a mistype on my part as I copy/pasted all of the code and file/directory names exactly several times. Not really sure what could be causing this but any help would be appreciated

Edit: I should mention that the Github repo works just fine, its got to be something about the code in this article that is off but I havent been able to place it yet

2 Likes

Welcome to our community site! Thank you for taking the time to read and follow the blog post. Let me give it a run and see what I can come up with :+1:

Howdy! I was able to run the blog post without errors :thinking: Did you set file:///callback as the value of Allowed Callback URLs when you registered your Native App with Auth0?

Thanks for this comprehensive tutorial. However, Google is now restricting authentication to supported browsers. I get the following error on authentication:

Couldn’t sign you in

This browser or app may not be secure. Learn more

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

If I try to set the user agent to a known supported browser by including this line of code on auth-process.js:

win.webContents.setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36");

I get a redirect loop when I click LOGIN WITH GOOGLE with a window title “Forwarding…” Any thoughts? This code was working before Google’s change. To reproduce this error I had to start with a fresh instance of your code, rather than logging into one that had previously worked.

1 Like

Howdy, Ben! Welcome to the Auth0 community. Thank you for reading the blog post.

To better assist you, I’d like to understand the situation better, please: Is this error happening when you are using Google as a social provider to sign in instead of username/password?

Correct. Works fine with email/password.

2 Likes

Perfect! Glad to hear that!

Thank you, Ben. I’ll do some research today on this matter of using Google Log In for this blog post. As we are reaching the weekend, I can look into giving you an update by Wednesday next week :slight_smile: How does it sound?

That works, thanks for agreeing to look into it. Unless I can get this sorted out, I will have to completely change the way my app authenticates.

1 Like

Ben, I am not able to reproduce this. I am running the app after a fresh git clone and I can Log In using Google without any errors :thinking: I ran this on macOS Mojave.

Could you please provide me more detailed steps to reproduce the problem you are facing?

Snap. Just tried it again and it’s working well for email/pass and gmail login. I think I had an older electron version in package.json. Thanks for this tutorial, just have to figure out how to do the handoff to my backend and I’m all set.

1 Like