I have made a JWT authentication for my rest api. now i can login in my service and set a token in header for my next angular requests. But when a reload my page browser lost my token. May sounds like ridiculous, but i want to know the elegant way to fix it.
You can store the JWT token in localStorage or sessionStorage and append it to the header when making requests.
https://developer.mozilla.org/en-US/docs/Web/API/Storage
Related
I have built an MERN application
Built an login route and i have 2 JWT tokens one is Access Token and another one Refresh Token
Whats the proper way to store this token in frontend?
I'm setting both the token in http only cookie 🍪
But axios interceptor will send back both the jwt tokens every time in each requests.
So storing in local storage is bad option as i know
What's the proper process? I need refresh token only when access token is expired.
Can anyone please guide me the proper way of doing MERN application?
In every tutorials they setting the http only cookie for access token and refresh token through the response body. In that case how to handle in frontend? Where exactly storing it?
so i am doing an OAuth between my FrontEnd (ReactJS) and my BackEnd (Spring Boot),
since i am setting a cookie httpOnly, my frontend cant access it obv.
but now, since the token needs to be send on every request to check if the user is Authorized or not, how we go about that?
If i send any request with axios for example, how do i get the Authorized Token in the header?
Well, you can't. If the cookie is httponly, there is no way to add its content to the Authorization header. You either need to store tokens directly in the JS code (e.g. in local storage or memory - taking into consideration the risk), or you need to add a proxy between the APIs and your SPA. The proxy will extract the token from the cookie and place it in the Authorization header.
I have one issue. I have a project which is created in MVC and AngularJs using Apis. I want to apply the OAuth token with all Apis.
I will follow the below steps :
First login from the panel.
Maintain OAuth token in the header of each page.
Use that OAuth token from the header and pass from each web API request.
If somewhere I am wrong please let me know. How can I do?
Please share if anyone has done before.
Create a service/factory that will make all API requests from your app.
It's just a wrapper of $http. call it something like ApiService.
This service would read the token from where ever it stored (header, cookie...) and append it to every request.
This very much like the pattern $http handles XSRF protection
Using React on the frontend with a RESTful API as backend and authorisation by a JSON Web Token (JWT), how do we handle sessions? For example after login, I get a JWT token from REST. If I save it to localStorage I am vulnerable to XSS, if I save it to cookies, same problems except I set cookies to HttpOnly, but React can't read HttpOnly Cookies (I need to read cookie to take JWT from it, and use this JWT with REST requests), also I didn't mention the Cross Site Request Forgery (CSRF) problem. If you're using REST as backend, you can't use CSRF Tokens.
As a result, React with REST seems like a bad solution and I need to rethink my architecture. Is it possible to offer your users a secure React application that handles all business logic on the REST API side without fear of losing their data?
Update:
As far as I understood, it is possible to do this:
React makes an AJAX call to the REST API
React gets a JWT token from the REST API
React writes HttpOnly cookie
Because React can't read HttpOnly cookies, we use it as-is in all our REST calls where we need authentication
The REST API calls to check the XMLHttpRequest header, which is some kind of CSRF protection
The REST API side checks for cookie, reads JWT from it and does stuff
I lack theoretical knowledge here. The logic looks pretty secure, but I still need an answer to my questions and approve of this "workflow".
React makes AJAX call to REST API
assured, lots of restful resource client lib available
React gets JWT token from REST
assured, this is what JWT should do
React writes httponly cookie
I don't think so, It should not work, but session is not such a important thing, it'll soon get out of date, and recheck password on key operations, even the hackers got it in a very short time, you can bind session token together with IP when user login and check it in your backend apis. If you want it most secured, just keep token in memory, and redo login when open new page or page refreshes
Because react can't read httponly cookie, we use it as-is in our all REST call where we need authentication
assured, check user and permissions through login token, like csrf you can put your login token into your request header, and check it in your backend apis.
Bind login token to your own restful lib will save you a lot codes
REST on calls checks XMLHttpRequest header, what is some kind of CSRF protection
REST side check for cookie, read JWT from it and do stuff
assured, as most people do.
Also, bind csrf token to your own restful lib will save you a lot codes
use user token in header https://www.npmjs.com/package/express-jwt-token
Authorization JWT < jwt token >
use csrf token in header https://github.com/expressjs/csurf
req.headers['csrf-token'] - the CSRF-Token HTTP request header.
restful client https://github.com/cujojs/rest
react with jwt https://github.com/joshgeller/react-redux-jwt-auth-example
Your server can set the JWT cookie directly as a response to the login request.
The server responds to POST /login with Set-Cookie: JWT=xxxxxx. That cookie is http only and therefore not vulnerable to XSS, and will be automatically included on all fetch requests from the client (as long as you use withCredentials: true).
CSRF is mitigated as you mentioned, see OWASP for details.
I have a angular app that I needed to redirect outside to a non angular html page, so I thought I could just use the $window.location.hrefto redirect the angular app to my external site. This actually works fine, however, I have a nodejs/express backend that checks for auth token before serving up any content(even static content).
This requires a auth token to be sent in the header of the http request. Now the question:
Can/How do you add an auth token to the request that is made by changing the $window.location.href before it is sent off?
When you use $window.location.href the browser is making the HTTP request and not your JavaScript code. Therefore, you cannot add a custom header like Authorization with your token value.
You could add a cookie via JavaScript and put your auth token there. The cookies will automatically be sent from the browser. However, you will want to review the security implications of using a cookie vs. a header. Since both are accessible via JavaScript, there is no additional attack vector there. Unless you remove the cookie after the new page loads, there may be a CSRF exploit available.
This answer is NOT a safe way, as the token is exposed in the URL, which is logged in browser history, access logs, etc. Use a domain cookie instead. I'll leave the answer as it can be an easy way to debug in your local setup.
I am using JWT as authentication on a Laravel PHP backend, and it works by putting ?token=... in the URL. For example, when using AngularJS with satellizer plug-in, I add ?token=' + $auth.getToken() to the URL.