There are only 2 cross-browser ways to store API access key in your SPA

When we think about storing API access key, we might consider the following approaches:

Third-party cookies

Using third-party cookies means, that your API domain handles storing api access key on its own. Sounds simple, but it doesn't work anymore. Safari and Firefox are already blocking third-party cookies. Chrome will start blocking in 2 years.

Conclusion: Not supported anymore.

LocalStorage

LocalStorage is a simple client-side key-value storage. You just put your key on the storage and it will never expire, but even this approach is not ideal.

LocalStorage is insecure

You can find tons of articles on how insecure LocalStorage is. The main argument is that if some malicious JS code get injected in your page, it can steal important data from LocalStorage.

That's true. Especially if you depend a lot on third-party scripts.

But, well, let's agree that if someone could inject malicious code into your code, it's not LocalStorage's fault.

LocalStorage is only a client-side storage

This can become a real problem if you need to make API calls, which require an access key, during server-side rendering.

Despite of it's recommended not to make API calls, that depend on access key, on server side, there might be situation when you need it. So in this case, LocalStorage is not a good choice.

LocalStorage can't be shared across multiple domains

If you use multiple domains for your website, LocalStorage is not a good choice. 

Conclusion: Good for client-side requests. Can be insecure.

Cookie

Mmm, cookies. There are 2 options here.

Set cookie via JavaScript

You can use cookie the same way as you use LocalStorage. It has the same cons. And cookies will be accessible during server-side rendering.

But the main problem is that you can't really manage cookies expiration date. For example, Safari prevents setting expiration date for more than 7 days. You can review all limitations here https://www.cookiestatus.com.

Use Http-Only cookie

This is the most secure way that works both on client and server sides. But you will need to proxy all requests to API through your SPA server. It can affect response latency of your application.

Conclusion: Best solution if you decide to proxy API requests.

So we figured out that there are only 2 working options. Let's conclude when to use each of them.

Use LocalStorage if:

Use Http-only cookie + Proxy if: