jQuery Calling APIs

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • jQuery 3.1.0
Show requirements

A common need for any client-side application is to access resources from a data API. Some of these data resources will likely need to be protected such that only the user who is authenticated in the client-side app can access them. This can be achieved by protecting your API's endpoints with your Auth0 secret key and sending the user's JWT as an Authorization header when calling the API. For more detail on how to secure your API, see the server API documentation.

Sending Authenticated HTTP Requests

In order to make an authenticated request, you need to use $.ajaxSetup() in order to automatically add the Authorization header to every request.

// app.js

  'beforeSend': function(xhr) {
    if (localStorage.getItem('id_token')) {
        'Bearer ' + localStorage.getItem('id_token'));

Your requests will have the Authorization header added automatically:

Authorization: Bearer eyJ0eXAiOiJKV1Qi...

Here, before every AJAX request, we are fetching the token from localStorage stored in the id_token key. You can choose a different key name if you like.

Use Auth0 for FREECreate free Account