I have a react is frontend that fetches data from an API built with Django rest framework. The front end does not always require a user to be logged in to view content.
Does anyone know the best method of securing these in authenticated requests?
There are various ways of authentication and authorization of your REST apis like OAuth,JWT, Amazon cognito, Basic Auth, Digest Auth e.t.c.
The one I prefer is JWT which is secured as well as easy to integrate.
You just need to create jwt tokens and save the keys in local storage of react. With this keys you need to call the rest apis, and in django it will verify whether the tokens are correct or not.
For more info you can search on the above mentioned topics.
Related
I'm working on a React frontend app, and believe I have CAS working correctly to secure the frontend using this package: https://www.npmjs.com/package/react-cas-client
Now I would like to secure my backend, and only allow the app to access the API calls, presumably using JWTs (or some form of token). All of the guides I'm finding, however, require the use of Spring Security, and passing the username/password to get the JWT. In this situation I'm using CAS, so I don't have a username/password to pass in.
Could anyone point me in the right direction? Thanks!
if your ui is decouple from the backend which i think it is based on your description, you can do this with proxy grant ticket, you can look the offical doc about how the proxy works. following are high level how you can do this with front end and backend decoupled:
After user entered right user credentials, cas will do 2 things, on ui your response contains a proxyGrantingTicket, and will send a callback to your backend with pgtId and pgtIou(this is proxyGrantingTicket you received on front end).
once you have both pgtId and pgtIou, you will use those information to do the authentication from now on.
In a .NET app I can add authentication and authorization using web.config and/or IIS. I can also use [Authorize (Roles = "RoleABC")] in a MVC app's controller or action. And even extend the AuthorizationAttribute
I'm looking into creating a React app for intranet use, and reading these tutorials (ReactJS and MS), but can't find authentication/authorization details.
Even though the app will be Single Page App, I still would like to authenticate and authorize users for certain options within the app, just like I can do in MVC app.
Is the only option to do that way is creating Blazor app instead?
For authentication and authorization, you should use auth tokens (like JWT). Your backend should create an auth token when a client logs in to the system and sends it to the client. Your server also should send the authenticated user information to the client (react app) so that you can render correct pages according to the user type. For example, you can render the admin page for an admin type of user, and the guest page for a guest type of user. You can save this user data as JSON in Redux. Hence you can access the user data from any component of your react. Also, in your backend, you must restrict the endpoints according to the auth token which is sent by the client. In the backend of my app, I follow the below steps:
Authentication check -> Authorization check -> controller (endpoint) -> result
React isn't opinionated on this, so it's up to you to design the implementation. A basic way to do this is:
Log in and obtain an authorized JWT token from the backend and include the account ID when you sign it
Store the JWT token in localStorage, store the account info in Redux
Conditionally limit routes based on account info (ie. admin group) on the front end
Have every auth-required API call include the JWT token in the x-auth-token header, then on the backend use middleware to check if it's still valid. You can then also decode the account ID in order to check its privileges so that you can limit API access
This may be helpful: https://medium.com/#faizanv/authentication-for-your-react-and-express-application-w-json-web-tokens-923515826e0#5f52
Not sure whether you still need this - I personally feel we should have something bridging the authZ gap between server and client to make it easy. So I spent a few days on a github project for this purpose, here it is: authzyin.
What I tried to do is to leverage policy based authorization from asp.net core - which I think it's very cool - and automatically bring the same definition to the client to use in React via hooks.
For authentication I am using msal.js against AAD - so authN is done on the client and jwt bearer token auth is used for all requests.
It has a client lib and a server lib which can be used together or separately. Of course it might still be lacking some features - please feel free to take it as a reference (contribution is also welcome).
I'm considering using AWS Cognito as a user management system for a single page web app I'm building using React along with a Python REST API backend (Pyramid). I'm struggling to see how all the pieces fit together for my architecture (the docs don't seem to be helping me). There are many great examples of how to implement authentication into the frontend using JS. My issue is how to integrate this authentication into my backend REST API.
In my current hand rolled user management system, the frontend calls the REST API on sign-in and is given a token which is passed to API again for every subsequent request. I'm then able to use ACL's on my API functions, check permissions to access resources, etc. If I were to use Cognito and perform the authentication on the frontend (as many examples do) how will my backend know if the token is valid when it receives it with a request? Surely I wont have to call Coginto from the backend to verify this for every request? Also how can I perform checks for information such as 'is this user in the admin group' if that group is defined within Cognito? Again, calling out to Cognito for every request seems very heavyweight and cumbersome.
I did see one example where a list of valid tokens was exported from Cognito as a JSON file and kept on the backend. This seems horribly static when users could be added and removed regularly.
Is Cognito really suitable for my use case? Some high level guidance and pointers to any relevant examples and docs would be greatly appreciated!
When authenticating with Cognito, the user can have 3 tokens:
Refresh
Access
ID
For python, boto3 can interface now with Cognito. There's also this python lib wrapper: warrant, to make it easier.
Once you have the token, it is possible to pass it to the API (eg: access) and it can be checked on the server side with python-jose, as per AWS docs
To pass the token, an example pyramid /login implementation can keep the information in the session before setting the request response:
request.session['my_token'] = str(a_token)
The default cookie session factory works, though it warns that the token is not sent encrypted.
There are 2 ways for storing authenticated users details & send the same for each web API call.
Save in Cookie.
Save in Local Storage.
In my case, user details will be used in my Web API & I just need a few(around 4 values) details of user. So for me storing user details in browser is suitable. But, no matter if I am using Local storage or Cookie storage, end user can see userDetails (like UserID, tenantID etc. which are values in my DB). So there is a security issue.
To overcome this security issue, if I will use some angular encoding-decoding algorithm, my application will be slow. Is there any work around?
I am using Web API 2 with Owin. It uses a token based authentication and works pretty well, here is the link for my implementation they follow best practices:
http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/
You use a bearer auth token that is sent through to client and api to verify the users. You can also have stuff like refresh tokens for additional layers of security using the interceptor services in your angular app. So the benefit of this is, is that you do not need to store your usernames / hashed passwords etc. using local storage or cookies but only the auth token and this is then sent through to the API to verify the current user.
I'm building app with sails framework and some parts of it requires authentication based on session (like going to some pages of app). But I don't have a lot of cases when session based auth is needed. Most of app is based on single page with angular connecting with server RESTful way so there I need token based auth.
There is no many resources explaining how to do it.
here it's explained how to do REST based auth, and here it's explained for session based auth.
Anyone of you know some example how to 'merge' both of those methods?