• Introduction
• Setup
• Overview
• 1. Install the CLI
• 2. Create the App
• 3. Run the App
• 4. Setup the API
• Layout
• Overview
• 1. Install Bootstrap
• 2. Add Custom Styles
• 3. Add the Header
• Routing
• Overview
• 1. Convert Title to a Link
• 2. Add Feed to Routes
• Data Structure
• Overview
• 1. Add Mock Data to Feed
• 2. Create Tweet Component
• 3. Add Mock User Data
• Fetching Data
• Overview
• 1. Set API Location
• 2. Create Tweet Model
• Convention over Configuration
• 3. Connect Feed Component
• 4. Display Loading Message
• 5. Fetch User for Tweet
• Authentication
• Overview
• 1. Add Profile to Layout
• 2. Add Auth0 Config
• 3. Add Login Page
• 4. Redirect to Login
• 5. Add Callback Route
• 6. Add Logout Page
• 7. Fetch Current User
• 8. Save User to Context
• Server
• Overview
• 1. Clone the API Server
• 2. Parse the Collection
• 3. Parse the Model
• 4. Add Unauthorized Experience
• 5. Add Authorization Header
• Pagination
• Overview
• 1. Add Pagination Metadata
• 2. Paginate the Tweets
• 3. Add Pagination Links
• 4. Improve User Experience
• Infinite Scrolling
• Overview
• 1. Create Load More Button
• 2. Create Infinite Scrolling List
• 3. Convert the Feed
• Cleanup
• Overview
• 1. Remove Unnecessary Code
• Dialogs
• Overview
• 1. Add Create Button
• 2. Mounting Dialogs
• 3. Add Create Dialog
• 4. Simplify the Dialog
• 5. Generate Dialog via Hook
• 6. Add Edit Dialog
• 7. Add Delete Dialog
• Authorization
• Overview
• 1. Hide Edit Link
• 2. Hide Delete Link
• 3. Alternative Approach
• Optimistic Updates
• Overview
• 1. Freeze Pagination Data
• 2. Display New Tweets
• 3. Display Optimistic Tweets
• 4. Add Optimistic Values
• 5. Show Optimistic Visual Cues
• 6. Hide Deleted Tweets
• Normalization
• Overview
• 1. Normalize Tweet Response
• Filtering
• Overview
• 1. Add Filter
• 2. Display User Tweets
• WebSockets
• Overview
• 1. Add WebSocket Support
• 2. Send Client ID to API
• Publishing
• Overview
• 1. Create Production Build
• 2. Deploy to Production
• 3. Create Production Config
• 2. Redeploy to Production
• Next Steps
• Overview
• Misc
• Installing Node
• Completed Project

Step 5: Add Authorization Header

In this step we'll add an Authorization header to all API calls.

You can view the finished code for this step by checking out the server.5 branch of the completed project.

Add the Authorization Header

Now that we can clearly see when the user is unauthorized, let's add the user's token to the Authorization header to authenticate them and learn who they are.

Remember the auth utility in utils/auth.js that we used to save the user's token to localStorage? We're going to be using that once again to retrieve the user's token and add it to the header of all API requests.

Open config/connections.js and find the commented out method below the apiRoot called headers. It looks like this:

// config/connections.js
export default {

  default: {

    apiRoot: 'http://localhost:1337',

    // headers: function() {
    //   return {};
    // },

    ...

  }

};

Import the auth module into the config and set the Authorization like this:

// config/connections.js
import auth from '../src/utils/auth';

export default {

  default: {

    apiRoot: 'http://localhost:1337',

    headers: function() {
      return {
        Authorization: `Bearer ${auth.getToken()}`
      };
    },

    ...
  }

};

With that change in place, refresh the browser and application should display correctly again.

Login as Different Characters

At this point, not only will the application display correctly again, but because we're now backed by a real API, you'll also be able to login as different characters and have the profile reflect that. Try it out!

As a reminder, you can login as any of the characters below:

• ayla
• crono
• frog
• lucca
• magus
• marle
• robo

The email format is {name}@example.com, and the password for all of them is password. So if you wanted to login as marle, you would enter marle@example.com for the email and password for the password.

Visual Check-in

If everything went well, your application should look like this.

Code Changes

Below is a list of files modified during this step.

config/connections.js

import auth from '../src/utils/auth';

export default {

  default: {

    apiRoot: 'http://localhost:1337',

    headers: function() {
      return {
        Authorization: `Bearer ${auth.getToken()}`
      };
    },

    collections: {
      properties: {
        parse: function(response) {
          return response.data;
        }
      }
    }

  }
};

Next Steps

In the next section we'll add support for pagination.