DevTools: Add Authorization Header

TL;DR

This guide shows you how to add an Authorization header to your requests in Chrome DevTools (or similar tools in other browsers) for testing and debugging purposes. This is useful when interacting with APIs that require authentication.

How to Add an Authorization Header

1. Open Developer Tools: Right-click on the webpage you’re using and select ‘Inspect’, or press F12 (or Cmd+Option+I on Mac).
2. Navigate to the Network Tab: Click on the ‘Network’ tab. This will show all network requests made by the page.
3. Find Your Request: Locate the specific request you want to modify in the list of network requests. You might need to refresh the page after opening DevTools if the request hasn’t been made yet.
4. Edit Headers: Right-click on the request and select ‘Edit and resend’. A window will appear allowing you to edit the request details.
5. Add Authorization Header: In the ‘Headers’ section of the editor, find the ‘Request headers’ area. Add a new header with the following:
   • Name: Authorization
   • Value: This depends on your API’s authentication scheme (see below).
6. Resend Request: Click ‘Send’ to resend the request with the added Authorization header.

Common Authentication Schemes

The value of the Authorization header varies depending on the authentication method used by the API.

• Basic Authentication:

  Authorization: Basic <base64 encoded username:password>

  Replace username:password with your credentials, then base64 encode them. You can use online tools or command-line utilities for this.

• Bearer Token (OAuth 2.0):

  Authorization: Bearer <your_token>

  Replace your_token with the actual OAuth token you obtained from the authentication server.

• API Key:

  Authorization: ApiKey <your_api_key>

  Replace your_api_key with your API key. Some APIs also use a header like X-API-Key.

Verifying the Header

1. Check Response: After resending the request, check the ‘Response’ tab to see if the API returns a successful response. A 401 Unauthorized error usually indicates an incorrect or missing Authorization header.
2. Inspect Request Headers (again): Double-check in the Network tab that the Authorization header was actually sent with the request. Sometimes there can be issues with caching or browser settings.

Troubleshooting

• Caching: Clear your browser cache and try again.
• Incorrect Header Value: Ensure you’re using the correct authentication scheme and providing valid credentials/tokens.
• API Documentation: Always refer to the API documentation for specific header requirements.