Merge pull request #256 from auth0/feat/custom-fetcher-proxy-mode

feat(core,react): add custom fetcher support for proxy mode

Author: NaveenChand755

packages/core/src/api/api-utils.ts

@@ -13,17 +13,21 @@ export const AUTH0_SCOPE_HEADER = HeaderName.Auth0Scope;
 /**
  * Creates a fetcher function for proxy mode that injects scopes via auth0-scope header.
  * The proxy will extract scopes from the header and request the appropriate token.
+ * @param customFetcher - Optional custom fetch implementation to use instead of global fetch
  * @returns Fetcher function that sets auth0-scope and content-type headers
  * @internal
  */
-export function createProxyFetcher(): FetcherSupplier {
+export function createProxyFetcher(
+  customFetcher?: (url: string, init?: RequestInit) => Promise<Response>,
+): FetcherSupplier {
+  const fetchFn = customFetcher ?? fetch;
   return async (url, init, authParams) => {
     const headers = new Headers(init?.headers);
     headers.set(HeaderName.ContentType, ContentType.JSON);
     if (authParams?.scope?.length) {
       headers.set(HeaderName.Auth0Scope, authParams.scope.join(' '));
     }
-    return fetch(url, { ...init, headers });
+    return fetchFn(url, { ...init, headers });
   };
 }
 

packages/core/src/auth/auth-types.ts

@@ -101,6 +101,7 @@ export type ProxyAuthConfig = {
   mode: 'proxy';
   proxyUrl: string;
   domain?: string;
+  fetcher?: (url: string, init?: RequestInit) => Promise<Response>;
 };
 
 /**
@@ -127,6 +128,7 @@ export interface AuthDetails {
   domain?: string | undefined;
   authProxyUrl?: string | undefined;
   contextInterface?: BasicAuth0ContextInterface | undefined;
+  fetcher?: (url: string, init?: RequestInit) => Promise<Response>;
   previewMode?: boolean; // For docs - skip API client initialization
 }
 

packages/core/src/auth/auth-utils.ts

@@ -53,6 +53,7 @@ export const AuthUtils = {
         mode: 'proxy',
         proxyUrl: normalizeProxyUrl(auth.authProxyUrl),
         ...(auth.domain && { domain: auth.domain.trim() }),
+        ...(auth.fetcher && { fetcher: auth.fetcher }),
       };
     }
 

packages/core/src/services/my-account/my-account-client.ts

@@ -24,7 +24,7 @@ export function createMyAccountClient(config: ClientAuthConfig) {
       domain: '',
       baseUrl: new URL(MY_ACCOUNT_PROXY_PATH, config.proxyUrl).href,
       telemetry: false,
-      fetcher: createProxyFetcher(),
+      fetcher: createProxyFetcher(config.fetcher),
     });
   }
 

packages/core/src/services/my-organization/my-organization-client.ts

@@ -24,7 +24,7 @@ export function createMyOrganizationClient(config: ClientAuthConfig) {
       domain: '',
       baseUrl: new URL(MY_ORGANIZATION_PROXY_PATH, config.proxyUrl).href,
       telemetry: false,
-      fetcher: createProxyFetcher(),
+      fetcher: createProxyFetcher(config.fetcher),
     });
   }
 

packages/react/src/providers/proxy-provider.tsx

@@ -43,15 +43,16 @@ export const Auth0ComponentProvider = ({
   children,
 }: Extract<Auth0ComponentProviderProps, { mode: 'proxy' }> & { children: React.ReactNode }) => {
   const mergedToastSettings = useToastProvider(toastSettings);
-  const baseUrl = proxyConfig.baseUrl;
+  const { baseUrl, fetcher } = proxyConfig;
 
   const memoizedAuthDetails = React.useMemo<AuthDetails>(
     () => ({
       domain,
       authProxyUrl: baseUrl,
+      fetcher,
       previewMode,
     }),
-    [domain, baseUrl, previewMode],
+    [domain, baseUrl, fetcher, previewMode],
   );
 
   const coreClient = useCoreClientInitialization({

packages/react/src/types/auth-types.ts

@@ -18,7 +18,14 @@ export type Auth0ComponentProviderProps = (
       authContext?: AuthDetails['contextInterface'];
       proxyConfig?: never;
     }
-  | { mode: 'proxy'; domain: string; proxyConfig: { baseUrl: string } }
+  | {
+      mode: 'proxy';
+      domain: string;
+      proxyConfig: {
+        baseUrl: string;
+        fetcher?: (url: string, init?: RequestInit) => Promise<Response>;
+      };
+    }
 ) & {
   i18n?: I18nOptions;
   themeSettings?: ThemeSettings;

packages/react/src/types/index.ts

@@ -3,6 +3,9 @@
  * @module types
  */
 
+// Auth types
+export * from './auth-types';
+
 // My Account types
 export * from './my-account/mfa/mfa-types';