feat(sdk): add support for custom headers in React SDK (#1318)

Author: rsbh

sdks/js/packages/core/react/contexts/FrontierProvider.tsx

@@ -7,29 +7,24 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { TransportProvider } from '@connectrpc/connect-query';
 import { createConnectTransport } from '@connectrpc/connect-web';
 import { useMemo } from 'react';
+import { createFetchWithCreds } from '../utils/fetch';
 
 export const multipleFrontierProvidersError =
   "Frontier: You've added multiple <FrontierProvider> components in your React component tree. Wrap your components in a single <FrontierProvider>.";
 
-const fetchWithCreds: typeof fetch = (input, init) => {
-  return fetch(input, {
-    ...init,
-    credentials: 'include'
-  });
-};
-
 export const queryClient = new QueryClient();
 
 export const FrontierProvider = (props: FrontierProviderProps) => {
-  const { children, initialState, config, theme, ...options } = props;
+  const { children, initialState, config, theme, customHeaders, ...options } =
+    props;
 
   const transport = useMemo(
     () =>
       createConnectTransport({
         baseUrl: config.connectEndpoint || '/frontier-connect',
-        fetch: fetchWithCreds
+        fetch: createFetchWithCreds(customHeaders)
       }),
-    [config.connectEndpoint]
+    [config.connectEndpoint, customHeaders]
   );
 
   return (

sdks/js/packages/core/react/utils/fetch.ts

@@ -0,0 +1,20 @@
+import { CustomHeaderValue } from '../../shared/types';
+
+export const createFetchWithCreds = (
+  customHeaders?: Record<string, CustomHeaderValue>
+): typeof fetch => {
+  return (input, init) => {
+    const headers = new Headers(init?.headers);
+    if (customHeaders) {
+      for (const [key, value] of Object.entries(customHeaders)) {
+        const headerValue = typeof value === 'function' ? value() : value;
+        headers.set(key, headerValue);
+      }
+    }
+    return fetch(input, {
+      ...init,
+      credentials: 'include',
+      headers
+    });
+  };
+};

sdks/js/packages/core/shared/types.ts

@@ -52,9 +52,12 @@ export interface InitialState {
   sessionId?: string | null;
 }
 
+export type CustomHeaderValue = string | (() => string);
+
 export interface FrontierProviderProps {
   config: FrontierClientOptions;
   children: React.ReactNode;
   initialState?: InitialState;
+  customHeaders?: Record<string, CustomHeaderValue>;
   theme?: ThemeProviderProps;
 }

sdks/js/packages/sdk-demo/src/App.tsx

@@ -3,10 +3,19 @@ import AuthContextProvider from '@/contexts/auth/provider';
 import { customFetch } from '@/utils/custom-fetch';
 import { FrontierProvider } from '@raystack/frontier/react';
 import Router from './Router';
+import { v4 as uuid } from 'uuid';
+
+const customHeaders = {
+  'X-Request-ID': () => `sdk-demo:${uuid()}`
+};
 
 function App() {
   return (
-    <FrontierProvider config={config} customFetch={customFetch}>
+    <FrontierProvider
+      config={config}
+      customFetch={customFetch}
+      customHeaders={customHeaders}
+    >
       <AuthContextProvider>
         <Router />
       </AuthContextProvider>