@shopify/react-csrf

Share CSRF tokens throughout a React application.

Installation

yarn add @shopify/react-csrf

Usage

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