fix(react, nextjs): no edit-control flash, and apply the rule to the profile modal

- Treat an unresolved editable="auto" lookup as read-only, so a managed account
  never shows edit controls for a moment before they disappear.
- <UserDropdown /> forwards editable to the profile it opens from "Manage
  profile", which previously always rendered as editable.
- In popup mode the lookup waits until the profile is opened, so mounting a
  dropdown costs no request.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: DonOmalVindula

.changeset/readonly-federated-profile.md

@@ -10,6 +10,9 @@ Render a read-only profile for users whose attributes are owned by an identity p
 Asgardeo rejects attribute updates for accounts provisioned from a social or enterprise connection, so the profile used to offer edit controls that always failed with a raw SCIM error.
 
 - `<UserProfile />` accepts `editable="auto"` in React and Next.js. On Asgardeo it looks up the signed-in user's federated associations and, when the account is linked to a connection, renders the profile read-only with a short note naming the provider. On WSO2 Identity Server, where the same updates succeed, the profile stays editable.
+- `<UserDropdown />` forwards `editable` to the profile it opens from "Manage profile", so the modal follows the same rule as the page.
 - `BaseUserProfile` accepts a predicate for `editable`, so applications can decide per user without any lookup, and a `readOnlyNote` to explain why editing is unavailable.
 - A rejected update is now reported in plain words instead of the raw SCIM error, and switches the profile to read-only for the rest of the session. The Next.js `<UserProfile />` previously ignored update failures entirely.
 - New API `getMeFederatedAssociations` in `@asgardeo/javascript` and `@asgardeo/react`, plus the `signup`-style texts `user.profile.readonly.federated` and `user.profile.update.not.allowed.error` in all i18n bundles.
+
+While `auto` is resolving the profile stays read-only, so a managed account never briefly shows edit controls; in popup mode the lookup is deferred until the profile is actually opened.

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

@@ -21,7 +21,7 @@
 import {BaseUserDropdown, BaseUserDropdownProps} from '@asgardeo/react';
 import {FC, ReactElement, ReactNode, useState} from 'react';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
-import UserProfile from '../UserProfile/UserProfile.js';
+import UserProfile, {UserProfileProps} from '../UserProfile/UserProfile.js';
 
 /**
  * Render props data passed to the children function
@@ -46,6 +46,13 @@ export interface UserDropdownRenderProps {
  * Extends BaseUserDropdownProps but excludes user, onManageProfile, and onSignOut since they're handled internally
  */
 export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile'> & {
+  /**
+   * Whether the profile shown by the "Manage profile" item can be edited. Forwarded to
+   * `<UserProfile />`, so `'auto'` renders a read-only profile for accounts whose attributes
+   * are owned by an identity provider.
+   */
+  editable?: UserProfileProps['editable'];
+
   /**
    * Render prop function that receives user state and actions.
    * When provided, this completely replaces the default dropdown rendering.
@@ -114,6 +121,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
   renderTrigger,
   renderDropdown,
   onSignOut,
+  editable,
   ...rest
 }: UserDropdownProps): ReactElement => {
   const {user, isLoading, signOut} = useAsgardeo();
@@ -149,7 +157,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
     return (
       <>
         {children(renderProps)}
-        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        <UserProfile mode="popup" editable={editable} open={isProfileOpen} onOpenChange={setIsProfileOpen} />
       </>
     );
   }
@@ -172,7 +180,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
           />
         )}
         {/* Note: renderDropdown would need BaseUserDropdown modifications to implement properly */}
-        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        <UserProfile mode="popup" editable={editable} open={isProfileOpen} onOpenChange={setIsProfileOpen} />
       </>
     );
   }
@@ -187,7 +195,9 @@ const UserDropdown: FC<UserDropdownProps> = ({
         onSignOut={handleSignOut}
         {...rest}
       />
-      {isProfileOpen && <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}
+      {isProfileOpen && (
+        <UserProfile mode="popup" editable={editable} open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+      )}
     </>
   );
 };

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

@@ -72,8 +72,11 @@ const UserProfile: FC<UserProfileProps> = ({editable, preferences, ...rest}: Use
   const [error, setError] = useState<string | null>(null);
   const [lock, setLock] = useState<FederatedProfileLock | undefined>(undefined);
 
+  // In popup mode the profile is mounted with the dropdown; don't spend a request until it is opened.
+  const {mode: profileMode, open: isProfileOpen} = rest as {mode?: string; open?: boolean};
+
   useEffect((): (() => void) | undefined => {
-    if (editable !== 'auto') {
+    if (editable !== 'auto' || (profileMode === 'popup' && !isProfileOpen)) {
       return undefined;
     }
 
@@ -90,7 +93,7 @@ const UserProfile: FC<UserProfileProps> = ({editable, preferences, ...rest}: Use
     return (): void => {
       isStale = true;
     };
-  }, [editable]);
+  }, [editable, profileMode, isProfileOpen]);
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
     setError(null);
@@ -116,7 +119,10 @@ const UserProfile: FC<UserProfileProps> = ({editable, preferences, ...rest}: Use
     onUpdateProfile(result?.data?.user);
   };
 
-  const resolvedEditable: BaseUserProfileProps['editable'] = editable === 'auto' ? !lock?.readOnly : editable;
+  // Until the lookup resolves the profile stays read-only, so a managed account never flashes
+  // edit controls that the server would refuse.
+  const resolvedEditable: BaseUserProfileProps['editable'] =
+    editable === 'auto' ? lock !== undefined && !lock.readOnly : editable;
 
   const resolveReadOnlyNote = (): string | undefined => {
     if (!lock?.readOnly) {

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

@@ -20,7 +20,7 @@ import {FlowMetadataResponse} from '@asgardeo/browser';
 import {FC, ReactElement, ReactNode, useState} from 'react';
 import {BaseUserDropdown as BaseUserDropdownComponent, BaseUserDropdownProps} from './BaseUserDropdown';
 import useAsgardeo from '../../../contexts/Asgardeo/useAsgardeo';
-import UserProfile from '../UserProfile/UserProfile';
+import UserProfile, {UserProfileProps} from '../UserProfile/UserProfile';
 
 /**
  * Render props data passed to the children function
@@ -47,6 +47,13 @@ export interface UserDropdownRenderProps {
  * Extends BaseUserDropdownProps but excludes user, onManageProfile, and onSignOut since they're handled internally
  */
 export type UserDropdownProps = Omit<BaseUserDropdownProps, 'user' | 'onManageProfile'> & {
+  /**
+   * Whether the profile shown by the "Manage profile" item can be edited. Forwarded to
+   * `<UserProfile />`, so `'auto'` renders a read-only profile for accounts whose attributes
+   * are owned by an identity provider.
+   */
+  editable?: UserProfileProps['editable'];
+
   /**
    * Render prop function that receives user state and actions.
    * When provided, this completely replaces the default dropdown rendering.
@@ -115,6 +122,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
   renderTrigger,
   renderDropdown,
   onSignOut,
+  editable,
   ...rest
 }: UserDropdownProps): ReactElement => {
   const {user, isLoading, signOut, meta} = useAsgardeo();
@@ -151,7 +159,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
     return (
       <>
         {children(renderProps)}
-        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        <UserProfile mode="popup" editable={editable} open={isProfileOpen} onOpenChange={setIsProfileOpen} />
       </>
     );
   }
@@ -174,7 +182,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
           />
         )}
         {/* Note: renderDropdown would need BaseUserDropdown modifications to implement properly */}
-        <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        <UserProfile mode="popup" editable={editable} open={isProfileOpen} onOpenChange={setIsProfileOpen} />
       </>
     );
   }
@@ -189,7 +197,9 @@ const UserDropdown: FC<UserDropdownProps> = ({
         onSignOut={handleSignOut}
         {...rest}
       />
-      {isProfileOpen && <UserProfile mode="popup" open={isProfileOpen} onOpenChange={setIsProfileOpen} />}
+      {isProfileOpen && (
+        <UserProfile mode="popup" editable={editable} open={isProfileOpen} onOpenChange={setIsProfileOpen} />
+      )}
     </>
   );
 };

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

@@ -90,8 +90,11 @@ const UserProfile: FC<UserProfileProps> = ({preferences, editable, ...rest}: Use
   const [isFederatedAccount, setIsFederatedAccount] = useState<boolean | undefined>(undefined);
   const [identityProviderName, setIdentityProviderName] = useState<string | undefined>(undefined);
 
+  // In popup mode the profile is mounted with the dropdown; don't spend a request until it is opened.
+  const {mode: profileMode, open: isProfileOpen} = rest as {mode?: string; open?: boolean};
+
   useEffect((): (() => void) | undefined => {
-    if (editable !== 'auto') {
+    if (editable !== 'auto' || (profileMode === 'popup' && !isProfileOpen)) {
       return undefined;
     }
 
@@ -124,7 +127,7 @@ const UserProfile: FC<UserProfileProps> = ({preferences, editable, ...rest}: Use
     return (): void => {
       isStale = true;
     };
-  }, [editable, baseUrl, instanceId]);
+  }, [editable, baseUrl, instanceId, profileMode, isProfileOpen]);
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
     setError(null);
@@ -150,8 +153,10 @@ const UserProfile: FC<UserProfileProps> = ({preferences, editable, ...rest}: Use
     }
   };
 
+  // Until the lookup resolves the profile stays read-only, so a managed account never flashes
+  // edit controls that the server would refuse.
   const resolvedEditable: BaseUserProfileProps['editable'] =
-    editable === 'auto' ? isFederatedAccount !== true : editable;
+    editable === 'auto' ? isFederatedAccount === false : editable;
 
   const resolveReadOnlyNote = (): string | undefined => {
     if (isFederatedAccount !== true) {