How to send a token with an AJAX request from jQuery

Question

I use express-jwt and create my token via jQuery and save it in my localStorage with:

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData,
  error : function(err) {
    console.log('Error!', err)
  },
  success: function(data) {
    console.log('Success!')
    localStorage.setItem('token', data.id_token);
  }
});

I have a protected route in my backend like:

app.get('/upload',jwt({secret: config.secret}), function(req, res) {
  res.sendFile(path.join(__dirname + '/upload.html'));
});

How can I send the token from localStorage with the request header?

score 83 · Accepted Answer · answered Mar 08 '16 at 14:37

83

You can set the headers in a $.ajax request:

$.ajax({
  url: "http://localhost:8080/login",
  type: 'GET',
  // Fetch the stored token from localStorage and set in the header
  headers: {"Authorization": localStorage.getItem('token')}
});

answered Mar 08 '16 at 14:37

gnerkus

11,357
6
47
71

why you send token into headers? why not into data ?? – famas23 Nov 05 '17 at 22:05
2

@ahmedbhs I believe his trying to protect token somehow. – Marcelo Agimóvel Dec 16 '17 at 17:22
39

for a JWT header, this worked for me `headers: { "Authorization": 'Bearer ' + token }` – user326608 Jan 22 '18 at 02:46
2

You should be very careful when exposing your JWT token, in Javascript like a variable. Definitely don't expose it in frontend https://developer.okta.com/blog/2018/06/20/what-happens-if-your-jwt-is-stolen – TomTom Jan 10 '20 at 05:05

score 10 · Answer 2 · answered Mar 11 '20 at 12:02

10

If you are using JWT authentication then this is how you add it to the headers in .ajax() method:

headers: {
    Authorization: 'Bearer '+token
}

,

answered Mar 11 '20 at 12:02

yogihosting

5,494
8
47
80

ilkerkaran · Answer 3 · 2020-01-07T14:45:17.127

5

I use the approach below to cover JWT authentication with the result status types

$.ajax({
  url: "http://localhost:8080/login",
  type: "POST",
  headers: { Authorization: $`Bearer ${localStorage.getItem("token")}` },
  data: formData,
  error: function(err) {
    switch (err.status) {
      case "400":
        // bad request
        break;
      case "401":
        // unauthorized
        break;
      case "403":
        // forbidden
        break;
      default:
        //Something bad happened
        break;
    }
  },
  success: function(data) {
    console.log("Success!");
  }
});

edited Jan 07 '20 at 14:45

answered Jan 07 '20 at 14:18

ilkerkaran

4,214
3
27
42

2

but the question was how to send the saved token with the request. not how to save the token after the request. – larz Jan 07 '20 at 14:38

How to send a token with an AJAX request from jQuery

3 Answers3

Linked