Add authorization header

I created an api to fetch data from a custom table, only authenticated users can access the api. I used it in a fetch in an embedded form, when I execute the app a popup appears to sign in then the fetch result is displayed.
In order to remove the popup, I added an authorization headers as shown below

fetch("/api", {
        headers: {
          'Authorization': 'Basic ' + btoa('demo:demo')
        }
      })
...

I don’t think this is a good practice though, is there a way I can pass the authenticated user token dynamically ?