Getting 401 Unauthorized with Vite environment variables – Keys visible in console but API calls fail

by

Summary

The issue at hand is a 401 Unauthorized error when making API requests to Unsplash and Giphy using environment variables loaded from a .env file in a Vite project. The API keys are correctly logged to the console, but the requests fail. This is confusing because the Pexels API works fine with the same environment variable setup.

Root Cause

The root cause of this issue is likely due to the following reasons:

  • Inconsistent API key formatting: Although the keys are logged correctly to the console, there might be invisible characters or encoding issues that affect how the keys are sent in the API requests.
  • API-specific requirements: Each API (Unsplash, Giphy, Pexels) might have different requirements for how the API keys are sent, such as header formatting or parameter encoding.

Why This Happens in Real Systems

This issue can occur in real systems due to:

  • Environment variable parsing: The way environment variables are parsed and loaded into the application can sometimes introduce invisible characters or encoding issues.
  • API documentation inconsistencies: API documentation might not always be clear or consistent, leading to misunderstandings about how to properly send API keys.
  • Library or framework quirks: The libraries or frameworks used to make API requests (e.g., Axios) might have quirks or bugs that affect how requests are sent.

Real-World Impact

The impact of this issue is:

  • Failed API requests: The application will not be able to retrieve data from the Unsplash and Giphy APIs, leading to broken functionality.
  • Security concerns: If the API keys are not sent correctly, it could potentially lead to security vulnerabilities.
  • Development delays: Debugging this issue can be time-consuming and might delay the development process.

Example or Code

import axios from "axios";

const UNSPLASH_KEY = import.meta.env.VITE_UNSPLASH_KEY;
const PEXELS_KEY = import.meta.env.VITE_PEXELS_KEY;
const GIPHY_KEY = import.meta.env.VITE_GIPHY_KEY;

console.log(GIPHY_KEY); // Prints the key correctly in console

export async function fetchGif(query, page = 1, per_page = 20) {
  const res = await axios.get(`https://api.giphy.com/v1/gifs/search`, {
    params: {
      api_key: GIPHY_KEY,
      q: query,
      limit: per_page,
      offset: (page - 1) * per_page,
    },
  });
  console.log(res.data.data);
}

How Senior Engineers Fix It

Senior engineers would fix this issue by:

  • Verifying API documentation: Double-checking the API documentation to ensure that the API keys are sent correctly.
  • Inspecting request headers: Using tools like the browser’s DevTools or a proxy to inspect the request headers and ensure that the API keys are sent as expected.
  • Encoding and decoding: Checking for any encoding or decoding issues that might affect how the API keys are sent.
  • Library or framework updates: Ensuring that the libraries or frameworks used are up-to-date and do not have any known issues that might affect API requests.

Why Juniors Miss It

Junior engineers might miss this issue because:

  • Lack of experience: They might not have encountered similar issues before and might not know where to start debugging.
  • Insufficient knowledge of API documentation: They might not be familiar with the API documentation and might not understand how to properly send API keys.
  • Overlooking details: They might overlook small details, such as invisible characters or encoding issues, that can affect how API requests are sent.