my code

Jonathan Grenstein

pass .htaccess login
by Jonathan Grenstein

What is does is circumvent the browser address bar by making a xmlHTTPRequest call to a page protected by Basic Auth.

The xmlHTTPRequest will pass the username and password of the user to this page, and if authenticated successfully the page will respond with a HTTP status of "200".
If the authentication fails then the response will be "401".
The xmlHTTPRequest reads the HTTP status responses and keeps asking for a username and password until it gets a "200" response from the page.

Once authenticated, the browser will cache the username and password. (This is done automatically by browsers when implementing Basic Auth) This allows you to redirect to the actual page the user wants to visit.

This works no matter who you implement Basic Auth on the server, via php, via .htaccess etc.

The only problem I have seen is that Firefox will open the default Prompt for Authentication if the authentication by xmlHTTPRequest fails. This does not happen with IE. This may not be a firefox bug, just their implementation.

The work around for this would be to implement HTTP Authentication with PHP and response with a HTTP Response status of "403" or something similar instead of "401" which triggers the login prompt/box in firefox.

Snippet options

Download: Download snippet as pass-htaccess-login.html.
Copy snippet: For this you need a free my code account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

// url of Basic Authentication page
var auth_url = 'protected/index.php';
// url user wants to access
var private_url = 'protected/files/';
function getPrivatePage() {
	var user = document.getElementById('user').value;
	var pw = document.getElementById('pw').value;
	// create an execute xmlHTTPRequest
	var xmlhttp = false;
	if (window.XMLHttpRequest) {
		xmlhttp = (new XMLHttpRequest());
    } else if (window.ActiveXObject) {
		// find latest XMLHTTP implementation on IE
		var versions = [
		var n = versions.length;
		for (var i = 0; i <  n; i++) {
			try {
				if (xhr = (new ActiveXObject(versions[i]))) {
			} catch (e) { /* try next */ }
	if (!xmlhttp) {
		location.href = auth_url;
		return false;
	xmlhttp.onreadystatechange = function() { handleGetPrivatePageResponse(xmlhttp); };'GET', auth_url, true, user, pw);
function handleGetPrivatePageResponse(xmlhttp) {
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status == 200) {
			alert('Log in successful.');
			location.href = private_url;
		} else if (xmlhttp.status == 401) {
			alert('The Username and password are incorrect. Please try again.');
		} else {
			alert('An unknown Error Occurred. HTTP Status: '+xmlhttp.status);
<legend>Enter A Username and Password to Access the Private Area</legend>
<input type="text" name="user" id="user" />
<input type="text" name="pw" id="pw" />
<input type="button" onclick="getPrivatePage();" value="Enter" />

Create a free my code account now.

my code is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.