How to add basic authentication header to form - node.js

Question

I'm using node server built on https://github.com/passport/express-4.x-local-example(just changed app.get('/login'... to app.post('/login' … in server.js.
In pug, I created a page with a login form based on https://www.w3schools.com/howto/howto_css_login_form.asp and when I submit form (input names changed to username and password, method="post", action "/login") everything works fine. Since I don't want to send passwords in a body without authentification, I need to add basic auth to my post request.
How do I do that?
I tried adding event listener submit to my form and stopping default action with event.preventDefault();. I then created new XMLHttpRequest(), set request header to basic auth and sent the XML request to server. When using console I can verify the request came in, did the job, but the reply from server (which should redirect) returned to my XML request, not actually redirecting the page.
When I try sending the same POST request via POSTMAN, the response is a redirect page.
If I remove event listener the form gets submitted and everything works fine (but without adding auth headers).
doctype html
head
meta(charset='UTF-8')
title Login
link(rel='stylesheet', href='stylesheets/main.css')
link(rel='icon', type="image/png", href='favicon.png')
body
form(action='/login', id='form1' method='post')
.imgcontainer
img.avatar(src='images/img_avatar2.png', alt='Avatar')
.container
label(for='username')
b Username
input(type='text', placeholder='Enter Username', name='username', autofocus, required, id='uname')
label(for='password')
b Password
input(type='password', placeholder='Enter Password', name='password', required, id='pword')
button(type='submit') Login
script.
document.getElementById("form1").addEventListener("submit", submitFunction);
function submitFunction() {
event.preventDefault();
var usr=document.getElementById('uname').value;
var pwd=document.getElementById('pword').value;
var obj = {'username' : usr, 'password' : pwd};
var request = new XMLHttpRequest();
request.open("POST", "/login", false);
request.setRequestHeader('Authorization', 'Basic Y2xpZW50SUQ6c2VjcmV0S2V5');
request.setRequestHeader('Content-Type', 'application/json');
request.send(JSON.stringify(obj));
}

Answer 1

Authentication is not needed and will not make your request secure as without encryption the HTTP request is still plain text.
Encryption will make your request secure, your page and API should both use HTTPS, and when using encryption you do not need the additional authentication.

Answer 2

I found a workaround to include headers. First of all, I was using the wrong passport strategy. I used local and should have used ('passport-http').BasicStrategy. Here is an example
https://github.com/passport/express-3.x-http-basic-example
I added a placeholder for response in my XMLHttpRequest so the script part of my pug looks now like
script.
document.getElementById("form1").addEventListener("submit", submitFunction);
function submitFunction() {
event.preventDefault();
var username = document.getElementById('uname').value;
var password = document.getElementById('pword').value;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4) {
// Typical action to be performed when the document is ready:
// accept and redirect code in here based on the answer from the server
}
};
request.open("POST", "/login", false);
request.setRequestHeader('Authorization', "Basic " + btoa(username + ":" + password));
request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
request.send();
}
of course, as Absor said ih his answer (thank you) it's still just plain text so maybe it will not add security to my request.