You can Store your bearer token in the .env.local file

this doesn't make sense, the OP doesn't want to share the token with his users, so a .env wouldn't fix the issue...?

if you can give more in depth on how to use this api/download the file, that would help us with assisting you on best practice

I am listing files from a supabase bucket and with a supabase API downloading the one chosen. Getting the files from server component is a no brainier but I had to put the button for the download itself in a client component because of the onClick event.
In this new client component I have a handleClick function which is something like this

  async function handleDownloadClick(file_name: string) {
    const { data, error } = await supabase.storage
      .from("my_bucket")
      .download(file_name);

    if (error) {
      console.error("Error downloading:", error);
      return;
    }

    const url = window.URL.createObjectURL(data);
    const a = document.createElement("a");
    a.href = url;
    a.download = file_name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }

This api request then naturally is executed client side and thus exposing info in the network tab. ( Which was normal by the way before server side). I was wondering if there is a way now to actually go around this. I have many other examples where I had go for a client component because of onClick events or state, where i dont want to expose API info

can you update your message to use codeblocks: https://nextjs-faq.com/good-question#messy-code-blocks-and-message-formatting

thanks didnt know its supported, now when I think about it, it make sense 😄

(and don't forget about making it typescript)

For anyone looking for an answer related to this topic - use server action. It took me no more than 20-30 min to fully grasp everything but they are now gamechanger for me.

PS: still experimental feature though.

nice 🙂