Share CSRF tokens throughout a React application.
yarn add @shopify/react-csrfSetup the Provider around all of the application that need to access csrf token.
// App.tsx
import * as React from 'react';
import {CsrfTokenContext} from '@shopify/react-csrf';
function App({token}: {token?: string}) {
return (
<CsrfTokenContext.Provider value={token}>
{/* rest of the app */}
</CsrfTokenContext.Provider>
);
}Access csrf token using useCsrfToken hook:
import React from 'react';
import {useCsrfToken} from '@shopify/react-csrf';
export default function MyToken() {
const csrfToken = useCsrfToken();
return <p>My CSRF Token is: {csrfToken}</p>;
}