web applications – How to authenticate an API in a headless web-app?

For learning purposes, I’m trying to build an Expense Tracker web-app from scratch. I’m in the process of designing it before coding it. I decided to attempt to make it a Headless Web-app: The main server will only have an API and the client will query it to render content. This means I can use the same API for mobile apps and websites.

Now I’ve come across an interesting dilemma:

  • How do I authenticate this API? I shouldn’t ask for username and password every time I request something.
  • Do I use API keys? If so, how often do I renew them? Are they temporary or permanent?
  • If I want to make a public API, how do I distinguish the regular user from someone using the API?

Also please let me know if my idea is flawed, I’m open to suggestions and changes.

Thank you!