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

Stack Overflow Answer (Answer Part):

---

Answer:

After spending 2 hours debugging this issue, I finally found the problem: semicolons at the end of my .env file values.

The Issue:

I was unconsciously adding semicolons to my .env file (out of JavaScript coding habit):

env

# WRONG - What I had VITE_GIPHY_KEY=abc123xyz; VITE_UNSPLASH_KEY=def456xyz; VITE_PEXELS_KEY=ghi789xyz

The semicolons were being included as part of the actual key values, causing the API authentication to fail!

Why One API Worked:

By pure chance, my Pexels key line didn't have a semicolon, which is why it worked while the others failed. This made debugging incredibly confusing.

The Fix:

Simply remove all semicolons (and any other unnecessary characters) from your .env file:

env

# CORRECT VITE_GIPHY_KEY=abc123xyz VITE_UNSPLASH_KEY=def456xyz VITE_PEXELS_KEY=ghi789xyz

How to Debug This:

Use JSON.stringify() to see the exact value including hidden characters:

javascript

console.log('Raw key:', GIPHY_KEY); console.log('JSON:', JSON.stringify(GIPHY_KEY)); console.log('Length:', GIPHY_KEY?.length); // Output would show: // Raw key: abc123xyz; // JSON: "abc123xyz;" ← Notice the semicolon! // Length: 10 ← Should be 9

Common .env File Mistakes:

.env files are plain text configuration files, not JavaScript. Avoid these common mistakes:

❌ Wrong CorrectIssueKEY=value;KEY=valueSemicolon included in valueKEY="value"KEY=valueQuotes included in valueKEY = valueKEY=valueSpaces around =KEY=valueKEY=valueTrailing whitespaceKEY=value # commentKEY=valueInline comments not supported

Proper .env Syntax:

env

# Comments on their own line are fine VITE_API_KEY=your_key_here VITE_ANOTHER_KEY=another_value # No semicolons # No quotes (unless the quote is part of the actual value) # No spaces around the equals sign # No trailing whitespace

Prevention Tips:

Always validate your environment variables:

javascript

const key = import.meta.env.VITE_GIPHY_KEY; if (!key || key.length !== EXPECTED_LENGTH) { console.error('Invalid API key format!'); } Use a debug function:

javascript

function debugEnvVar(name, value) { console.log(`${name}:`, { value: value, json: JSON.stringify(value), length: value?.length, hasWhitespace: value !== value?.trim(), }); } debugEnvVar('GIPHY_KEY', GIPHY_KEY); Add .trim() as a safety measure:

javascript

const GIPHY_KEY = import.meta.env.VITE_GIPHY_KEY?.trim();

Hope this saves someone else from the same 2-hour debugging session!