HTTP Basic Auth with Base64-encoded credentials
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).
function createBasicAuthHeader(username, password) {
// Combine credentials with colon separator
const credentials = `${username}:${password}`;
// Encode to Base64
const encoded = btoa(credentials);
// Return the full header value
return `Basic ${encoded}`;
}
// Example
createBasicAuthHeader('alice', 'secret123');
// Returns: "Basic YWxpY2U6c2VjcmV0MTIz"
btoa() encodes a string to Base64 in the browser.
The result is NOT encrypted — anyone can decode it with atob().
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);
}// 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');