Angular2-jwt: AuthHttp don't have token in the ahthorization header?

[helxsz]

I have configured the AuthHttp with the following code

import { routing } from './app.routes';
@NgModule({
  providers: [ApiService,  AuthHttpService,
    provideAuth({
        headerName: 'Authorization',
        headerPrefix: 'bearer',
        tokenName: 'auth_token',
        tokenGetter: (() => localStorage.getItem(this.tokenName)),
        //globalHeaders: [{ 'Content-Type': 'application/x-www-form-urlencoded' }],
        //noJwtError: true
    })
  ],
  bootstrap: [AppComponent]
})

However when I used the AuthHttp, my server side just show there is no 'token' in the Authorization header, anything I should note ?

[chenkie]

can you check whether your token is expired?

[helxsz]

i checked it, the token is still fine.

[escardin]

verify you're sending a token from the network tab of your browser and that the request looks correct.

[mragwa]

I have the same issue !
anyone have a solution ?

[escardin]

@mragwa can you verify that a token is being sent via the network tab of the browser inspector, and that one is set in local storage?

[mragwa]

token is already set in local storage but it doesn't appear on network browser.
all requests sent without "headerName"

[escardin]

what does the request look like? is it an options request?

[mragwa]

yes it's OPTIONS request. but the server is respond normally.

[mragwa]

I'm using it with IONIC2 RC4

[escardin]

You have a CORS problem, you need to fix that server side.

[mragwa]

No, CORS is working
because POST option is also not working thats my request header

[escardin]

Auth aside, regular http requests to the same host work? Does a regular http request work with auth if you add the token manually?

[mragwa]

I tried to use normal http post and add the Authorize on request header :
let authHeader = new Headers({ "Content-Type": "application/json", "Authorization": "Bearer "+localStorage.getItem('user_token') }); let options = new RequestOptions({headers: authHeader});

and in works like a charm

when i convert to authHttp it doesn't work.

[escardin]

so when you delete the authorization header from that snippet and swap http for authHttp it doesn't work.

what's your config look like?

[mragwa]

yes it works when i append it manually to http header.
but when using authHttp it doesn't work.

[escardin]

@mragwa show me your config for authhttp and the actual requests (you can anonymize urls and stuff). I don't want to guess anymore.

[faridrb]

Just came here to post an issue and then I saw this thread. I have exactly the same issue as @mragwa.

[mragwa]

That's my config :

// Get Auth
export function getAuthHttp(http) {
  return new AuthHttp(new AuthConfig({
    headerPrefix: 'Bearer',
    noJwtError: true,
    tokenName:'user_token',
    globalHeaders: [{'Accept': 'application/json'}],
    tokenGetter: (() => localStorage.getItem('user_token'))
  }), http);
}

and in providers area :

 providers: [
    {
      provide: AuthHttp,
      useFactory: getAuthHttp,
      deps: [Http]
    },
    LocationService, UserService, CloudAuth,UI
  ]

I don't know what do you mean by actual requests. its just an request to local php server and it works fine it response to my request normally by "user don't have permission".
also as i told you it works and grab authenticated data if i push headers manually to my request.
if you need to view the request headers just view my above image.

[chenkie]

@mragwa can you try adjusting your config a bit so that you also pass RequestOptions in your getAuthHttp function? Have a look at the config outlined here: https://github.com/auth0/angular2-jwt/issues/258

[faridrb]

@mragwa let me know how you fixed it

[JoelParke]

I too am seeing the same issue. But no solution yet...

I am using CORS and all seems correct. The req.headers that is coming through to the server side shows:

     2017-02-10T11:18:07-0700 <log> auth.service.js:27 (Middleware_Common_Object.<anonymous>) { host: 'localhost:9000',
       connection: 'keep-alive',
       authorization: 'Bearer undefined',
       origin: 'http://localhost:3000',
       'x-xsrf-token': 'mdGu6Yk4CjT/XH+7sieX2S2aomYSpIvQAS2HU=',
       'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36',
       'content-type': 'application/json',
       accept: 'application/json, text/plain, */*',
      referer: 'http://localhost:3000/',
      'accept-encoding': 'gzip, deflate, sdch, br',
     'accept-language': 'en-US,en;q=0.8' }

[escardin]

authorization: 'Bearer undefined', It looks to me like it's adding the header, but you have no valid token.

[JoelParke]

I looked more carefully and in the midst of my debugging I indeed lost the token. Once I fixed that, all worked correctly. And I returned things to the default setup. Thanks much for your insight. As I have always said: Stupid is really powerful. :-).

[belluccifranco]

The issue is that the library doesn't send token on "OPTIONS Preflight Request" but works properly on the others verbs (GET, POST, PUT, ...). So, when the server receives a request with verb "OPTIONS" without a token, rejects the petition, even with CORS activated and configured to allow any origin, header, and method.

[escardin]

The library has nothing to do with the options preflight, and as far as I know has no control over it. It's done entirely by the browser.

[anibalsanchez]

Hi,

This issue helped me a lot to diagnose the case of authorization of OPTIONS in a CORS setup.

The OPTIONS request is generated automatically by the browser, and it does not include the token header.

To solve the case, since this OPTIONS request does not belong to the user context, it can be whitelisted and managed in a separated server security context of the application.

[andreimargeloiu]

The solution is to enable CORS requests from the server. This is a solution in Spring Boot by adding the "CrossOrigin" annotation

@RestController
@RequestMapping(value = "/path")
@CrossOrigin(origins = "*")
public class Constroller {
   ......
}