feat(react): add custom fetch method to AsgardeoContext and update HttpRequestConfig usage

Author: brionmario

packages/browser/src/__legacy__/models/http-client.ts

@@ -36,7 +36,7 @@ export interface HttpRequestInterface {
   enableRetrievingSignOutURLFromSession?: (config: SPACustomGrantConfig) => void;
 }
 
-export interface HttpRequestConfig extends AxiosRequestConfig {
+export interface HttpRequestConfig extends AxiosRequestConfig, Omit<Request, 'headers' | 'method' | 'signal' | 'url'> {
   attachToken?: boolean;
   shouldEncodeToFormData?: boolean;
   shouldAttachIDPAccessToken?: boolean;

packages/react/src/AsgardeoReactClient.ts

@@ -39,6 +39,8 @@ import {
   AllOrganizationsApiResponse,
   extractUserClaimsFromIdToken,
   TokenResponse,
+  HttpRequestConfig,
+  HttpResponse,
 } from '@asgardeo/browser';
 import AuthAPI from './__temp__/api';
 import getMeOrganizations from './api/getMeOrganizations';
@@ -347,6 +349,13 @@ class AsgardeoReactClient<T extends AsgardeoReactConfig = AsgardeoReactConfig> e
       'The signUp method with SignUpOptions is not implemented in the React client.',
     );
   }
+
+  async fetch(url: string, options?: HttpRequestConfig): Promise<HttpResponse<any>> {
+    return this.asgardeo.httpRequest({
+      url,
+      ...options,
+    });
+  }
 }
 
 export default AsgardeoReactClient;

packages/react/src/contexts/Asgardeo/AsgardeoContext.ts

@@ -17,7 +17,7 @@
  */
 
 import {Context, createContext} from 'react';
-import {Organization} from '@asgardeo/browser';
+import {HttpRequestConfig, HttpResponse, Organization} from '@asgardeo/browser';
 import AsgardeoReactClient from '../../AsgardeoReactClient';
 
 /**
@@ -60,6 +60,13 @@ export type AsgardeoContextProps = {
   signUp: any;
   user: any;
   organization: Organization;
+  /**
+   * Custom fetch function to make HTTP requests.
+   * @param url - The URL to fetch.
+   * @param options - Optional configuration for the HTTP request.
+   * @returns A promise that resolves to the HTTP response.
+   */
+  fetch: (url: string, options?: HttpRequestConfig) => Promise<HttpResponse<any>>;
 };
 
 /**
@@ -81,6 +88,7 @@ const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null
   signOut: null,
   signUp: null,
   user: null,
+  fetch: () => null,
 });
 
 AsgardeoContext.displayName = 'AsgardeoContext';

packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -29,6 +29,7 @@ import {
   getBrandingPreference,
   GetBrandingPreferenceConfig,
   BrandingPreference,
+  HttpRequestConfig,
 } from '@asgardeo/browser';
 import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState, useCallback} from 'react';
 import AsgardeoContext from './AsgardeoContext';
@@ -390,6 +391,10 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     }));
   };
 
+  const fetch = async (url: string, options?: HttpRequestConfig): Promise<any> => {
+    return asgardeo.fetch(url, options);
+  };
+
   return (
     <AsgardeoContext.Provider
       value={{
@@ -408,6 +413,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
         signOut,
         signUp,
         user,
+        fetch,
       }}
     >
       <I18nProvider preferences={preferences?.i18n}>