adal.js or msal.js for ReactJS - reactjs

I am reading through Azure Active Directory support for OAuth2 for SPA (my wish is to go for Reactjs). I have found 2 libraries for Javascrip: adal.js and msal.js. Since I am new to SPA I would need an advice from experts here. I have also read this: What is the difference between ADAL.js and MSAL.js?
Therefore my question is what should i use adal.js or msal.js if i need to implement a SPA with Microsoft IdP (v1 or v2) and using ReactJS?
thanks

The selection from these two libraries is up to you. Both can be used to work with Azure Active Directory. Because MSAL.js is still under development. That is why I prefer ADAL.js That means you have to use adal-angular. You might find out good a documentation and many examples for that. The reason you have to use adal-angular is still there is no adal library for React.

Related

Which is best 0Auth based authentication library supporting multiple providers to use with react apps?

I need an open source authentication library to use in a React JS app which supports providers like Google, Microsoft, LinkedIn, Twitter, Facebook etc.
I found this auth0/auth0-react in top results, but after digging up a bit looks like it will be only free with up to 7,000 active users.
NextAuth - this one is for next.js apps.
Please help me to find similar library for a react app.
You might have mixed up two things:
Auth0 as SaaS solution for identity and access management (IAM)
auth0/auth0-react as a software library for using Auth0 (and other IAM solutions) in React SPAs
auth0/auth0-react is open-source under the MIT license and not restricted to a particular number of users.
Auth0 however is a commercial solution with a free plan for up to 7000 users (and with additional restrictions).
If you don't have authentication in your app yet and would like to add it now, you have two options:
Use an identity and access management system (IAM). Users can then either setup a new account with username/password or an account linked to a social login (Facebook, Google etc.). An IAM isn't just a software library. It a separate service you need to setup (or pay for as a SaaS solution). The well-known free option is Keycloak. In such a scenario, auth0/auth0-react is suitable to integrate the IAM into your React SPA.
Integrate software libraries into your React SPA without using a separate IAM. This solution will be restricted to social login only. There is no option to login without at least an account at either Facebook, Google etc. There are many libraries available that integrate a single social login but not multiple ones. A quick search revealed two npm packages promising to integrate multiple providers: reactjs-social-login and react-social-login. There are probably more out there. They are nowhere near as polished as Auth0.

For ADAL.js (or MSAL) with ReactJS/AngularJS, what's best way to handle versioning the framework

I’m working with a large company with multiple dispersed teams developing applications using the ADAL client libraries and either the React and/or Angular frameworks. Over time, the various organizations within the company have each modified/extended ADAL.js to create their own adaptations for handling different needs (for example, implementations differences for React vs Angular …or handling different versions of a framework, like Angular 2 vs Angular 5).
With this context in mind, I was asked the specific question:
"Just wanted to know if Microsoft has any plans to enhance and support
ADAL.js for newer frameworks as most UI use cases for Azure AD would be on Angular and React and these ‘solutions’ are frequently updated"
In other words, do we have guidance (and/or a roadmap) for a more abstracted way of handling the implementation with various frameworks …or across different versions of a particular framework?
Or should each org continue to create their own adaptations?
So far there appears to be updates to existing ADAL libraries but no plans to support additional web frameworks. I.e "to bad so sad" for those of us using Angular 2/4/5/6
See the following issues in the ADAL.js github repo
azure-activedirectory-library-for-js/issues/510
azure-activedirectory-library-for-js/issues/379
Also keep an eye here: Vittorio Bertocci's Blog
There are a bunch of 3rd party efforts to create wrappers for later versions of angular, but they all need to be vetted before use (that is certainly what I am doing).
We do have plans for building wrapper libraries for Angular in the Azure AD SDK roadmap. However, we are focusing the efforts on the newer MSAL.js library which integrates with the Azure AD v2 endpoint and brings additional capabilities such as support for Azure AD B2C and signing in MSA accounts. You can track this issue on the MSAL.js repo.

Node.js & AngularJS quickest and simplest way to implement authentication & authorization mechanism

I'm building a project using Node.js and AngularJS.
Some of the views and operations in my project require authorization.
In ASP.NET I used to simply save the user-id or user object in the Session when the user's credentials are correct, then in every Page and operation I would check if the user has permissions, and if not I would use Response.Redirect. So simple!
Now I use Node.js and AngularJS which are maybe the most popular combination for building websites nowadays and I would expect to have a very simple and quick way (even of a third party) to implement authorization, just like in ASP.NET.
Unfortunately I've only found a bunch of implementation examples that contain a myriad of code lines and turn me into an information security expert who knows about things like token and etc. Here are some of the articles I've found:
Best practices for authentication and authorization in Angular without breaking RESTful principles?
http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/
https://www.theodo.fr/blog/2015/08/handling-basic-route-authorization-in-angularjs/
http://code.tutsplus.com/tutorials/token-based-authentication-with-angularjs-nodejs--cms-22543
http://www.kdelemme.com/2014/03/09/authentication-with-angularjs-and-a-node-js-rest-api/
Is there any simple way to implement authentication+authorization+routing to unauthorized page without writing so many lines of code?
Any help will be profoundly appreciated!
MeteorJS is a node based framework with a drop-in authentication system. It also has first class support for AngularJS on the front-end.
You would first add the relevant accounts and UI packages on the command line.
meteor add accounts-password
meteor add dotansimha:accounts-ui-angular
You could also add OAuth provider packages such as accounts-facebook or accounts-google.
Then in your template you add a the login-buttons directive.
<login-buttons></login-buttons>
It then handles account creation, login, forgot passwords etc. It also provides hooks so you can add fields and values on account creation.
Here is a link to the authentication section of the Meteor/Angular ToDo tutorial.
nodejs modules and jsonwebtoken, passport, passport-local
passport local for local strategy and passport for authenticate and jsonwebtoken for create authentication token

Angularjs and SSO (SAML2)

I came across with this AngularJs thing, and I thing it is awesome, really solves many problems I confronted while working on my last WebApp with just a few lines of code.
Now, what I didn't find or was looking in bad places is the protection of AngularJs app with SSO (simpleSAMLphp Identity provider). How to deal with this?
What I am going to build will use Pyramid framework as a backend REST API, and AngularJs (I wish) for the frontend. But how to protect the app from unauthorized access, skipping the sso login. Any implementation example or lessons working on similar case would help (may be with php, ruby backends and SSO etc)
I doesn't seem like pyramid has any direct support for SAML authetication. I suggest using a third party application for SAML. For example Shibboleth. The SAML communication is done on the server side so Angular wont need any integration.
Google like 'Authentication in angular JS application' you can get lot to protect your angular app. To protect your REST API use Oauth whether its a php or ruby application.

OpenID for Google App Engine

I saw many links over the internet and specifically openid-consumer project (which is a part of http://code.google.com/p/google-app-engine-samples/), but it doesn't work as honestly readme file says.
So what's the latest update on that? Is there any way I can authenticate my web site users with OpenID from someone besides Google (like stackoverflow does)?
I have setup an example app here:
http://github.com/shripadk/authlogic_openid_selector_example
With the source code. It works exactly the way stackoverflow does. Have not implemented facebook auth as its buggy still.
I've just played a bit with the openid-consumer you mention and it actually works. Have you tried to run the sample code standalone, as a separate project?
I've used it in a test application on App Engine and it seems to work alright. I placed the consumer.py, fetcher.py, store.py and then the openid dir in the root dir, then I moved parts of the config in app.yaml from the openid sample app to my app.yaml.
You can check the implementation at http://x-libris.appspot.com. In the upper right corner press Logga in (which is swedish for login). Try using any of the available OpenId providers, so far OpenId, Google, MySpace and Yahoo! are available (I've only tested the first two providers).
It's an Ajax based solution so I did some tweaking of the render method in consumer.py in order to change the templating and the example at openid-demo.appspot.com was handy.
// John
I just noticed the new version of the app engine SDK now includes support for OpenID in the user API
The 1.3.4 release includes support for authentication via OpenID as an experimental feature.
look in the app engine python user API docs for more info about this
This should make this easy to implement (I will start implementing this today !)
try rpxnow.com , they provide multiple options including openid.

Resources