Generic/typed UserInfo

packages/core/src/SDKCore/SDKCore.ts

@@ -46,7 +46,7 @@ export class SDKCore {
     window.location.assign(this.urlHelper.getAccountManagementUrl());
   }
 
-  async fetchUserInfo() {
+  async fetchUserInfo<T = UserInfo>() {
     const userInfoResponse = await fetch(this.urlHelper.getMeUrl(), {
       credentials: 'include',
     });
@@ -57,7 +57,7 @@ export class SDKCore {
       );
     }
 
-    const userInfo: UserInfo = await userInfoResponse.json();
+    const userInfo: T = await userInfoResponse.json();
     return userInfo;
   }
 

packages/sdk-react/src/components/providers/Context.tsx

@@ -34,4 +34,6 @@ export type UserInfo = {
 };
 
 export const FusionAuthContext =
-  React.createContext<FusionAuthProviderContext>(defaultContext);
+  React.createContext<FusionAuthProviderContext<UserInfo | any>>(
+    defaultContext,
+  );

packages/sdk-react/src/components/providers/FusionAuthProvider.test.tsx

@@ -16,10 +16,10 @@ import {
 } from '@fusionauth-sdk/core';
 import { TEST_CONFIG } from '#testing-tools/mocks/testConfig';
 
-function renderWithWrapper(config: FusionAuthProviderConfig) {
-  return renderHook(() => useFusionAuth(), {
+function renderWithWrapper<T = UserInfo>(config: FusionAuthProviderConfig) {
+  return renderHook(() => useFusionAuth<T>(), {
     wrapper: ({ children }: PropsWithChildren) => (
-      <FusionAuthProvider {...config}>{children}</FusionAuthProvider>
+      <FusionAuthProvider<T> {...config}>{children}</FusionAuthProvider>
     ),
   });
 }
@@ -111,14 +111,17 @@ describe('FusionAuthProvider', () => {
   });
 
   test('Will fetch userInfo', async () => {
-    const user: UserInfo = { given_name: 'Mr. Userton' };
+    const user = {
+      name: 'Mr. Userton',
+      age: 501,
+    };
     const mockUserInfoResponse = {
       ok: true,
       json: () => Promise.resolve(user),
     } as Response;
     vi.spyOn(global, 'fetch').mockResolvedValueOnce(mockUserInfoResponse);
 
-    const { result } = renderWithWrapper(TEST_CONFIG);
+    const { result } = renderWithWrapper<typeof user>(TEST_CONFIG);
 
     expect(fetch).not.toHaveBeenCalled();
 
@@ -131,7 +134,8 @@ describe('FusionAuthProvider', () => {
 
     await waitFor(() => {
       expect(result.current.isFetchingUserInfo).toBe(false);
-      expect(result.current.userInfo).toBe(user);
+      expect(result.current.userInfo?.age).toBe(501);
+      expect(result.current.userInfo?.name).toBe('Mr. Userton');
     });
   });
 

packages/sdk-react/src/components/providers/FusionAuthProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useContext, useMemo, useState, FC } from 'react';
+import { PropsWithChildren, useContext, useMemo, useState } from 'react';
 
 import { SDKCore } from '@fusionauth-sdk/core';
 
@@ -9,17 +9,13 @@ import {
   useUserInfo,
   useCookieAdapter,
 } from './hooks';
-import { FusionAuthContext } from './Context';
+import { FusionAuthContext, UserInfo as DefaultUserInfo } from './Context';
 import { FusionAuthProviderContext } from './FusionAuthProviderContext';
 
-const FusionAuthProvider: FC<
-  FusionAuthProviderConfig & PropsWithChildren
-> = props => {
-  const config = useMemo<FusionAuthProviderConfig>(() => {
-    const { children, ...config } = props;
-    return config;
-  }, [props]);
-
+function FusionAuthProvider<T = DefaultUserInfo>({
+  children,
+  ...config
+}: PropsWithChildren & FusionAuthProviderConfig) {
   const cookieAdapter = useCookieAdapter(config);
 
   const core: SDKCore = useMemo<SDKCore>(() => {
@@ -35,7 +31,7 @@ const FusionAuthProvider: FC<
   const { manageAccount, startLogin, startLogout, startRegister } =
     useRedirecting(core, config.onRedirect);
 
-  const { isFetchingUserInfo, userInfo, fetchUserInfo, error } = useUserInfo(
+  const { isFetchingUserInfo, userInfo, fetchUserInfo, error } = useUserInfo<T>(
     core,
     config.shouldAutoFetchUserInfo ?? false,
   );
@@ -45,7 +41,7 @@ const FusionAuthProvider: FC<
     config.shouldAutoRefresh ?? false,
   );
 
-  const providerValue: FusionAuthProviderContext = {
+  const providerValue: FusionAuthProviderContext<T> = {
     startLogin,
     startRegister,
     startLogout,
@@ -61,14 +57,16 @@ const FusionAuthProvider: FC<
 
   return (
     <FusionAuthContext.Provider value={providerValue}>
-      {props.children}
+      {children}
     </FusionAuthContext.Provider>
   );
-};
+}
 
 /**
  * A hook that returns `FusionAuthProviderContext`
  */
-const useFusionAuth = () => useContext(FusionAuthContext);
+function useFusionAuth<T = DefaultUserInfo>() {
+  return useContext<FusionAuthProviderContext<T>>(FusionAuthContext);
+}
 
 export { FusionAuthProvider, useFusionAuth };

packages/sdk-react/src/components/providers/FusionAuthProviderContext.ts

@@ -1,7 +1,7 @@
 import { UserInfo } from './Context';
 
 /** The context provided by FusionAuth React SDK */
-export interface FusionAuthProviderContext {
+export interface FusionAuthProviderContext<T = UserInfo> {
   /**
    * Whether the user is logged in.
    */
@@ -10,14 +10,13 @@ export interface FusionAuthProviderContext {
   /**
    * Data fetched from the configured 'me' endpoint.
    */
-  userInfo: UserInfo | null;
+  userInfo: T | null;
 
   /**
    * Fetches user info from the 'me' endpoint.
    * This is handled automatically if the SDK is configured with `shouldAutoFetchUserInfo`.
-   * @returns {Promise<UserInfo>}
    */
-  fetchUserInfo: () => Promise<UserInfo | undefined>;
+  fetchUserInfo: () => Promise<T | undefined>;
 
   /**
    * Indicates that the fetchUserInfo call is unresolved.

packages/sdk-react/src/components/providers/hooks/useUserInfo.ts

@@ -1,18 +1,21 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 
-import { SDKCore, UserInfo } from '@fusionauth-sdk/core';
+import { SDKCore } from '@fusionauth-sdk/core';
 
-export function useUserInfo(core: SDKCore, shouldAutoFetchUserInfo: boolean) {
+export function useUserInfo<T>(
+  core: SDKCore,
+  shouldAutoFetchUserInfo: boolean,
+) {
   const [isFetchingUserInfo, setIsFetchingUserInfo] = useState(false);
-  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+  const [userInfo, setUserInfo] = useState<T | null>(null);
   const [error, setError] = useState<Error | null>(null);
 
   const fetchUserInfo = useCallback(async () => {
     setIsFetchingUserInfo(true);
     setError(null);
 
     try {
-      const userInfo = await core.fetchUserInfo();
+      const userInfo = await core.fetchUserInfo<T>();
       setUserInfo(userInfo);
       return userInfo;
     } catch (error) {