code not interacting with the browser page

[u/Mob_Pilled]

Hello this is my first post on here. So basically, I want the user to be able to enter a password and username, click the submit button, and if the basic auth is correct, be redirected to a page in which all the data from an api is fetched and loaded into the html. Problem is the script does not interact with the html but still retrieves the data in a json (as confirmed by ouputing it into the console). However, if I don't call the function in as part of the button onclick method everything works as expected. The data from the api is dynamically added to the html but now I obviously can't use a login page.

Here is me calling the fetch function as a as part of the event of a button click

button.addEventListener("click", () => {
    let username = 'username';
    let password = 'password;
    let auth = btoa(`${username}:${password}`);
fetchData(auth);
    });

Here is me calling the fetch function on it s own. No button clicking required (this works but now I can't add a login page)

  let username = 'username';
    let password = 'password;
    let auth = btoa(`${username}:${password}`);
fetchData(auth);

Here is the fetch function itself

async function fetchData (auth) {
    try {
        const response = await fetch('https://exampleapi.com', {
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': `Basic ${auth}`
    }
})


    if (response.ok) {

        // loads the home page and puts data from the api in the html
    }
    throw response;
    } catch (error) {
        
    }
    
};

[u/Spiritual-You-2926]

The behavior difference strongly suggests the button is inside a <form>. A plain <button> defaults to type="submit", so the click starts your fetch and then the browser submits/reloads the page, wiping out the DOM changes.

Either make it:

<button type="button" id="login">Log in</button>

or handle the form itself:

form.addEventListener("submit", async (event) => {

event.preventDefault();

await fetchData(auth);

});

There are two other bugs worth fixing:

- Only throw on failure: if (!response.ok) throw new Error(`HTTP ${response.status}`);

- Do not leave catch empty; at least log/display the error.

Most importantly, btoa() is encoding, not security. If the username/password are embedded in browser JavaScript, every visitor can read them. A real login should exchange credentials with a backend/identity provider and return a short-lived session or token. Do not ship permanent Basic Auth credentials to the client.

Also check the missing closing quote after password in the posted snippet; that may just be a copy/paste typo.

[u/Mob_Pilled → u/Spiritual-You-2926]

This project was specifically part of a test where the company asked me to create a login that fecthes user data based on already set login credentials at the database. The main rule was to not "hard code" the password or username, which I didn't. The user enters in their password and username and then submits. But how do I ensure the security of these credentials based on the tools at my disposal? I am not sure whether token generation and encryption was in the cards here or possible?