Issues with custom API Requests in Panel with csrf

Kirby 4 Question❓
,
1

Good evening,
for the past hour I tried to troubleshoot an on paper simple task to fetch data from an custom added api route inside a created panel section.

Inside the panel i added a method with following content:

const response = this $api.get(props.parent + "/poll-list");
console.log(response);

and the registered api route:

'api' => [
    'routes' => fn () => [
        [
            'pattern' => 'pages/(:any)/poll-list',
            'action' => function(string $id) {
                return 'Hello World';
            }
        ]
    ]
]

When I try to open a panel blueprint with the section my page redirects me directly to /api/pages/[id]/poll-list with following error:

{
  "status": "error",
  "message": "Unauthenticated",
  "code": 401,
  "exception": "Kirby\\Exception\\AuthException",
  "key": "error.auth",
  "file": "/kirby/config/api/authentication.php",
  "line": 14,
  "details": [],
  "route": "pages/([a-zA-Z0-9\\.\\-_%= \\+\\@\\(\\)]+)/poll-list"
}

This issue is very confusion to me because every other api request got the x-csrf-header, even the custom request as well but whatever I do, I cannot get promising results. I added other parameters to the config like allowInsecure, basicAuth and other options but nothing worked so far…

I hope someone can help me here with this problem… thank you so much in advance!

2

Shoudnt that be:

3

this does not make a difference unfortunately. I tried to wrap it in a try-catch and received following error before redirection:

TypeError: s is undefined
    request http://localhost:8000/media/panel/28e407d0459c1da3c39f64e021e2d318/js/index.min.js:7
    request http://localhost:8000/media/panel/28e407d0459c1da3c39f64e021e2d318/js/index.min.js:7
    get http://localhost:8000/media/panel/28e407d0459c1da3c39f64e021e2d318/js/index.min.js:7
    loadPollListData http://[::1]:5177/src/components/sections/PollList.vue?t=1719606507367:24
    setup http://[::1]:5177/src/components/sections/PollList.vue?t=1719606507367:32
    VueJS 5
4

ok so what is s? that doesnt make sense. Have made a typo maybe?

5

Can you share all of your vue component? feels like a things missing here.

6

What is the space doing there, should be this.$api.get().

Also, what does props.parent return?

7

ah ha … lol… i was looking thinking that doesnt feel right… but couldnt see it. Tired :eyes:

8

oops, it’s supposed to be this.$api, i modified the pasted code to remove some unrelated contents.

Props.parent returns “/pages/[url]”, e. g. “/pages/polls+germany”

9

ok so you dont need to prefix that with pages/ then since its part of props.parent.

10

does this work…

const response = this.$api.get(props.parent + "/poll-list");

11 
<template>
    <div>
    </div>
</template>

<script>
export default {
    props: {
        parent: String,
    },
    data() {
        return {
        };
    },
    mounted() {
        this.load().then(response => {
            console.log(response)
        })

        this.loadPollListData();
    },
    methods: {
        async loadPollListData() {
            try {
                const response = await this.$api.get(
                    this.parent + '/poll-list'
                );

                console.log(response)
            } catch(e) {
                console.log(e);
            }
        }
    },
}
</script>

import PollList from './components/sections/PollList.vue';

window.panel.plugin("vogeslu/whln-core", {
	sections: {
		'poll-list': PollList
	}
});
12

Ah yes, by the way: I tried using different pattern/paths like just ‘/api/test’ which did not worked as well unfortunately. I tried using different kirby versions, everything without different results. window.panel.api.csrf and this.$api.csrf and everything else exists with a valid token

13

I think it would make sense to start with a simple route pattern without an argument. and return an array from your route:

'routes' => [
			[
				'pattern' => 'poll-list',
				'action' => function() {
					return ['Hello World'];
				}
			]
		]
14

okay wow, this might be the stupidest error i’ve made in a while. Thank you. The problem layed in the response “Hello World”. I looked into the sourcecode of the kirby panel api request and noticed that it tried to look for “data” from the parsed JSON-Payload. Because I just used a text and not json there was the error “s is undefined” (from the compiled panel).

// panel/src/api/request.js

const { response } = await responder(request, await fetch(request));

let data = response.json;

// simplify the response
if (data.data && data.type === "model") {
	data = data.data;
}

return data;

So yeah, all in all. Everything else worked just fine, it was just the wrong kind of payload. :sweat_smile: sorry…

15

Dont apologise… we are just pleased you got it woking :frowning: