From 2fd61be4bc8598a86290878aff8c844a93a31a06 Mon Sep 17 00:00:00 2001 From: DonOmalVindula Date: Sun, 6 Sep 2026 11:04:55 +0530 Subject: [PATCH] fix(nextjs): keep the profile on screen when a profile update fails updateUserProfileAction reports failures as a result instead of throwing, and UserProfile handed the empty user of that result to onUpdateProfile, which replaced the displayed profile with an empty one and showed no message. - Show the failure reason through BaseUserProfile's error alert, as the React SDK does, and leave the profile untouched. - Forward the component-level `preferences` to the base component. - Return the underlying error message from the action (it said "Failed to get user profile"). Co-Authored-By: Claude Fable 5.1 --- .../nextjs-user-profile-update-error.md | 5 ++ .../presentation/UserProfile/UserProfile.tsx | 40 +++++++++--- .../__tests__/updateUserProfileAction.test.ts | 62 +++++++++++++++++++ .../server/actions/updateUserProfileAction.ts | 8 ++- 4 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 .changeset/nextjs-user-profile-update-error.md create mode 100644 packages/nextjs/src/server/actions/__tests__/updateUserProfileAction.test.ts diff --git a/.changeset/nextjs-user-profile-update-error.md b/.changeset/nextjs-user-profile-update-error.md new file mode 100644 index 000000000..dcf42d0c4 --- /dev/null +++ b/.changeset/nextjs-user-profile-update-error.md @@ -0,0 +1,5 @@ +--- +'@asgardeo/nextjs': patch +--- + +A failed profile update no longer blanks ``. 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. diff --git a/packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx b/packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx index bfd86ea0e..b708364b2 100644 --- a/packages/nextjs/src/client/components/presentation/UserProfile/UserProfile.tsx +++ b/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 * ``` */ -const UserProfile: FC = ({...rest}: UserProfileProps): ReactElement => { +const UserProfile: FC = ({preferences, ...rest}: UserProfileProps): ReactElement => { const {profile, flattenedProfile, schemas, onUpdateProfile, updateProfile} = useUser(); + const {t} = useTranslation(preferences?.i18n); + + const [error, setError] = useState(null); const handleProfileUpdate = async (payload: any): Promise => { - 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 = ({...rest}: UserProfileProps): ReactEl flattenedProfile={flattenedProfile as User} schemas={schemas as Schema[]} onUpdate={handleProfileUpdate} + error={error} + preferences={preferences} {...rest} /> ); diff --git a/packages/nextjs/src/server/actions/__tests__/updateUserProfileAction.test.ts b/packages/nextjs/src/server/actions/__tests__/updateUserProfileAction.test.ts new file mode 100644 index 000000000..5c2d3c64b --- /dev/null +++ b/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>; + + 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 = {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({}); + }); +}); diff --git a/packages/nextjs/src/server/actions/updateUserProfileAction.ts b/packages/nextjs/src/server/actions/updateUserProfileAction.ts index 33937b376..5b29347e0 100644 --- a/packages/nextjs/src/server/actions/updateUserProfileAction.ts +++ b/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, }; }