Using the features in Advanced customization, we can customize the SDK to use localstorage instead of cookies set on the server.
You can find the complete example on GitHub.
The basic idea behind it is that we can use a custom header to transfer tokens. This way, the frontend can access and store them in localstorage or wherever desired and use them to authenticate requests.
On the backend, we need to do two things:
- Load tokens from a custom header instead of the
- Use a custom header to communicate changes to the tokens instead of setting them as cookies
On the frontend we need to do two things:
- When making a request to the API, we need to add a custom header that contains the tokens we would normally send as cookies
- After getting a response from the API, we need to inspect the headers and store the contents of a custom header
We can achieve these by replacing the global fetch function with a "patched" version. This must be done before initializing SuperTokens (calling
SuperTokens.init) as the SDK uses the fetch function internally.
If you use
axios (or a similar library) to make requests, you also need to add an interceptor that will do the same.