fix(nextjs): keep the profile on screen when a profile update fails

.changeset/nextjs-user-profile-update-error.md

@@ -0,0 +1,5 @@
+---
+'@asgardeo/nextjs': patch
+---
+
+A failed profile update no longer blanks `<UserProfile />`. The server action reports failures as a result rather than throwing, and the component handed the empty user of that result to the profile context, wiping the displayed profile without any message. It now keeps the current profile on screen and shows the reason through the profile's error alert, as the React SDK does, and forwards the component-level `preferences` (i18n / theme) to the base component. The action's error message no longer claims it failed to *get* the profile.

packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx

@@ -19,8 +19,8 @@
 'use client';
 
 import {Schema, User} from '@asgardeo/node';
-import {BaseUserProfile, BaseUserProfileProps, useUser} from '@asgardeo/react';
-import {FC, ReactElement} from 'react';
+import {BaseUserProfile, BaseUserProfileProps, useTranslation, useUser} from '@asgardeo/react';
+import {FC, ReactElement, useState} from 'react';
 import getSessionId from '../../../../server/actions/getSessionId';
 
 /**
@@ -52,15 +52,37 @@ export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | '
  * />
  * ```
  */
-const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactElement => {
+const UserProfile: FC<UserProfileProps> = ({preferences, ...rest}: UserProfileProps): ReactElement => {
   const {profile, flattenedProfile, schemas, onUpdateProfile, updateProfile} = useUser();
+  const {t} = useTranslation(preferences?.i18n);
+
+  const [error, setError] = useState<string | null>(null);
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
-    const result: {data: {user: User}; error: string; success: boolean} = await updateProfile(
-      payload,
-      (await getSessionId()) as string,
-    );
-    onUpdateProfile(result?.data?.user);
+    setError(null);
+
+    try {
+      const result: {data: {user: User}; error: string; success: boolean} = await updateProfile(
+        payload,
+        (await getSessionId()) as string,
+      );
+
+      // The server action reports failures as a result instead of throwing. Keep the current profile on
+      // screen and show the reason; the empty `user` it returns must not replace the profile.
+      if (!result?.success) {
+        setError(result?.error || t('user.profile.update.generic.error'));
+
+        return;
+      }
+
+      onUpdateProfile(result.data.user);
+    } catch (caughtError: unknown) {
+      setError(
+        caughtError instanceof Error && caughtError.message
+          ? caughtError.message
+          : t('user.profile.update.generic.error'),
+      );
+    }
   };
 
   return (
@@ -69,6 +91,8 @@ const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactEl
       flattenedProfile={flattenedProfile as User}
       schemas={schemas as Schema[]}
       onUpdate={handleProfileUpdate}
+      error={error}
+      preferences={preferences}
       {...rest}
     />
   );

packages/nextjs/src/server/actions/__tests__/updateUserProfileAction.test.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2026, 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 {beforeEach, describe, expect, it, vi, Mock} from 'vitest';
+import AsgardeoNextClient from '../../../AsgardeoNextClient';
+import updateUserProfileAction from '../updateUserProfileAction';
+
+vi.mock('../../../AsgardeoNextClient', () => ({
+  default: {
+    getInstance: vi.fn(),
+  },
+}));
+
+describe('updateUserProfileAction', () => {
+  type ActionResult = Awaited<ReturnType<typeof updateUserProfileAction>>;
+
+  const client: {updateUserProfile: Mock} = {updateUserProfile: vi.fn()};
+  const payload: {operations: Array<{op: string; path: string; value: string}>} = {
+    operations: [{op: 'replace', path: 'name.givenName', value: 'Jane'}],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (AsgardeoNextClient.getInstance as unknown as Mock).mockReturnValue(client);
+  });
+
+  it('returns the updated user when the update succeeds', async () => {
+    const user: Record<string, unknown> = {id: 'user-1', name: {givenName: 'Jane'}};
+
+    client.updateUserProfile.mockResolvedValue(user);
+
+    const result: ActionResult = await updateUserProfileAction(payload as any, 'session-1');
+
+    expect(client.updateUserProfile).toHaveBeenCalledWith(payload, 'session-1');
+    expect(result).toEqual({data: {user}, error: '', success: true});
+  });
+
+  it('reports the failure reason instead of throwing when the update fails', async () => {
+    client.updateUserProfile.mockRejectedValue(new Error('Failed to update user profile: attribute is read-only'));
+
+    const result: ActionResult = await updateUserProfileAction(payload as any, 'session-1');
+
+    expect(result.success).toBe(false);
+    expect(result.error).toBe('Failed to update user profile: attribute is read-only');
+    expect(result.data.user).toEqual({});
+  });
+});

packages/nextjs/src/server/actions/updateUserProfileAction.ts

@@ -22,8 +22,10 @@ import {UpdateMeProfileConfig, User} from '@asgardeo/node';
 import AsgardeoNextClient from '../../AsgardeoNextClient';
 
 /**
- * Server action to get the current user.
- * Returns the user profile if signed in.
+ * Server action to update the signed-in user's profile.
+ *
+ * Failures are reported through the result (`success: false` and `error`) rather than thrown, so that
+ * client components can show the reason without losing the profile they display.
  */
 const updateUserProfileAction = async (
   payload: UpdateMeProfileConfig,
@@ -38,7 +40,7 @@ const updateUserProfileAction = async (
       data: {
         user: {},
       },
-      error: `Failed to get user profile: ${error instanceof Error ? error.message : String(error)}`,
+      error: error instanceof Error ? error.message : String(error),
       success: false,
     };
   }