How should I store a single use username and password for an Angular app without a login page?

Question

I will be creating an Angular app that will make calls to a DotNet Core API I have created. Because the API itself calls a third-party API which needs to be secured with an API key, I want to secure my API so that no one else can call my API without authorisation.

To this end, I thought I could just have a single-use username and password that the Angular app would append to each call it made to my API - ie there will not be a login page.

What is the recommended way of achieving this? I do not yet know where (or if) I will host this publicly, but I may deploy it in Azure in some fashion eventually.

Options seem to be:

1. Storing the username and password in web.config and then possibly encrypting the file (I'm actually not sure whether I'll eventually decide that having a plaintext web.config file is fine or not, but I'd just like options for now) - see https://www.infoq.com/articles/Secure-web.config . However, I'm not sure how I'd decrypt this in Angular.

2. Encrypt and decrypt an environment file that Angular will use - see https://medium.com/nontechcompany/secure-angular-configuration-credentials-in-containerized-environment-as-of-2021-a7f36ed676ed and linked articles https://betterprogramming.pub/how-to-secure-angular-environment-variables-for-use-in-github-actions-39c07587d590 and https://javascript.plainenglish.io/setup-dotenv-to-access-environment-variables-in-angular-9-f06c6ffb86c0 , though these seem to be for "containerized" deployments, and I'm not 100% sure I understand how they work just yet.

Answer 1

I would recommend you to generate a JWT signed token from your api on the initial user login.

As you said, you have a custom API between the client and the third party API so why keep the sensible data client side?

If you need to use the plain text username/password server side, you can still hash / decode the JWT token and retrieve user infos to interface the third party API.

That way you don't have to store any user credentials / sensible data client side and expose it in client api calls, you'll have to deal with only a token you can store in a cookie or localstorage.

✌️