Authenticate API in JavaScript for tableau Web Data Connector

Hi all! I am building out a WDC for tableau to connect with a third party API (the API is through a company called Simpli.fi). This API does not require an OAuth, but it does need 2 headers including the “X-User-Key” and the “X-App-Key”.

When I call this api through a software called Postman with my two keys (the user key and the app key), I receive all of the data I need in JSON format. However, I am trying to build out a flow in my JavaScript file and am receiving nothing.

I want this WDC to require a sort of “login” – in the user interface, the user would plug in their “X-User-Key” and “X-App-Key” in an HTML input box. The JavaScript file would then take these inputs into the loginFlow() function and add them to the “headers”. I would really appreciate any help that I can get at this point - a fresh set of eyes would be much appreciated.

snippet of HTML containing the input fields:

<div class="text-input-fields">
        <div class="text-box" style="padding: 25px; align-self: center; vertical-align: middle; margin: 30px">
            <form action="./simplifiapi.js">
                X-User-Key: <input type="text" name="User API Token"><br>
                <br />
                X-APP-Key: <input type="text" name="API Token"><br>
                <br />
                <div class="container container-table">
                <div class="row vertical-center-row">
                    <div class="text-center col-md-4 col-md-offset-4">
                        <button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;" onclick="loginFlow(x_user_key, x_app_key)">Get Campaign Data</button>
                    </div>
                </div>
                </div>
            </form>
        </div>
    </div>

JavaScript function to put the HTML items into:

'use strict';

function loginFlow() {
    var x_user_key = document.write(document.getElementsByName("User API Token").textContent);
    var x_app_key = document.write(document.getElementsByName("API Token").textContent);
    const baseUrl = 'https://app.simpli.fi/api';
    const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
    
    var loginBtn = document.getElementById("submitButton");
    var settings = {
        "url": proxyUrl + baseUrl,
        "method": "GET",
        "headers": {
            "x-app-key": x_app_key,
            "x-user-key": x_user_key,
            "Accept": "*/*",
            "Cache-Control": "no-cache",
            "cache-control": "no-cache",
            "cookie": true
        }
    }
    // login error handle
    if (response.status != 200) {
        alert('invalid login credentials');
    } else {
        console.log('you have access yay');
        buildURL(pageCount, page_resposne);
    }
    buildURL(baseUrl,pageCount, page_response);
}