Support for popular frameworks

[rosieks]

Hi I'm wonder if you are maybe thought about provide some library dedicated for specific frameworks like Angular 1.x, Angular 2.0 or Apache Cordova. Something similar to what Microsoft provides for ADAL:

• https://github.com/AzureAD/azure-activedirectory-library-for-js
• https://github.com/AzureAD/azure-activedirectory-library-for-cordova

It would be really great to have something what I just add and it works but don't require me to use ADAL.

[brockallen]

@ryanwischkaemper

It comes down to time and money (as I am self-employed and am not funded by anyone). You can't be naive enough to assume that open source is free. I have to pay my bills (as we all do) and your company receiving the benefits of this (and/or other OSS libraries) has little room to complain unless the company somehow contributes back. This can be in the form of sponsorship, or in the form of time and effort from employees to assist on the project.

So given the vocality of your high expectations, what do you offer to help bring this library into the modern era?

[tonyeung]

I'm not sure about ng2 or cordova, but integration with ng1 is relatively pain free. What kind of issues are you having with integration with those frameworks?

[rosieks]

Hi @tonyeung Integration with angular 1.x isn't so hard, but unfortunately when you type oidc token manager angular there is also not so much good results. Of course the first one is really useful but it's still lack restricting access to routes.

Cordova is much worst case - solution with using InAppBrowser is a bit clumsy (probably for that reason ADAL use some native code to manage tokens). Also requires much more code to make it working. Additionally there are some restrictions from mobile platforms regarding some capabilities in Cordova which make it even harder (e.g. internetClientServer or privateNetworkClientServer).

[tonyeung]

you wouldnt use the oidc token manager to restrict access to routes in the first place. You should be doing that using an event handler listening to routeChangeStart or stateChangeStart. You would just pass the token manager service into the run block and pull what you need to authorize your pages.

[brockallen]

So yes, @rosieks I agree -- I'd love to have the time to make this handle all of those environments. All I can say is "possibly eventually?". @ryanwischkaemper brought up some valid points, and with enough time I'd love to be able to address them, but it is a time issue. This library is a v1 in essence, so the fact that there's something at all should be something to at least get started with, even if it means forking or doing your own home grown based on this as a starting point.

[leastprivilege]

So given the vocality of your high expectations, what do you offer to help bring this library into the modern era? @ryanwischkaemper

nothing - it seems.

[rosieks]

@tonyeung - I'm trying to use stateChangeStart but unfortunately it doesn't work well:

$rootScope.$on('stateChangeStart', function (event, next) {
    if (next.restricted && tokenManager.expired) {
        event.preventDefault();
        tokenManager.redirectForToken();
    }
});

Unfortunatelly it ends up with never ending ledirect loop because preventDefault change url to previous and redirectForToken doesn't change it synchronously.

[tonyeung]

Try sticking it into a $timeout. Also, why are you manually refreshing the token? Why not have it silently renew?

[rosieks]

First of all I'm not trying to manually refresh the token. User tries to reach some route that requires user to be authenticated. I'm just checking if token is expired. If it is then I call redirectForToken to let user login in IdentityServer. That's pretty the same what you have here: https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/master/lib/adal-angular.js#L194

Using $timeout doesn't help. In my case user tries to reach '/' url. But I have no such state so it redirect's user to '/home'. But home requires user to be authenticated. I check that and it looks like he isn't so I preventDefault and call redirectForToken. Angular notice that I have prevented action and move me back to '/'. Then angular notice that there is no such state and redirect's to '/home'. That way I end up with infinite loop.

[tonyeung]

You don't have a signin page?

[rosieks]

No, IdentityServer is my signin page

[rosieks]

Sure I can, I just thought that redirectForToken is for that.

[tonyeung]

you know, I don't have a prevent default in my project. I simply redirect and then return. You might want to create a login page that is public which only exists to redirect the user to the redirectForToken

[rosieks]

Yeah, but I don't see what could be on this page. I don't know - maybe only text "Redirecting to login page"

[tonyeung]

pretty much. unless your users connect via dial up, all they should see is a screen flash, if even that. Its too bad there isn't a redirectForToken silent for situations where the user can be silently authenticated via SSO.

[ryanwischkaemper]

@leastprivilege @brockallen I started on a update to this project. Progress so far is here. I've only done a rough port to Typescript so far, but it builds, runs, and unit tests are set up.

Interested on getting feedback on the structure of it.

Benefits

• Uses ES6 modules and Typescript for all source and unit test code
• ES6/7 features available to use in the code (i.e arrow functions, rest parameters, string interpolation, generators, etc)
• Utilizes SystemJS which provides great flexibility for the projects built artifacts because it supports AMD, UMD, CommonJS, global, and ES6 module formats. Large projects like Angular2 and Aurelia both use SystemJS, so integration with those popular future frameworks is a breeze. (more on this below)
• Has unit test infrastructure set up
• Stays framework agnostic. Want to use it in Angular? Aurelia? Knockout? Sure.

Why pick SystemJS Publishing a modern Javascript library nowadays isn't simple. People want to use their package manager and build tool of choice, and they also often want to be able to run the same library in NodeJS and the browser.

Whether you use Browserify, WebPack, RequireJS, Rollup, jspm, etc, etc, or still want to use libraries on the global scope - you'd still be able to use this library. It could be consumed easily by npm or jspm package managers. It wouldn't be able to be used in NodeJS right away, though, until certain things were shimmed in the codebase (like depending on window to be there).

[ryanwischkaemper]

As a followup, what do you think about merging this repo and the oidc-client one? There are shared concerns by both and they are both very small

[brockallen]

@ryanwischkaemper

I'm swamped this week, but will have a look next week. Thanks.

[ryanwischkaemper]

If using SystemJS is decided to be desirable going forward for this project, then I'll finish work on my fork and open a PR.

[brockallen]

@ryanwischkaemper please hold off. I've not yet had time to look into it. I'm also not convinced of TS (babeljs or some such might be an alternative). I just don't want you spend a ton of time if it's not been discussed.

[ryanwischkaemper]

@brockallen Agreed - I haven't done and won't do anything else until a decision is made. Also, what I have done so far wouldn't take long to convert to plain JS and use Babel as the transpiler. That's easy with SystemJS

[brockallen]

Ok, thanks. I need to get myself up to speed more than anything else so, as always, time is the main bottleneck here.

[mvarblow]

+1 for systemjs and typescript; will make this excellent library drop into an angular 2 application very nicely.

[tonyeung]

@ryanwischkaemper @mvarblow What is the reason for systemjs vs webpack or gulp? I'm currently using gulp, evaluating webpack, looked at systemjs and could not find how systemjs/jspm does chunking, lazy loading, dev servers, etc.. In summary, am I mistaken to think jspm/systemjs as a comprehensive dev/prd build system that i can use to rapidly prototype, test, and deploy apps?

I don't have any preference at this point, just trying to understand the differences/pros/cons of each (already using typescript).

[mvarblow]

Actually, I'd like to see it packaged in a way that makes importing it into a webpack-bundled typescript (or es6) application just work. If it works in systemsjs from a typescript application then I assumed that it would also work from webpack. For example, if it's packaged as an AMD module generated from typescript I'll be happy.

I've been unable to get the current version to work in a webpack bundle using typescript. To get it to work I had to import a customized version of the dist file. I had to customize the dist file to prevent compile errors on the require of the 'vertx' library, which I've been unable to locate.

[ryanwischkaemper]

@tonyeung

What is the reason for systemjs vs webpack or gulp?

Gulp is a streaming build system - it's not comparable to SystemJS or webpack. SystemJS is a "universal dynamic module loader" (from their README) and webpack is a "bundler for modules" (from its README).

Essentially, SystemJS and webpack support writing code in CommonJS, AMD, or ES6 module format and dealing with the resulting complexities of interoperability of the different module formats, transpiling (if using Babel/Typescript or similar), compilation, and bundling. If you use SystemJS or webpack, you are not limited (for the most part) to what external libraries you use; and, most importantly, it doesn't limit consumers of your library because your library can be built in a variety of formats from the same source code.

am I mistaken to think jspm/systemjs as a comprehensive dev/prd build system that i can use to rapidly prototype, test, and deploy apps

No, you are not mistaken - SystemJS/jspm can and is used in this capacity on a large number of open source and closed source enterprise projects. I'd strongly encourage you to read over the README's for the two projects to get a better understanding, and if you'd like to get some insight for using SystemJS from dev to production then the jspm 0.17 beta guide. Even though it is a guide for the beta version (which is largely stable and not far off from being released), the concepts largely apply to the current stable version.

@mvarblow

Actually, I'd like to see it packaged in a way that makes importing it into a webpack-bundled typescript (or es6) application just work

That's how we (developers) want all of our libraries to be packaged - so that consumers can import it into their project and have it just work. SystemJS (and webpack) allow this.

[tonyeung]

@ryanwischkaemper The beta guide helps a lot with understanding the capabilities of SystemJs since their README left me scratching my head quite a bit. I find the docs a bit heavy on features and light on usage.

I'll need to play around a bit more with webpack and systemjs to be sure of how I feel about each. At this point jspm/systemjs reminds me a lot of grunt. There seems to be a big focus on configuration which kind of makes it feel like a black box. Webpack docs seem to explain the intended usage better.

This probably has a lot more to do with the amount of docs available for each project so I'll play around with them first before I decide what I'll use on my projects. Thanks for the explanation.

[brockallen]

Would any of you be interested in a google hangout sometime this week to discuss? I'm timezone EDT/UTC-4 (as of today's time change).

I want:

• unit tests
• better dependency management (promises and the JWT library are the two main ones)
• consumers to be able to use this library by either:
  • just pull in a single .js file
  • use the modern package managers (npm would be sufficient IMO)

the unit tests are all on me. the dependency management is really just a matter of changing how the tooling is used. and packaging is the final unknown that i think this thread is now discussing.

i spent several hours last week doing research on babel vs. TS, as well as jspm vs webpack. I'm still undecided on it all. these would be something to discuss as well if we had a call.

[RichiCoder1]

Color me interested!

[ryanwischkaemper]

@brockallen I'm interested. I'm CDT/UTC-5

[tonyeung]

@brockallen I'm in if I can make it. Also CDT/UTC-5.

[brockallen]

Ok, I'm thinking Thursday at 10AM EDT. Any objections?

[tonyeung]

i don't have any meetings scheduled for that time so it should be tentatively okay for me

[ryanwischkaemper]

That time works for me

[RichiCoder1]

That'd work by me.

[brockallen]

Ok, sounds like a plan: https://plus.google.com/events/c7rthjgvvmbk84hj5vbu9bt1850?authkey=CKXOzIfRz9-07AE

[brockallen]

For anyone else watching here, here's the first major cut done in es6: https://github.com/IdentityModel/oidc-client-js/issues/2

[brockallen]

Rewritten oidc-client now released: https://github.com/IdentityModel/oidc-client-js. As for Angular, etc. those could be nice contrib projects on top.