How to keep user's (not my) API tokens securely?

Question

I am trying to create a dashboard WEB service that retrieves and aggregates data from like Slack, Gmail, Google Calendar APIs, but in order to retrieve the data, it is necessary to have users register for their tokens and we have to keep them in our database like user table in like AWS or firebase.

However, if we try to get users to register tokens, they may not be able to do so because the service can misuse them even if we do not intend to do so.

So the question is that is there a way to use the token that the user registers without the service keeping it? In other words, is it possible to have users register their tokens safely?

I use following stack;

• Next.js
• React
• firebase

Answer 1

You can store the token in HTTP-only cookie which is only available over HTTP and it is not accessible by browser or anything else. when a user sign in you should send an httpOnly response from your backend and from React each request you send should be like this to send the httpOnly cookie in the backend:

// Header.jsx
const req = await fetch(URL,{
  method : 'GET,POST,PUT...',
  credentials : "include", // to send httpOnly cookie from browser to backend
  headers: {'Content-Type' : 'application/json'},
  body : JSON.stringify({name : 'paiman'})
 });
 const res = await req.json();