Do I need API authentication for my Vue + Kirby Headless website?

The CMS Questions
1

Hello everyone,

I’m currently working on simple portfolio website using Vue for the front-end and Kirby CMS with the Kirby Headless plugin.
The site is set up with a two-folder structure: the Vue app is located in the /app folder, while all Kirby-related files are in the /cms folder.

I’m struggling to understand if I need any kind of authentication (bearer token from Kirby Headless or Kirby’s default KQL basic authentication) for my API.
What are the use cases to enable authentication?

It is risky or considered a bad practice to expose my API and my data ? I feel like it’s not a problem here as the site’s data will be displayed on the website anyway.

Thank you for your help !

2

I think it’s only relevant if you have custom endpoints that do more critical stuff. By default, KQL only exposes non-destructive methods.

You might have data that you do not want exposed, though, like user data or so, not sure that the API exposes here by default.

1 Like
3

It makes sense ! Thank for your quick reply and the clarification.

As I simply fetch publicly available content such as project content, images,…
and only non destructive methods are exposed by default I don’t think authentication is needed for my project.

I might be a bit paranoid but the KQL documentation says
You can switch off authentication in your config at your own risk:

Just to clarify : in my config file i can skip “token” for headless and disable auth for KQL, like this :

  'kql' => [
    'auth' => false
  ]

Just to follow up : what would be practical use cases where authentication would be necessary for the API?

4

It means that you are responsible to make sure that you don’t accidentally expose things you don’t want to expose.

5

Thanks again for your reply ! It totally understand that disabling authentication is at my own risk.
It’s my first time using Kirby as the backend end for a Vue app, that’s probably why my questions probably sound very basic !

From what I understand, the risk of disabling authentications comes from revealing data I don’t want to be public.
After further research I’ve realised that critical data such as users name and email can be accessed through a simple KQL POST requests.Definitely not ideal—disabling authentication seems way too risky!

So, I’ll stick to authentication and enable it using Kirby Headless:

'headless' => [
        'token' => 'xxxxxxx',
    ],

Then, I’ll include an “Authorization” header in my POST requests:

const response = await fetch("https://mysite.com/api/kql", {
  method: "POST",
  body: {
    query: "site",
    select: {
      title: true,
    },
  },
  headers: {
    Authorization: `Bearer ${process.env.KIRBY_API_TOKEN}`,
  },
});

However, I was wondering— what technique would you use to hide the authorization header when making my POST requests to keep it from being exposed in the frontend?