On the backend, we need to modify the
api-server.js to allow and use our custom cookie.
You can find the result here.
First, we need to allow the frontend to send the
st-cookie header we chose to transfer the tokens.
We can do this by adding it to
allowedHeaders in the cors config, as seen in line 125.
Then, we need to add a helper function that will handle copying the
Set-Cookie header into our custom header and also add that header
access-control-expose-headers list so that the frontend can access it on CORS requests.
You can find the implementation in the updateHeaders function.
Finally, we need to override most of the functions and APIs of the
Session recipe to have them use the header enabled in the first step and to
use the helper function defined in the second step to send tokens to the frontend.
You can find the modified session recipe config in lines 43-116
On the front end, we need to modify our SuperTokens configuration and patch the global fetch function to add our custom header.
You can find the modified
- This has to be done before calling
Then, we need to replace the global fetch to make use of the custom header. We need to do this because fetch is used internally by the SuperTokens SDK, and we have no other way of getting access to response headers. You can see how we did it in lines 73-101
Finally, we need to add an event handler that will clear the cookies on logout. This is done in an event handler in the configuration of the session recipe, as seen in lines 116-121.
4. An optional step is to add an
- This step is only applicable if you are using
If you are using
axios, you need to add an interceptor to add the custom header to requests and handle it in responses.
You can see a basic implementation in lines 33-71.