Share CSRF tokens throughout a React application

Usage no npm install needed!

<script type="module">
  import shopifyReactCsrf from 'https://cdn.skypack.dev/@shopify/react-csrf';



Build Status Build Status License: MIT npm version npm bundle size (minified + gzip)

Share CSRF tokens throughout a React application.


$ yarn add @shopify/react-csrf


Setup 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 */}

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>;