Skip to main content

Documentation Index

Fetch the complete documentation index at: https://usegately.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Update Profile

const updatedProfile = await gately.updateUserProfile(updates)

Parameters

interface UpdateProfileRequest {
  full_name?: string
  avatar_url?: string
  metadata?: Record<string, any>
}

Example

await gately.updateUserProfile({
  full_name: 'John Smith',
  avatar_url: 'https://example.com/avatar.jpg',
  metadata: {
    company: 'Acme Inc',
    role: 'Developer',
    preferences: {
      theme: 'dark',
      notifications: true
    }
  }
})

React Form

import { useState, useEffect } from 'react'
import { useGately } from '@gately/sdk'

function ProfileForm() {
  const { user, updateProfile } = useGately()
  const [formData, setFormData] = useState({
    fullName: '',
    company: '',
    role: ''
  })
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState('')

  useEffect(() => {
    if (user) {
      setFormData({
        fullName: user.full_name || '',
        company: user.metadata?.company || '',
        role: user.metadata?.role || ''
      })
    }
  }, [user])

  const handleSubmit = async (e) => {
    e.preventDefault()
    setSaving(true)
    setMessage('')

    try {
      await updateProfile({
        full_name: formData.fullName,
        metadata: {
          ...user.metadata,
          company: formData.company,
          role: formData.role
        }
      })
      setMessage('Profile updated successfully!')
    } catch (error) {
      setMessage('Failed to update profile: ' + error.message)
    } finally {
      setSaving(false)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {message && <div className="message">{message}</div>}
      
      <label>
        Full Name
        <input
          type="text"
          value={formData.fullName}
          onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
        />
      </label>

      <label>
        Company
        <input
          type="text"
          value={formData.company}
          onChange={(e) => setFormData({ ...formData, company: e.target.value })}
        />
      </label>

      <label>
        Role
        <input
          type="text"
          value={formData.role}
          onChange={(e) => setFormData({ ...formData, role: e.target.value })}
        />
      </label>

      <button type="submit" disabled={saving}>
        {saving ? 'Saving...' : 'Save Changes'}
      </button>
    </form>
  )
}

Upload Avatar

// Upload file and get URL
const file = document.getElementById('avatar-input').files[0]
const result = await gately.uploadFile(file, 'avatar')

// Update profile with new avatar
await gately.updateUserProfile({
  avatar_url: result.url
})

React Avatar Upload

function AvatarUpload() {
  const { user, updateProfile, uploadFile } = useGately()
  const [uploading, setUploading] = useState(false)

  const handleFileChange = async (e) => {
    const file = e.target.files[0]
    if (!file) return

    setUploading(true)
    try {
      const result = await uploadFile(file, 'avatar')
      await updateProfile({ avatar_url: result.url })
    } catch (error) {
      alert('Upload failed: ' + error.message)
    } finally {
      setUploading(false)
    }
  }

  return (
    <div className="avatar-upload">
      <img 
        src={user?.avatar_url || '/default-avatar.png'} 
        alt="Avatar" 
      />
      <label>
        {uploading ? 'Uploading...' : 'Change Avatar'}
        <input 
          type="file" 
          accept="image/*" 
          onChange={handleFileChange}
          disabled={uploading}
        />
      </label>
    </div>
  )
}

Metadata Best Practices

Structure

// Good: Organized metadata
{
  metadata: {
    profile: {
      company: 'Acme Inc',
      role: 'Developer',
      bio: 'Full-stack developer'
    },
    preferences: {
      theme: 'dark',
      language: 'en',
      notifications: {
        email: true,
        push: false
      }
    },
    social: {
      twitter: '@johndoe',
      linkedin: 'johndoe'
    }
  }
}

Updating Nested Data

// Preserve existing metadata
const user = gately.getUser()

await gately.updateUserProfile({
  metadata: {
    ...user.metadata,
    preferences: {
      ...user.metadata?.preferences,
      theme: 'light' // Only update theme
    }
  }
})

Error Handling

try {
  await gately.updateUserProfile(updates)
} catch (error) {
  switch (error.code) {
    case 'VALIDATION_ERROR':
      showError('Invalid data provided')
      break
    case 'UNAUTHORIZED':
      showError('Please log in to update your profile')
      break
    default:
      showError('Failed to update profile')
  }
}

Webhooks

Profile updates trigger the member.updated webhook:
{
  "event": "member.updated",
  "data": {
    "id": "mem_123",
    "email": "user@example.com",
    "changes": {
      "full_name": {
        "old": "John Doe",
        "new": "John Smith"
      }
    }
  }
}