Electron + Vue + msal-nodejs + Azure Ad: redirect URL issue

user_5165707 0
Viewed 486

I'm building a desktop app using Electron and Vue as framework.

I also need to authenticate the user using Azure AD and I'm using msal-node.js as library to do that.

I'm able to authenticate with the server in azure and get the user info, but I cannot figure it out how to set the redirect URL.

First I have to say that the behaviour between dev and prod change drastically and I'm going to explain both scenarios and, in both of them I'm going to use history mode or not

DEV - using createWebHistory

Return Url in Azure and .env file: http://localhost:8080/

This is what I've got from the devTools during the normal navigation (no authenticated)

enter image description here

And this is what I've got after the authentication (the call to the API is successful):

enter image description here

enter image description here

Blank page in the app.

DEV - using createWebHashHistory

Return Url in Azure and .env file: http://localhost:8080/#/

After the authentication (failed):

enter image description here

enter image description here

enter image description here

Blank page in the app.

PROD

In prod I must use createWebHasHistory otherwise I've got blank page from the beginning.

The first problem I've got in production is the url itself. When I create the window I call the following url:

await win.loadURL('app://./index.html')

In azure I cannot use the same url because it's not a valid url.

If I use just:

await win.loadURL('app://index.html')

I've got blank page

enter image description here

Any idea?

Thank you

electron vue.js node.js azure active-directory
2 Answers

The solution I've found it's pretty simple. Probably it's not the most "elegant", but it works, at least for prod. In dev I've still got the same weird problem described above.

Basically I'm starting a node server (localhost:3031 for example), within the app itself, then I'm catching the redirect url with it (localhost:3031/redirect) and serving the internal url from it:

expressApp.get('/redirect', async (req, res) => {
  await win.loadURL('app://./index.html#about')
})

As I said, it works and I don't see any security issue with that, but, if you have any other idea or suggestion, please let me know.

Thank you

UPDATE

I've found the issue with Dev as well. In order to authenticate I'm using what Microsoft is suggesting in its documentation.

If you look at the file AuthProvider.js there is this portion of code, at the beginning:

const CUSTOM_FILE_PROTOCOL_NAME = process.env.REDIRECT_URI.split(':')[0];

Down below, in the method "getTokenIteractive" there is this other piece of code that applies the new protocol:

protocol.registerFileProtocol(CUSTOM_FILE_PROTOCOL_NAME, (req, callback) => {
    const requestUrl = new URL(req.url)
    callback(path.normalize(`${__dirname}/${requestUrl.path}`))
  })

In Dev my REDIRECT_URI is "http://localhost:3031/redirect", but the app protocol must be "app" (or whatever you have chosen) in order to work with Vue. So, I've just wrapped this last method in a condition based on the environment and now everything works as expected everywhere.

I hope all this can be useful to someone.

user_51657070
Admin1
Related