chore(react): implement updateMeProfile function and integrate with BaseUserProfile for user profile updates

Author: brionmario

packages/react/src/api/scim2/updateMeProfile.ts

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {User, AsgardeoAPIError, HttpInstance, AsgardeoSPAClient, HttpRequestConfig} from '@asgardeo/browser';
+
+const httpClient: HttpInstance = AsgardeoSPAClient.getInstance().httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Updates the user profile information at the specified SCIM2 Me endpoint.
+ *
+ * @param url - The SCIM2 Me endpoint URL.
+ * @param value - The value object to patch (SCIM2 PATCH value).
+ * @param requestConfig - Additional request config if needed.
+ * @returns A promise that resolves with the updated user profile information.
+ * @example
+ * ```typescript
+ * await updateMeProfile({
+ *   url: "https://api.asgardeo.io/t/<ORG>/scim2/Me",
+ *   value: { "urn:scim:wso2:schema": { mobileNumbers: ["0777933830"] } }
+ * });
+ * ```
+ */
+const updateMeProfile = async ({
+  url,
+  payload,
+  ...requestConfig
+}: {url: string; payload: any} & Partial<Request>): Promise<User> => {
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new AsgardeoAPIError(
+      'Invalid endpoint URL provided',
+      'updateMeProfile-ValidationError-001',
+      'javascript',
+      400,
+      'Invalid Request',
+    );
+  }
+
+  const data = {
+    Operations: [
+      {
+        op: 'replace',
+        value: payload,
+      },
+    ],
+    schemas: ['urn:ietf:params:scim:api:messages:2.0:PatchOp'],
+  };
+
+  const response: any = await httpClient({
+    url,
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/scim+json',
+      Accept: 'application/json',
+    },
+    data,
+    ...requestConfig,
+  } as HttpRequestConfig);
+
+  if (!response.data) {
+    const errorText = await response.text();
+
+    throw new AsgardeoAPIError(
+      `Failed to update user profile: ${errorText}`,
+      'updateMeProfile-ResponseError-001',
+      'javascript',
+      response.status,
+      response.statusText,
+    );
+  }
+
+  return response.data;
+};
+
+export default updateMeProfile;

packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx

@@ -28,6 +28,7 @@ import clsx from 'clsx';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
 interface Schema {
+  id?: string;
   caseExact?: boolean;
   description?: string;
   displayName?: string;
@@ -62,6 +63,7 @@ export interface BaseUserProfileProps {
   onSubmit?: (data: any) => void;
   saveButtonText?: string;
   cancelButtonText?: string;
+  onUpdate: (payload: any) => Promise<void>;
 }
 
 const BaseUserProfile: FC<BaseUserProfileProps> = ({
@@ -76,6 +78,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   editable = true,
   onChange,
   onSubmit,
+  onUpdate,
   saveButtonText = 'Save Changes',
   cancelButtonText = 'Cancel',
 }): ReactElement => {
@@ -107,14 +110,22 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
   }, []);
 
   const handleFieldSave = useCallback(
-    (fieldName: string, value: any) => {
-      setEditedUser(prev => ({
-        ...prev,
-        [fieldName]: value,
-      }));
-      onChange?.(fieldName, value);
-      toggleFieldEdit(fieldName);
-      onSubmit?.({...editedUser, [fieldName]: value});
+    (schema: Schema) => {
+      let payload = {};
+
+      if (schema.multiValued) {
+        payload = {
+          [schema.id]: {
+            [schema.name]: schema.value,
+          },
+        };
+      } else {
+        payload = {
+          [schema.name]: schema.value,
+        };
+      }
+
+      onUpdate(payload);
     },
     [onChange, onSubmit, editedUser, toggleFieldEdit],
   );
@@ -303,10 +314,7 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
           >
             {isFieldEditing ? (
               <>
-                <button
-                  style={{...actionButtonStyle, ...saveButtonStyle}}
-                  onClick={() => handleFieldSave(schema.name!, editedUser[schema.name!])}
-                >
+                <button style={{...actionButtonStyle, ...saveButtonStyle}} onClick={() => handleFieldSave(schema)}>
                   Save
                 </button>
                 <button

packages/react/src/components/presentation/UserProfile/UserProfile.tsx

@@ -19,6 +19,7 @@
 import {FC, ReactElement} from 'react';
 import useAsgardeo from '../../../hooks/useAsgardeo';
 import BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';
+import updateMeProfile from 'packages/react/src/api/scim2/updateMeProfile';
 
 /**
  * Props for the UserProfile component.
@@ -50,9 +51,13 @@ export type UserProfileProps = Omit<BaseUserProfileProps, 'user'>;
  * ```
  */
 const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactElement => {
-  const {user} = useAsgardeo();
+  const {user, baseUrl} = useAsgardeo();
 
-  return <BaseUserProfile user={user} {...rest} />;
+  const handleProfileUpdate = async (payload: any): Promise<void> => {
+    updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
+  };
+
+  return <BaseUserProfile user={user} onUpdate={handleProfileUpdate} {...rest} />;
 };
 
 export default UserProfile;

packages/react/src/contexts/AsgardeoContext.ts

@@ -50,6 +50,7 @@ export type AsgardeoContextProps = {
    */
   signUp: any;
   user: any;
+  baseUrl: string;
 };
 
 /**
@@ -61,7 +62,8 @@ const AsgardeoContext: Context<AsgardeoContextProps | null> = createContext<null
   signIn: null,
   signOut: null,
   signUp: null,
-  user: null
+  user: null,
+  baseUrl: ''
 });
 
 AsgardeoContext.displayName = 'AsgardeoContext';

packages/react/src/providers/AsgardeoProvider.tsx

@@ -170,6 +170,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
           throw new Error('Sign up functionality not implemented yet');
         },
         user,
+        baseUrl
       }}
     >
       <ThemeProvider theme={preferences?.theme?.overrides} defaultColorScheme={isDarkMode ? 'dark' : 'light'}>

packages/react/src/utils/getUserProfile.ts

@@ -79,6 +79,7 @@ const getUserProfile = async ({baseUrl}): Promise<any> => {
           for (const subAttr of subAttributes) {
             if (complexValue[subAttr.name] !== undefined) {
               result.push({
+                id: schemaId,
                 ...subAttr,
                 value: complexValue[subAttr.name],
               });
@@ -89,6 +90,7 @@ const getUserProfile = async ({baseUrl}): Promise<any> => {
           // Only include if value exists
           if (value !== undefined) {
             result.push({
+              id: schemaId,
               ...attr,
               value,
             });