Storing in react-context?

[mosnicholas]

This package is super helpful, thank you.

Do you by any chance have any opinions / ideas on storing the csrf token in react context? I'd like to do this for 2 reasons:

1. Instead of having to pass it around subcomponents, I can pull it out of react context.
2. I'm using react-query to make my API requests and often they are simply JSON requests. Ideally, I would just use the header defined approach to avoid having to pass it in as a key and polluting my API request body. Having it in the context would aid with that.

Does this present any security concerns?

[amorey]

Happy to hear you're finding edge-csrf useful! Apologies for the late reply.

It's definitely possible to use React context to share the CSRF token but it would have some drawbacks, namely, if you fetch the token asynchronously (e.g. inside an useEffect() hook) then your code will still have to handle the case where the token isn't available yet. Alternatively you can create a library function that fetches the CSRF token synchronously and provides it to your code on an as-needed basis. You can cache the token for follow-on requests and further optimize the function by pre-fetching the token on page load or providing it in the initial html depending on your needs. Here are some examples you can use as a guide:
https://github.com/amorey/edge-csrf/tree/next14/examples/next13-approuter-js-submission-static
https://github.com/amorey/edge-csrf/tree/next14/examples/next13-approuter-js-submission-dynamic

I've been thinking about how to add a method to the core library to do this and so far I can't come up with a developer-friendly yet performant way to do it. "Partial Prerendering" in Next.js 14 might be a good way to do it but I'm not sure yet.