Say I am allowing my users to connect to Facebook, Instagram, Pinterest & Twitter, so they can use their API's. So I get access tokens for all those providers.
From what I've read, my inclination now is to store them in a http-only cookie.
However, with 4 access tokens, would that mean that all 4 access tokens are always being sent on every request?
What would be a secure approach here? Or would I in this case not store them on the client at all?
It depends on the exact architecture of your solution. If you have a backend, and your backend calls these APIs then you can keep those tokens in your backend. They don't have to be kept in the front-end at all. If your front-end needs those tokens (e.g. it is calling these APIs directly), then you have to keep the tokens there, and they have to be readable by your frontend app (so they can't be stored in an HTTP-only cookie).
I would struggle not to have any tokens in the browser. It's best to keep them in the backend.