Best way of implementing Oauth user security in ReactJS web developement - reactjs

We are new to React JS and looking to incorporate existing OAuth authentication process to React framework.
1. Looking to have any references on best practices
2. Best & secure way to store security key & access key information or crucial information
Any references related to this requirement makes great support !
Thanks-

You will need a backend in order to implement Oauth. Client side frameworks lack the ability to secure data. So in short you can't implement oauth in React.js without some backend technology.

Related

Secure webapp with Django and React

I'm experimenting with these 2 technologies to make a secure web app [Currently learning React (60%) and Django (<50%). This is intended to be like a medical database, so doctors and nurses enters their patients' information. They need to login obviously. I wanted to implement React-based UI (And not using the classic method to create views from django), so I've found many tutorials just like this one:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
It basically turns Django into a restAPI, and then the React frontend uses axios to retrieve data from the endpoint. Sounds not bad at all (comparing to the native method of rendering data in a webpage from Django), but the problem is that I have no idea on how to make this secure, you know, Django provides an auth system, which is pretty good and secure, I have to say, but in a project with this structure, the auth needs to be done in React, so there many questions appear:
To start with, is it a good idea to make a project of this structure? (If no, then what could be a good one)
If it's a yes, how can I protect the API so only logged in users can interact with it? (What mechanisms to ensure protection)
Yes, this is absolutely a good idea to separate the client application and the backend server application.
You can access the backend through the rest api basically with any frontend framework/app/script.
Customers are able to extend their own applications with the abilities of your backend service.
You can create multiple different frontends that use the same backend or different parts of the same backend via the rest api (multi-branding, reselling). Or you can just swap the frontend framework every second year to a new one.
It's also easier to create different automations by using the rest api.
And the list goes on.
For django rest api auth I would recommend Token Authentication which is already included in the Django REST Framework and for React use this tutorial for implementing the login and the token handling.
And don't forget to use TLS on your servers, and create API documentation. (Example)

Web API OAuth external login without using any Asp.Net Identity tables?

I am developing an AngularJS application with some Asp.Net Core Web API support. This application is not using any database in backend. Now I want to implement a social login option for some privileged access. What is the best authentication mechanism without using any Asp.Net Identity tables?
As far I know OpenIddict is coupled with Asp.Net Identity So that I must implement a storage mechanism for that. Please correct me if I am wrong. I am also looking for other options like ASOS but it is too complicated compared to OpenIddict so I couldn't find a good solution with that.
Kevin Chalet published an excellent article but still I am struggling because of my poor technical knowledge on this subject.
http://kevinchalet.com/2016/07/13/creating-your-own-openid-connect-server-with-asos-introduction/
Can you please guid me?

Storing Client API Keys AngularJs Securely in Ionic

I'm new to AngularJs but I've researched and studied everything online for it to be power my back-end API services (PHP). The problem I'm having is that I am using Oauth2 (Bshaffer Library) to implement security. Before moving to AngJs, there was no problem with storing the client id and client secret serverside, however I'm weary of how I will store these client keys on my applications (web or hybrid apps). I plan on using Angular-storage to store the tokens specifically, so that isn't a problem, but what about client keys?
I have spent ages researching this with no real clues, the article on most Google searches was written by some idiot that made his own OAuth styled implementation which was completely insecure so I thought I had to come here and ask.
Thanks

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

Securing Symfony RESTful API consumed by angular front?

I have set up a Symfony based API which is being used by an Angular front end which is totally dependent of it (User registration included)
I have read multiple threads recommending using WSSE or FOSOAuthServerBundle but I'm not sure about the best method ?
If I understood correctly, WSSE has to send for each API request x-wsse headers which make me think it is not the best suited for performance.
About the FOSAuthServerBundle I have never used it and looks a bit complicated to me compared to WSSE, thus that's why I'm asking there before trying to implement it.
I have 2 simple groups of user (basic and admin), what would be the best way to secure my API, additionally providing an easy way to keep user persistence (I mean accesses through the different pages)?
How should it be in the Angular front side ?
Thanks for your help.
Refs: http://blog.tankist.de/blog/2013/07/16/oauth2-explained-part-1-principles-and-terminology/
http://obtao.com/blog/2013/06/configure-wsse-on-symfony-with-fosrestbundle/
It all depends on what your requirements are.
First of all, OAuth 2 is an authentication mechanism/spec which you can use in combination with sessions/bearer tokens/... This also applies for local accounts (since you want to do user registration).
FOSAuthServerBundle is a bundle to implement the server-side of the OAuth2 specification. This basically means you can expose your OAuth2 side of the API to other applications and allow them to use your accounts to authenticate. Think google login, twitter login, etc but for your own app.
This all has nothing to do with the way you validate / authorize your requests after the initial login has taken place.
Do you want to implement stateless authentication? Then I would recommend using the new JSON Web Token (JWT) specification.
See Symfony Bundle (LexikJWTAuthenticationBundle) and JWT description (JWT.io)
There are many resources on it from the angular side of things and the API part is pretty straightforward.
WSSE does not seem suited to implement in a RESTful API and I have no experience using/implementing it so I cannot comment on it too much.

Resources