how to change design /style of the WWW-Authenticate popup box to match my website theme?

Question

Halo there,

I need to change the look /design of the WWW-Authenticate popup box to match my website theme, I don't want it to show the default popup box for authentication when users need to login to secured pages. Below is the PHP script I used to create the WWW-Authenticate popup.

<?php

$_user_ = 'test';
$_password_ = 'test';

session_start();

$url_action = (empty($_REQUEST['action'])) ? 'logIn' : $_REQUEST['action'];
$auth_realm = (isset($auth_realm)) ? $auth_realm : '';

if (isset($url_action)) {
if (is_callable($url_action)) {
    call_user_func($url_action);
} else {
    echo 'Function does not exist, request terminated';
};
};

function logIn() {
global $auth_realm;

if (!isset($_SESSION['username'])) {
    if (!isset($_SESSION['login'])) {
        $_SESSION['login'] = TRUE;
       header('WWW-Authenticate: Basic realm="'.$auth_realm.'"');
       header('HTTP/1.0 401 Unauthorized');
        echo 'You must enter a valid login and password';
        echo '<p><a href="?action=logIn">Try again</a></p>';
        exit;
    } else {
        $user = isset($_SERVER['PHP_AUTH_USER']) ? $_SERVER['PHP_AUTH_USER'] : '';
        $password = isset($_SERVER['PHP_AUTH_PW']) ? $_SERVER['PHP_AUTH_PW'] : '';
        $result = authenticate($user, $password);
        if ($result == 0) {
            $_SESSION['username'] = $user;
        } else {
            session_unset($_SESSION['login']);
            errMes($result);
            echo '<p><a href="?action=logIn">Try again</a></p>';
            exit;
        };
    };
 };
}

function authenticate($user, $password) {
global $_user_;
global $_password_;

if (($user == $_user_)&&($password == $_password_)) { return 0; }
else { return 1; };
}

function errMes($errno) {
   switch ($errno) {
    case 0:
        break;
    case 1:
        echo 'The username or password you entered is incorrect';
        break;
    default:
        echo 'Unknown error';
};
}

function logOut() {

session_start();
session_destroy();
header("Location: index.html");

}

?>

And the following is my code that I use in all pages I need to secure or protect.

<?php
require_once 'auth.php';
echo "You've logged in as {$_SESSION['username']}<br>";
echo '<p><a href="?action=logOut">LogOut</a></p>'
?>

Please help...And recall that the code works fine I only want to change the look. Thanx in advanced :)

Answer 1

Two options:

Javascript

Use javascript to construct a url in the form of http://username:password@domain.com upon form submission, set document.location to the constructed url and the browser will redirect whilst automatically authenticating.

Server Side

Allow the form to submit to itself and use server side code to perform the same redirect - I recommend using a 307 redirect.

In php:

redirect("http://username:password@domain.com", 307);

Downsides

Both versions will still result in the web browser showing the ugly authentication box if the initial username and password submission is incorrect.

If you need to avoid this scenario then you will need to implement your own server side authentication scheme.

More detail

If you can tell me which option you believe you will favour, I can show a little more example code.

Security Implications

There are security implications to using HTTP basic auth. If you do not use SSL then passwords will be sent in cleartext. Using the above methods will send the password in cleartext as part of the URL. There are other security implications too:

https://security.stackexchange.com/questions/988/is-basic-auth-secure-if-done-over-https

Because of these I would always recommend against using http basic auth. Many users may be using the same password for sensitive accounts so it's well worth investing a little time in even a basic authentication system.

Answer 2

You can't change the style of the pop-up box. You will have to create your own login form on your site.