Im currently trying to setup the serverside for a React Frontend application. This server interacts with a third party API through an authorization code grant auth flow. When the user clicks on the login button in the frontend it gets redirected to the server which redirects to the login form of the third party. I will then receive the authorization code at the callback route of my server and issue that code to get the access_token for the API resource calls.
Currently, my server redirects back to the React application after successfully retrieving the token by passing that token with the redirect URL to the frontend. My frontend then stores that token in the local storage and uses it whenever a request is made. The requests are send to my serverside and this returns the requested data from that third-party API.
So I guess those are not really good security practises and I want to improve that. But I am struggeling with the question of how and where should I safely store my API key so it can be reused.
My idea was to instead of passing the API access_token directly, I generate a JWT with user information and pass that token in the authorization header for protected routes later on. When my server then verifies that JWT it uses the current api access_token to make the request to the API and return the data.
But where do I store that access_token or should I even store it ? Or maybe it is possible to include that token inside the JWT in an encrypted form ? Also, I want to avoid using a database to store that simple information for now because I am still only prototyping.