Electron Tutorial: Building Modern Desktop Apps with Vue.js

Blog Discussions
22

Kieran, thank you for following this tutorial and for joining our Auth0 Community. We’ll get in touch with the author to take a look at these outstanding questions :pray: I apologize for the delays to address that concern.

One question, please: what version of Electron are you using? We are currently having issues with Electron 7+ and the guidance that we have provided is not working. We are in the process of updating it. You may see more details on this in my reply to Siva above :slight_smile:

1 Like
23

Hi everyone,

I followed this tutorial from the official blog to add authentication to my Electron + Vue app and it works fine, but now I’m facing some issues with loading the callback file/URL in Electron when updating from v6 to the latest version.

Are there risks when handling the entire authentication flow on the Vue side in Electron with the @auth0/auth0-spa-js plugin as described here? It’s certainly easier to do this but I’m not so well versed in web security as many people are around here.

Thanks!

24

Hey there! Someone from the blog articles team should reach out to you soon regarding that!

1 Like
25

Welcome to our Auth0 Community, Alex. We are in the process of developing updated guidance for Electron. As now, the guidance that we have published does not work for version 7 and 8 of Electron, I apologize for the inconvenience.

Be assured that this issue has been escalated internally for us to take action. I don’t have an ETA yet, but there’s someone already making process on the area. Please stay tuned :pray: We want to provide you the best set of practices to help your app succeed securely. :muscle:

26

Thanks a lot, @dan-auth0. Can’t wait for the new guidance!

2 Likes
27

We’ll let you know once it’s there!

28

@dan-auth0 @konrad.sopala The logout function in this example right now just clears the local token. Could you please find out how to implement a true logout on auth0 side? Basically, in addition to clearing the local token, we’ve to call the /v2/logout endpoint of the auth0 tenant and then redirect / open the login window.

1 Like
29

Howdy, Siva! Someone has been assigned to do R&D for this topic and producing new guidance :raised_hands: Our goal is to ensure that the next Electron guidance covers the identity flow throughly. I’ll log your feedback in our “things to check for” document. Thank you for sharing.

If you find anything else in the authentication/authorization flow that you feel should be done or could be done better, by all means, please let us know here in the comments :pray:

30

Update on this content: We are currently working on a deep audit of all Electron content. We have something in the pipeline to share in the near future.

Something that could help us is the following, please: Do you suggest any alternatives to using GitHub - SimulatedGREG/electron-vue: An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack. ?

31

Thanks for the headsup Dan and please let us know folks you thoughts here in the thread!

32

I want to build windows app.
I use vue init simulatedgreg/electron-vue, this template and update electron and configuration items have been added.
After the build is successful, an a file is generated build/my-project Setup 0.0.1.exe, but it’s one-click installer, I want to create assisted installer. what should I do. thanks !
the package.json

"devDependencies": {
  "electron": "^9.2.1",
  "electron-builder": "^22.8.0",
},
"build": {
  ...
  "win": {
      "icon": "build/icons/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
},
"nsis": {
    "oneClick": false,
    "allowElevation": true,
    "allowToChangeInstallationDirectory": true,
},
1 Like
33

Howdy, dengqiang! Welcome to the Auth0 Community and thank you for reading the blog post. We have limited capacity at the moment so it may take longer than usual to research and answer to your question :slight_smile: We appreciate your patience and we’ll get back to you as soon as we have an answer.

35

Hey @webdq, electron-builder provides the one-click installer by default.
As far as I know, you should configure it to achieve your goal.
For Windows, please, refer to the NSIS section of the official documentation to get more info.

1 Like
36

If you are getting “Cannot read property ‘app’ of undefined” exception that points to electron.remote.app, here is the solution:

  1. Open src/main/index.js
  2. Find the webPreferences object that you extended in the previous step (with nodeIntegration and nodeIntegrationInWorker)
  3. Add enableRemoteModule: true as a new attribute.

The new mainWindow declaration should look like this:

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      enableRemoteModule: true,
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })

This is needed because the remote module is no longer enabled by default in Electron.

1 Like
37

Hi @sw0rdf1sh, welcome to Auth0 Community and thank you for this fix.
The blog post is under revision. Currently, the most up to date blog post about Electron is Securing Electron Applications with OpenID Connect and OAuth 2.0.
Thank you again

1 Like
38

Hi!

Great tutorial but I’m facing a couple of issues which I managed to solve by myself but… the last one is when calling the FetchTodos function after securing everything, I’m currently getting the following error from the API side:

UnauthorizedError: jwt malformed

Any idea what it could be due to?

Thanks!

39

Hi @victorgonal,
Welcome to the Auth0 Community.
It looks like the access token for your API is not a valid JWT.
You can check its validity by putting it in jwt.io.
If it is not valid, please, make sure you have correctly assigned your API identifier (apiIdentifier ). In particular, check that it is written correctly, including any possible trailing slash.

40

Hi Andrea,

Thanks but the problem seems to be another one. It looks like to the application I’m “authenticated” while I’m actually not. There’s no accessToken (it logs as undefined)

41

Thanks for your nice tutorial !

In order to work with the current version of Electron (12.0.0), the src/main/index.js file should be updated as follows :

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
  enableRemoteModule: true,
},

(from javascript - Unable to use Node.js APIs in renderer process - Stack Overflow)

Best regards

2 Likes
42

Hi @fredrufin, welcome to the Auth0 Community and thank you for your suggestion. :pray:
Updating this tutorial in our plans.
Thanks

1 Like