Basic authentication for website to secure site login and API access

Question

I'm looking at the security model of a website that's being developed. After researching the web i have found that there are several security models to secure websites i.e. Basic Auth, JWT ...

At the moment, SSL is not enabled as still in dev. Website has a login page and communicates via API's (including login and logout). On the login page, as a test, I have attempted to log in with false details, and then I have looked at the developer tools to identify the security mechanism and found the following screenshots. I think the site is using basic authentication, though I noted that the email / password is not encoded and is using a custom login form. Could someone confirm if it is basic authentication being utilised?

Developer Tools Images

[Request Header Image][2]

UPDATE: I discovered that once the user is authenticated by email/password, I should have posted the screenshots as this is where keys are returned. In the below screenshot a bidder token and bidder secret is sent back to client. I think these are generated through crypto on backend. So I don't think its JWT, but is this a suitable way in creating keys and not sending in header but in response body?

Network tab after user logged in

Login Form Code :

 {

        /* prepare ui */
        progress.classList.remove('hide');
        login_btn.innerText = 'Logging In';
        login_btn.setAttribute('disabled', true);

        /* make http request */
        var http = new XMLHttpRequest();
        var url = SERVER + '/api/bidder/login';
        var body = {
            email: email.value,
            password: password.value
        };

        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/JSON');

        http.onreadystatechange = function () { //Call a function when the state changes.
            if (http.readyState == 4 && http.status == 200) {
                var res = JSON.parse(http.responseText);

                if (res.status) {

                    localStorage.setItem("bidData", JSON.stringify(res.data));
                    window.location.href = window.location.href.replace('login.html','');

                } else {
                    Toast.show('Danger', res.message);
                }

                /* reset ui */
                progress.classList.add('hide');
                login_btn.innerText = 'Log In';
                login_btn.removeAttribute('disabled');

            }
        }
        http.send(JSON.stringify(body));

    }

Answer 1

When you use basic access authentication, credentials wouldn't be loaded in a request payload. They reside in an authorization header like "Authorization: Basic ~some credential here~".

So if you neither see this authorization header in your request nor a popup like below on the website, basic access authentication is not enabled.