I am struggling to find a way to use a secret api key in my Vue application.
I have a Vue app that consumes an (internal) API. The API is behind an API Gateway that is secured by key authentication. For each API request I need to pass the secret api key to authenticate the vue app on the API gateway. As environment variables are embedded into the build, I can’t store secret keys there or anywhere else in the code (obviously).
The only solution I see is to create some sort of proxy on the server that serves my Vue app. Instead of directly calling the API gateway from my app, I instead have to call the endpoint on my server that injects the API gateway key into the request and forwards it to the API gateway. However, this seems as to many steps for a simple API call (App -> Server -> API Gateway -> API -> API Gateway -> Server -> App).
Does anyone have a better solution for my use case or am I misunderstanding anything? Thanks in advance.