API endpoint authentication

Hi everyone,

I created an api using node.js application, in http://localhost:3000/status, and i set username and password, such that if an api with username and password can only get the response.
I tested the same with Postman, im getting hit here and able to get the data.

But i tried the same with tiddly, it will work without username and password, meaning if i remove the username and password mechanism from node.js api, then i will get the data from tiddly’s api call. But with username and password im not getting anything.

my node.js code,

const express = require('express');
const cors = require('cors');
const basicAuth = require('express-basic-auth');

const app = express();
app.use(express.json());

// Configure CORS to allow requests from 'https://tiddlywiki.com'
const corsOptions = {
    origin: '*', // Allow requests only from this origin
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors(corsOptions));

// Define your username and password for basic authentication
const users = {
    'username': 'password'
};

// Basic Authentication Middleware
app.use(basicAuth({
    users: users,
    challenge: true // Show a login dialog when authentication fails
}));

// Middleware to log requests
app.use("/status", (req, res, next) => {
    console.log(`[${new Date().toISOString()}] Access to /status endpoint from: ${req.ip}`);
    next();
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log("Server Listening on PORT:", PORT);
});

app.get("/status", (request, response) => {
    const status = {
        "name": "def",
        "items": {
            "case1": "Load case",
            "case2": "Simulation",
            "case3": "Testing",
            "case4": "Debugging",
            "case5": "Deleting"
        }
    };
    response.send(status);
});

my tiddly code,

\procedure completion()
\procedure errorHandler()

<$list filter="[<status>match[200]]" emptyMessage=<<errorHandler>>>
<$action-setfield $tiddler="data" text=<<data>>/>
</$list>
\end completion

\procedure fetchDataAPI()
	<$action-sendmessage
		$message="tm-http-request"
        url="http://localhost:3000/status"
		method="GET"
        basic-auth-username="username"
        basic-auth-password="password"
		oncompletion=<<completion>>
		onprogress=<<progress>>
     
	/>
<$let data={{{ [[data]get[text]] }}}>
<<tiddlerize>>
</$let>
\end

<$button actions=<<fetchDataAPI>>>Fetch data </$button>**strong text**

I am getting status 401 xhr http.js:304 293 B 3 ms , 401 error . But why?

What is wrong here? Can anyone guide me?

Thanks,

@pmario , @linonetwo and others, any idea about this.
I’m stuck here.

Which version of TiddlyWiki are you using?

What are the headers set for the outgoing request from TiddlyWiki (check in the browser developer tools)

I’m using Tiddly version 5.3

I can access the same using normal HTML and js code , as well as through postman

Please post the complete TiddlyWiki version number that you are using. Basic auth support was only added in v5.3.4

What are the headers set for the outgoing request as reported by the browser developer tools?

I was using a version less than 5.3.4, now I updated the wiki and the same code worked. Thanks for the hint.

Also, an additional question, can we also use API token for authorization?
Because, I need to fetch the data from a private cloud.