Electron setup and callback issue

[b4dnewz]

I'm using electron and vue, I followed all the auth0 guides for both of them, but I'm facing some issues..

I state that I already used auth0 many times in past, also with vue (but never with electron) and never had this problem, so i'm stuck.

I'm using electron-vue which has this setup for dev and production mode:

const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`

..some code

mainWindow.loadURL(winURL)

while in dev mode is using a webserver (webpack) on localhost 9080 so I entered as callback urls theese two: file:/// and http://localhost:9080 I get to the auth0 login screen then I type my details click Submit and when the redirect happen I get this error:

GET http://localhost:9080/callback 404 (Not Found)
VM100 hook.js:82 
Refused to execute inline script because it violates the following Content Security 
Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, 
a hash ('sha256-qbw0x/SNol1PfluopeQvYra2sc/ZExEm2+dikDVpEo8='), 
or a nonce ('nonce-...') is required to enable inline execution. 
Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

At this point besides reading the message and googling a lot.. I've no clue what to do..any help?

Vue Router (that handle the front-end s.p.a. routing is on 'history' mode like in the tutorial.

[luisrudge]

When using electron, the best way to handle authentication is using the PKCE flow. We have docs explaining the flow here and offer some guidance implementing the flow here.

I'm afraid what you're trying to do should never happen in an electron environment. There is a PKCE example here if you want to check. It's a bit outdated, but should be enough for you to get going. Please ping our amazing support team at https://support.auth0.com/ if you hit any bumps while implementing the PKCE flow or open an issue if you hit a bug! Thanks 🎉

[b4dnewz]

@luisrudge thanks for pointing me to the right direction! 👍

the client's quickstart for electron app are quite different online: https://auth0.com/docs/quickstart/native/electron/01-login and there are no mention at all of PKCE, also the example pointed out in the guide is different and (maybe) outdated: https://github.com/auth0-samples/auth0-electron-samples/tree/master/01-Login that's why I tried this way.

I will implement the PKCE many thanks!

[jaimesangcap]

@b4dnewz have you successfully integrate auth0 using electron? I'm just hoping I can get some references, I got stuck on how to provide the correct callback url and redirect_uri.

[b4dnewz]

@jaimesangcap yes sure man

here is how I did it:

I build the authorization url and a new electron window to simulate the popup mode

let authUrl = this.auth0.buildAuthorizeUrl(options)
let authWindow = new BrowserWindow({ 
      width: 800, 
      height: 600, 
      frame: true, 
      resizable: false, 
      autoHideMenuBar: true 
})

than I catch the 'will-navigate' and 'did-get-redirect-request' event on the window since auth0 will redirect back with the code. I got this code below from a blog article or something similar and right now I can't find the source, which is more complete than this..

authWindow.loadURL(authUrl) 

authWindow.webContents.on('will-navigate', (event, url) => { 
      let urlObject = URL.parse(url) 
      let queryParams = qs.parse(urlObject.query) 
 
      if (queryParams.code || queryParams.error) { 
        authWindow.destroy() 
      } 
}) 
 
authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, url) => { 
      let urlObject = URL.parse(url) 
      let queryParams = qs.parse(urlObject.query) 
 
      if (queryParams.code || queryParams.error) { 
        authWindow.destroy() 
      } 
 
      if (queryParams.code) { 
        this.handleAuthorizationResponse(queryParams.code) 
      } 
})

then with the response code I call the oauth/token endpoint, in this point is required a redirectUrl but right now I'm using a development url but in the final application I guess you should point to something like: com.myclientapp://myclientapp.com/callback and you need to register a custom procotol

handleAuthorizationResponse (code) { 
    this.auth0.oauthToken({ 
      code_verifier: this.keys.codeVerifier, 
      grantType: 'authorization_code', 
      redirectUri: 'http://localhost:9080/callback', 
      code 
    }, (err, authResult) => { 
      if (err) { 
        console.log(err) 
        return 
      } 
      // the access token
      console.log(authResult)
    }) 
  }

in this part (for me at least) the redirect callback page is not so important and it point to a non existing page

but I need to say i'm not using this in production right now since my application doesn't depend too much from authentication and i'm still building it so I can't ensure this will work in any condition and also I didn't tested with the custom protocol and built application.

let me know if you need more informations or if you test it with a custom protocol

[jaimesangcap]

@b4dnewz thank you for taking the time to provide details. I will try it and get back. However I just have some question regarding the callback url http://localhost:9080/callback, in express, I can simply add route for that. However I'm just newbie in electron, where can I get/customize it and how to provide a handler for that?

Some background of my app:
its just really a simple notification app that will leverage the windows 10 action center instead of google chrome notifications. The notification app will connect to pusher. However I need to have the user logged in order to know which channel pusher will listen to.

[b4dnewz]

if you are using an express server to handle your application you can redirect to localhost:port/callback or whatever you are using and I guess it will automatically catch it if running on http protocol

can you be more specific about this part:

where can I get/customize it and how to provide a handler for that?

[jaimesangcap]

I don't have express, I just used it as an example in the context of web applications. But in context of electron desktop apps, I'm not quit sure how url works. When I run the main process, I just load an html file like this

win.loadURL(
    url.format({
      pathname: path.join(__dirname, "index.html"),
      protocol: "file:",
      slashes: true
    })
  );

should I declare a callback url and handle it? Should I use something like in the above code? Also
how do I know that I'm running using this baseUrl http://localhost:9080/? And how do I declare a callback url like this http://localhost:9080/callback and process the token returned by the auth0?

Sorry, I think my lack of knowledge in electron greatly affects this issue.

[b4dnewz]

in the case of an oauth/token call I think the callback url is unnecessary, at least I'm not using it since I just need the authToken data on the response (based on code above in my answer)
usually the callback url is for showing a "loading" page or something..

In your case since you load the index file from the file:// protocol and not http:// (or https) I think you should register a custom application protocol and redirect to it, so the url will be opened in your app, same as postman does.

I'm not a real expert too so I can't advice something better than this right now :D

[jaimesangcap]

@b4dnewz I think these are enough for now to get going, I appreciate the time, thank you! I'll let you know about the progress or hopefully the solution! :)