Skip to main content

Bug Fix: Facebook Social Link Displays Wrong Display Name

Last Updated: 15/07/2026
Type: Bug — Social Account Link Info Binding Error
Screen: Edit Profile (EditProfileScreen) — Social Link Section
Severity: 🟠 Medium — UX issue, confusing account linkage status

Feedback Screenshot:

1. Bug Description​

On the Edit Profile screen under the Social Links section:

  • When a user links their Facebook account, the UI displays a wrong account name (e.g., "Place", or the name of the current app account itself) instead of the linked Facebook user's actual display name (e.g., "Nguyen Van A").
  • It seems the frontend is binding the incorrect variable to the Facebook name label, or fallback values are incorrectly overriding the state.

2. Root Cause Analysis​

Cause 1: Variable Binding Mix-up (Most Common)​

The developer might have bound the Facebook display label to the main account profile name state (profile.fullName) instead of the social account identity payload.

// ❌ WRONG — Binding the app user's name to the FB slot
<Text>{profile.fullName}</Text> // Renders "Place" or current user name beside FB icon

Cause 2: Missing Facebook SDK Profile Request​

When linking Facebook, the app request scope might only retrieve the authentication token/ID without requesting the public_profile field (which contains the user's name).

Cause 3: API Response Structure Discrepancy​

The backend API returns the linked social account info, but the field mapping key is mismatched:

  • API payload returns: facebookName or socialLinks.facebook.displayName
  • Frontend code expects: facebookUser or fbName (resulting in undefined and falling back to current profile name).

3. Correct Business Logic​

  1. When Not Linked: Show the placeholder text/label and an "Add" (Thêm) button.
  2. When Linked: Display the linked Facebook User Name (fetched from Facebook via auth token) and a "Change" (Thay đổi) button.
  3. Context Isolation: The Facebook display name must reflect the Facebook account, while the Google label reflects the Google account name. Under no circumstance should they mirror the local app profile name.

4. Code Implementation Fix​

4.1 Frontend Component State Mapping​

Verify that the state holding the social connection profiles has distinct entries for facebook and google details:

interface SocialLink {
  provider: 'facebook' | 'google';
  uid: string;
  displayName: string; // The name returned from the provider
}

interface UserProfile {
  id: string;
  fullName: string; // App local account name
  socialLinks: {
    facebook?: SocialLink;
    google?: SocialLink;
  }
}

4.2 Fix Label Rendering in Profile Edit Screen​

// ❌ Before: Muddled binding leading to local profile name leakage
<View style={styles.socialRow}>
  <Icon name="facebook" />
  <Text style={styles.socialName}>
    {profile.socialLinks.facebook ? profile.fullName : 'Not Linked'}
  </Text>
  <Button title="Change" />
</View>

// ✅ After: Bind correctly to facebook.displayName
<View style={styles.socialRow}>
  <Icon name="facebook" />
  <Text style={styles.socialName}>
    {profile.socialLinks.facebook 
      ? profile.socialLinks.facebook.displayName 
      : 'Not Linked'}
  </Text>
  
  {profile.socialLinks.facebook ? (
    <TouchableOpacity onPress={handleUnlinkFacebook}>
      <Text style={styles.actionText}>Change</Text> {/* Or Unlink */}
    </TouchableOpacity>
  ) : (
    <TouchableOpacity onPress={handleLinkFacebook}>
      <Text style={styles.actionText}>Add</Text>
    </TouchableOpacity>
  )}
</View>

4.3 Requesting Correct Scopes on Facebook Login​

Ensure the Login Manager requests the profile name scope:

import { LoginManager, Profile } from 'react-native-fbsdk-next';

const linkFacebookAccount = async () => {
  try {
    const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
    if (result.isCancelled) return;

    // Retrieve profile details
    const currentProfile = await Profile.getCurrentProfile();
    if (currentProfile) {
      const fbName = currentProfile.name; // e.g., "Nguyen Van A"
      const fbId = currentProfile.userID;
      
      // Send token and fbName to backend API
      await api.linkSocialAccount({
        provider: 'facebook',
        token: fbId,
        displayName: fbName
      });
    }
  } catch (error) {
    console.error("Facebook linkage failed", error);
  }
};

Technical Checklist​

  • Locate the social link render block in EditProfileScreen.tsx (or similar file in /screens/profile/).
  • Inspect the state binding: ensure the text label next to the Facebook icon points to profile.socialLinks.facebook.displayName (or equivalent structure).
  • Confirm if the Facebook login integration fetches the profile name via Profile.getCurrentProfile() or Graph API /me?fields=name.
  • Verify the backend schema: ensure the endpoint POST /api/user/social-link accepts and stores a displayName field.
  • Test case: Log in with an account named "Place". Link a Facebook account named "Johnny Tester". Verify the label next to the Facebook icon shows "Johnny Tester", not "Place".
  • Verify the "Change" (Thay đổi) flow behaves correctly when altering link associations.