Kirby has been around since 2012. The community here is brilliant. Stick around.
Thatās nice to say. Sorry for my frustration but for real, every little thing has been a huge pain up until this point, and not being able to reach the API is definitely a deal breaker for me right nowā¦
Not giving up yet though, I just posted my question on stackoverflow, letās see if that yields more responses: Why can't I connect to my local Kirby API? - Stack Overflow
Did you try changing your request to:
const res = await fetch(`${apiUrl}/api/query`, {
headers: {
'Authorization': `Basic ${base64.encode(username + ":" + password)}`,
'Content-Type': 'application/json'
}
})
@shawninder In immortal words of teens, itās not me, itās you.
in this case, āyouā is probably your node code (is that actually node code? fetch and base64.encode suggest frontend JS)
Default starterkit, server started with php -S localhost:8000:
So, on a purely technical level, api responds to requests with Basic authentication.
Yes, same resultsā¦
Well well, what do you know! Using 0.0.0.0 instead of localhost worked! Thanks adamkiss!
Of course, now I get a different error, but I am at least reaching the API now, so things are moving along.
Apparently my basic auth is still wrong because itās saying The user "backend" cannot be found even though the user ābackendā clearly exists in the panel.
Any ideas? Or perhaps I should start a new thread for this different problem?
Personal note: As much as I love Kirby and āsellingā it to everybody I can, the API documentation remains too much erratic and incomplete. This is a major bummer because everything else is so easy to use and put in place. I personally think that the CMS would gain a lot from a more complete documentation on the topicā¦ 
Agreed, assuming this is a documentation issue. From my perspective it just looks like the API simply doesnāt work.
Yeah, I also hit a bit of a dead-end with the docs from time to time, but then I also consider the other factors involved (price, size team, completeness of the rest) and Kirby usually comes out very well, as compared to other vendors 
haha, me too 
Wish I was more of a front-end person so I could fix the docs.
Itās not. Documentation for the basic auth clearly states that the auth digest is a combination of email and password.
email and password
Youāre using username and password.
Update:
I tried all of the following without success:
- Connect to a live instance of kirby using jsfiddle => no success
- As I was using vhost, I tried to run my local instance simply on localhost => no success
- Copying the code by adamkiss above => no success
The damn CORS error remains :
1/5 The kirby config.php code:
return [
'debug' => true,
'api' => [
'basicAuth' => true,
'allowInsecure' => true,
]
];
2/5 The Kirby api.yml role
title: API
permissions:
access:
panel: true
site: false
settings: false
pages: false
files: false
user: false
users: false
3/5 The js code:
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import axios from 'axios';
/* import fetch from 'node-fetch';
import btoa from 'btoa'; */
//const session_url = 'https://test.kirby.com/api/query';
const uname = 'test@tjikko.studio';
const pass = 'ā¢ā¢ā¢ā¢ā¢ā¢ā¢ā¢ā¢ā¢ā¢';
const api = session_url;
const auth = {
username: uname,
password: pass
};
const response = await axios.get(api, {
query: "site.title",
}, { auth });
console.log(response.data);
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
Hello
</main>
</div>
)
}
4/5 The code to launch kirby on 0.0.0.0:8000
php -S 0.0.0.0:8000
5/5 The code to launch the js code on localhost:3000
npm run dev
Even injecting this in htaccess or in the php header does not work
Header set Access-Control-Allow-Origin "*"
Oh yes! Thank you so much for finding this!
I guess I was thrown off by these docs which donāt mention basic auth at all.
I suppose I should have found these docs instead.
In there they have a php code snippet that includes a variable named $email (we only see it used but we donāt see its declaration).
If thatās the only hint that an email should be used as opposed to the standard username, I confess myself underwhelmed by the docs. Is there perhaps another place where the documentation āclearly states that the auth digest is a combination of email and passwordā? Would you mind sharing a link?
That being said, things are finally working! I canāt thank you enough, hopefully, this is the last hurdle and I can start loving Kirby along with you all 
This might be a separate problem as my context hasnāt presented me with CORS errors yet (although Iām just getting started here)
Can you share your jsfiddle?
Does the axios {auth} setup a basic auth header, or is it something else? Thatās where Iād look
const response = await axios.get(api, {
query: "site.title",
}, { auth });
Quick peek at axios docs suggests that .get method has only two params, so perhaps the {query: '...'} object is taken as a config and the third param, {auth} object, is ignored.
No mention of basic auth anywhere on those pages. I understand what youāre saying, but this could definitely be better documented. Not a big deal though. Not being able to use localhost is a way bigger deal to my mind. Perhaps thatās also documented somewhere I havenāt found?