I want to use basic auth to authenticate users. The problem is when a user needs authentication, the browser loads an ugly form where the user should enter their credentials (such is the default on all browsers when they get a basic auth request).
I would like to know how I can bypass this ugly browser default form and instead serve an alternative good looking custom made form.
What you're seeing is the HTTP authentication page put out by your web server. Browsers just pass it as is, and it's not customizable. This is why no one really uses them for much other than locking a site down during development or hiding a particular part of a site.
If you want to do something that fits the look and feel of your site, you're going to need to design a page or include your login somewhere on your existing pages.