Skip to main content

UI/UX Change: Re-specifying Social Media Links in Profile & Hiding Facebook Auth Linkage

Last Updated: 16/07/2026
Type: UI/UX Specification Change — Profile Edit & Social Links
Screen: Edit Profile (EditProfileScreen) — Social Media Accounts Section

1. Overview & Business Rationale​

Previously, the app had buttons to connect/link Facebook and Google using their respective authentication SDKs (OAuth Login flow) in the Edit Profile screen.

However, since the project maintains Apple Login for authentication, linking Facebook using Facebook SDK Auth in the profile is unnecessary and complicates the launch process (requiring Meta Developer App registration, approval, review, and SDK integration).

Decisions:​

  1. Hide Facebook OAuth Connection: Remove the Facebook login connection triggers (OAuth button/link actions) from the profile page.
  2. Shift to Text Inputs for Social Handles: Instead of SDK-level authentication, simplify the social links section to accept plain-text links, phone numbers, or usernames for the customer service channels:
    • Facebook: Input field to type/paste their Facebook profile URL.
    • Kakao: Input field to type Kakao login email or phone number.
    • WhatsApp: Input field to type WhatsApp username or phone number.

2. UI Wireframe Redesign (Edit Profile Screen)​

The Social Links section will be changed from "Add/Link social buttons" to standard text inputs:

┌────────────────────────────────────────────────────────┐
│  Social Media Links                                    │
│                                                        │
│  Facebook Profile Link                                 │
│  ┌──────────────────────────────────────────────────┐  │
│  │ https://facebook.com/username                    │  │
│  └──────────────────────────────────────────────────┘  │
│                                                        │
│  Kakao Account (Phone / Email)                         │
│  ┌──────────────────────────────────────────────────┐  │
│  │ user@kakao.com or +84909123456                   │  │
│  └──────────────────────────────────────────────────┘  │
│                                                        │
│  WhatsApp (Phone / Username)                          │
│  ┌──────────────────────────────────────────────────┐  │
│  │ +84909123456                                     │  │
│  └──────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────┘

3. Database & API Payload Adjustments​

Instead of OAuth profiles, the user profile schema should store these inputs as plain strings:

3.1 Backend Schema Update (User Model)​

interface UserProfile {
  id: string;
  fullName: string;
  // ...other profile info
  socialHandles: {
    facebookUrl?: string;
    kakaoHandle?: string;
    whatsAppHandle?: string;
  }
}

3.2 API Request/Response payload​

// PATCH /api/user/profile
{
  "fullName": "Nguyen Van A",
  "socialHandles": {
    "facebookUrl": "https://facebook.com/nguyenvana",
    "kakaoHandle": "nguyenvana@kakao.com",
    "whatsAppHandle": "+84909123456"
  }
}

4. Mobile App Implementation (React Native)​

4.1 UI Component Fixes​

Replace the social button list with text input fields:

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

const SocialHandlesForm = ({ initialHandles, onUpdate }) => {
  const [facebookUrl, setFacebookUrl] = useState(initialHandles?.facebookUrl || '');
  const [kakaoHandle, setKakaoHandle] = useState(initialHandles?.kakaoHandle || '');
  const [whatsAppHandle, setWhatsAppHandle] = useState(initialHandles?.whatsAppHandle || '');

  return (
    <View style={styles.container}>
      <Text style={styles.sectionTitle}>Social Media Links</Text>

      {/* Facebook Input */}
      <View style={styles.inputGroup}>
        <Text style={styles.label}>Facebook Profile Link</Text>
        <TextInput
          style={styles.input}
          placeholder="e.g., https://facebook.com/profile"
          value={facebookUrl}
          onChangeText={setFacebookUrl}
          autoCapitalize="none"
          keyboardType="url"
        />
      </View>

      {/* Kakao Input */}
      <View style={styles.inputGroup}>
        <Text style={styles.label}>Kakao Account (Phone / Email)</Text>
        <TextInput
          style={styles.input}
          placeholder="e.g., username@kakao.com or phone number"
          value={kakaoHandle}
          onChangeText={setKakaoHandle}
          autoCapitalize="none"
        />
      </View>

      {/* WhatsApp Input */}
      <View style={styles.inputGroup}>
        <Text style={styles.label}>WhatsApp (Phone / Username)</Text>
        <TextInput
          style={styles.input}
          placeholder="e.g., +84909123456"
          value={whatsAppHandle}
          onChangeText={setWhatsAppHandle}
          autoCapitalize="none"
          keyboardType="phone-pad"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    backgroundColor: '#FFFFFF',
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  inputGroup: {
    marginBottom: 12,
  },
  label: {
    fontSize: 12,
    color: '#666',
    marginBottom: 4,
  },
  input: {
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 8,
    padding: 10,
    fontSize: 14,
  },
});

Technical Checklist​

  • Hide/Remove the Facebook OAuth linkage buttons in EditProfileScreen.tsx.
  • Add the 3 standard text input fields for: Facebook Profile Link, Kakao Account, and WhatsApp handles.
  • Update state binding on the Mobile App to save inputs into the socialHandles object when submitting the profile form.
  • Verify that backend endpoints (PATCH /api/user/profile) are updated to accept and persist these plain text social handle fields.
  • Verify data persistence: editing, saving, and re-opening the profile page correctly loads the saved social handles.