Auth flow for Angular 2 Electron app

Hello, I’m currently developing an app with Angular 2 and intend to make it a native application with Electron. I know in the documentation it was says the recommended approach is implicit flow for SPAs and Authorization Code Flow with PKCE for native. In my use case though which one would be best or would it just come down to a matter of preference? Thanks for the insight!

Hey @a1d3n - it mostly comes down to what use case you are trying to solve.

If you’re looking for a persistent session that doesn’t require the user to login as frequently - you can leverage the Authorization Code Flow (with PKCE) to return a refresh token. Once the user’s session has expired, you can exchange the refresh token for a new access token.

Please note that this requires secure storage of your refresh token. For example, tokens should be stored in the Keychain for iOS devices.

The OpenID Foundation supports the AppAuth JS SDK to assist you with this flow. There is a sample Electron project located here.

While the Implicit flow can solve a number of use cases, I’ve seen more developers jump to the Authorization Code Flow with PKCE due to its ability to handle a long-lived session.

Hope this helps!

In case you’re still looking for an Electron + Okta example, here’s one I created:


I’m also in such a situation, I’m using Angular 6, and the git repo from @mraible

This example works like a charm indeed, I can connect to my Okta.

But I don’t succeed for now to import this code in my Angular 6 project.

Indeed, whenever I add the flow.ts to some Angular service, I get the error on compilation :
ERROR in node_modules/@openid/appauth/built/node_support/node_requestor.d.ts(6,22): error TS2304: Cannot find name ‘JQueryAjaxSettings’.
node_modules/@openid/appauth/built/xhr.d.ts(5,31): error TS2304: Cannot find name ‘JQueryAjaxSettings’.

Indeed @openid/appauth use some typings from JQuery

I still get this error even after a npm install --save-dev @ types/jquery

However I get no error if I inject the flow.ts code in my main.ts code for Electron.

Hence my question :
Should I put all the flow.ts code to my main.ts Electron code, and the Angular 6 communicates with the main.ts Electron with IPC to trigger the connection towards Okta ?

Any help is welcome for this trio Auth flow / Electron / Angular 6

Best regards

I quickly answer to myself

Yes, I’ve been able to connect to Okta on my angular6 running through Electron
The point is to push flow code to Electron context (and not in Angular Context), and the Angular drives it through IPC message sent to Electron context

It sounds like you got everything figured out. FWIW, there was an issue entered in the AppAuth-JS project today to clarify Angular support.