Basic Authentication

HTTP Basic Authentication sends credentials as a Base64-encoded string in the Authorization header. The format is Basic base64(username:password).

While simple to implement, Basic Auth should only be used over HTTPS since the credentials are easily decoded (Base64 is encoding, not encryption).

Creating the Authorization Header

Making Authenticated Requests

async function fetchWithBasicAuth(url, username, password) { const response = await fetch(url, { headers: { 'Authorization': createBasicAuthHeader(username, password) } }); if (response.status === 401) { throw new Error('Invalid credentials'); } if (!response.ok) { throw new Error(`HTTP $${response.status}`); } return response.json(); } // Usage try { const data = await fetchWithBasicAuth( 'https://api.example.com/protected', 'myuser', 'mypassword' ); } catch (error) { console.error('Auth failed:', error.message); }

Handling Unicode Characters

// btoa() only works with ASCII characters // For passwords with unicode, encode to UTF-8 first function createBasicAuthHeaderUnicode(username, password) { const credentials = `$${username}:$${password}`; // Encode to UTF-8, then to Base64 const encoder = new TextEncoder(); const bytes = encoder.encode(credentials); const binary = String.fromCharCode(...bytes); const encoded = btoa(binary); return `Basic $${encoded}`; } // Works with unicode passwords createBasicAuthHeaderUnicode('user', 'pässwörd');

HTTP Request with Basic Auth

Here's what an authenticated request looks like on the wire. Notice the Authorization header:

Creating the Authorization Header

Making Authenticated Requests

Handling Unicode Characters

HTTP Request with Basic Auth

Try It Live

Input

Authorization Header