Making API calls to blitz.js from a react-native mobile app
A fix for trying to call blitz.js endpoints from a react native app that don't require a CSRF token saying that the CSRF token is invalid
There can be many issues when adapting an API produced by a tool like blitz.js to be used by other platforms with different needs. I’m writing this gist to document the issues I faced when trying to signup users using a blitz.js mutation API call.
Essentially my issue was that the API call seemed to want a CSRF token but how do you get a CSRF token when the request to get one requires one? Well as blitz.js validates ALL CSRF token headers whether they are required or not to be validated. This was an issue because by default
react-native stores all
Set-cookie response headers and passes those cookies along with all future requests.
Which was causing blitz.js to validate invalid credentials and throw a
CSRFMismatch error even though those credentials where not required.
Implementing the fix
The actual implementation of the fix for this issue is pretty simple if you are using
fetch inside of your
react-native app just pass the property
credentials: "omit" or with a library like
axios you can add the property
withCredentials: false you should be able to find documentation for this for whatever library you are using to make your API requests. These properties tell the underlying react native libraries to not send credentials with these API requests.
So this was a good few hours of my life… This feature of
react-native feels a bit hand-fisted and underdeveloped. It seems like it could be useful if developed further but currently it feels more like an inconvenience.