Electron with React and OIDC authenticatino works at DEV but fails at PROD

2
votes

So I built an app I wanted with all blows and whistles including integration with OpenID Connect (OIDC "oidc-client").

Problem is it works only at DEV environment, since electron spins local server for it, so when I'm redirected after identification my app in DEV mode listense to "localhost:3000" and oidc-client can proceed with saving token and other things.

But, once I have built a production version, electron serves react as a static files, so all URL are now "file://....", and once I'm redirected after identification this time, no one is there to listen at OIDC callback at "localhost:3000". I drilled the docs of electron and OIDC but haven't found even one example on how to implement this case.

Anyone have successfully "listened" to callbacks at production version in Electron? The only option I have in mind is to spin up a server at prod and listen to "localhost:3000", but than the question is where to redirect it, so OIDC will catch it? I'll appreciate any input, thank you in advance.

Here some visual explanation of what I described.

enter image description here

1
node.jselectronopenid-connect
Did you ever find a solution? Okta provides this tutorial and includes a step for production building, but doesn't discuss the necessary steps for it to really work in prod builds due to the issue you describe. – dev
@dev the only way to control the process was to use a custom login page for the electron app, which would have the same origin as the app without any redirections, unlike the login page provided by the identity server, which requires redirection. This way I simply http.post(...) all necessary data and get token in response. – A1exandr

1 Answers

1
votes

Hmm - how are you packaging the app? I have a couple of Electron samples you could compare against, both of which you can run pretty easily against my cloud API and Authorization Server:

In both cases I can run a packaged app via 'npm run pack'. In my case I am using electron-packager to build release binaries.

I use AppAuth-JS and here is my code to listen on a loopback URL.

Not sure I fully understand your problem, but hopefully it gives you a few pointers.