How to refresh token using Satellizer and interceptors? - angularjs

I'm using Satellizer for my angular app, however when the token expires it does not include the Authorization header anymore to the $http requests resulting to incorrect http error status returned.
How do I handle this and refresh my token? I have already done the interception when $http error occurs, my problem is mostly with the refreshing.
I am using Laravel 5.2 and tymon/jwt-auth for my backend.

Related

Bearer token auth 401 from angular application but not from Postman

I have an API running asp.net core using jwt bearer token authentication. The authentication scheme seems to be working perfectly when I hit the API through Postman providing the Authorization header with my requests.
When I hit the API from my angular application, I get a 200 on the pre-flight request and then a 401 on the actual request.
The WWW-Authenticate message says:
Bearer error="invalid_token", error_description="The token is expired"
However, when I copy the bearer token out from my request from the angular application, and use that same token in a request from Postman, it works fine and I get my data back.
I'm sure I'm doing something stupid. But sometimes it will work just fine from the angular app, then sometimes when I run it, it will not work at all.
Any ideas are appreciated.
I had same problem and I solved it.
When I pass token from angular localStorage to Headers it added double quotation and so this was incorrect.
I changed this Authorization: Bearer "token " to
Authorization: Bearer token without double quotation and everything is fine now.

AngularJS - Authentication with Bearer Token and Web API 2.0

I have the problem that even though I set the $http.defaults.headers.common.Authorization to null I am still capable of accessing the [Authorize] part of my Web API 2.0 application.
This problem doesn't arise when I start the application from scratch and try to retrieve the data via an initial GET request. This is when I get an error from the $http callback function.
Any guesses why this is happening? I am quite confident that the bearer token is stored somewhere in the browser and doesn't get deleted properly ...
Chrome (With bearer token):
Chrome (Without bearer token):
Internet Explorer (no bearer Token attribute):
First of all, the authentication property in IE is completely missing. Second, in Chrome everything works perfectly. In IE I have the issue that I can't erase the token for the logout request. The login part with the summary of the regions [Authorize] part works perfectly.
Make sure you haven't also configured jQuery to do this, via something like $.ajaxSetup
Try to check the request that have been set, if any Authentification header is there. Also try to verify that you are using the [Authorize] attribute from System.Web.Http and not System.Web.Mvc

Adding http headers to window.location.href in Angular app

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.

How to set $httpProvider default headers from my app config in AngularJS?

I'm trying to set my
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $cookie.auth_token;
in my .config section of my app, but it doesn't seem like I can access the document/cookies just yet? Is there a better place to set this?
I'm doing this because I'm storing my users auth_token in a cookie so they don't need to login every time they use my mobile app.
Thanks!
As described in $http docs:
... Angular provides a mechanism to counter XSRF. When performing XHR
requests, the $http service reads a token from a cookie called
XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN.
... To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on the first HTTP
GET request
So if you set your CSRF token in cookie name XSRF-TOKEN then no adjustments are needed on Angular side. and your code should work as is.

Angular JS Verify CSRF Token in POST Request

I am using AngularJS with Rails. I have the following request which updates users in bulk.
$http{
method: 'POST',
url: $scope.update_url,
params: {selected_ids: userIds}
}
This cannot be a 'GET' request due to restrictions in the length of the URL (http://support.microsoft.com/kb/208427)
But for 'POST' request, we need to have a CSRF authenticity token in the header.
How can we set the CSRF Token to the post request header?
You can set http headers as explained in the $http service.
You can set it up globally:
$httpProvider.defaults.headers.post['My-Header']='value' (or)
$http.defaults.headers.post['My-Header']='value';
or for a single request:
$http({
headers: {
'My-Header': 'value'
}
});
Here is an important quote from Angular:
Cross Site Request Forgery (XSRF) Protection XSRF is a technique by
which an unauthorized site can gain your user's private data. Angular
provides following mechanism to counter XSRF. When performing XHR
requests, the $http service reads a token from a cookie called
XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN. Since only
JavaScript that runs on your domain could read the cookie, your server
can be assured that the XHR came from JavaScript running on your
domain.
To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on first HTTP GET
request. On subsequent non-GET requests the server can verify that the
cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that
only JavaScript running on your domain could have read the token. The
token must be unique for each user and must be verifiable by the
server (to prevent the JavaScript making up its own tokens). We
recommend that the token is a digest of your site's authentication
cookie with salt for added security.
If you're wondering how to actually set a XSRF-TOKEN cookie value in Rails this answer has an implementation Rails CSRF Protection + Angular.js: protect_from_forgery makes me to log out on POST
I recently faced the same issue and adding the gem angular_rails_js solved it. To my understanding it creates for every rails controller a cookie with the rails CSRF-TOKEN that will be catch (default $http behaviour) by angular $http.

Resources