Users can edit and correct their profile information

GDPR Art. 16 grants data subjects the right to have inaccurate personal data corrected without undue delay. CCPA §1798.106 and LGPD Art. 18(III) impose equivalent correction rights. If users cannot edit their own profile — their name, email, phone number, or address — the application is non-compliant every time a user's information changes in the real world. Beyond compliance, read-only personal data erodes trust: users who realize they cannot correct a misspelled name or update a phone number have no path to resolution without contacting support, which scales poorly. Email change flows also have a direct security dimension: unverified email changes are an account takeover vector that must be closed.

Add a profile edit form to app/settings/profile/page.tsx. For email changes, require verification via a link to the new address before updating to prevent account takeover.

// app/settings/profile/page.tsx
'use client'
import { useState, type FormEvent } from 'react'

export default function ProfileSettingsPage({ user }: { user: { name: string } }) {
  const [name, setName] = useState(user.name)
  const [saving, setSaving] = useState(false)

  async function handleSubmit(e: FormEvent) {
    e.preventDefault()
    setSaving(true)
    await fetch('/api/user/profile', {
      method: 'PATCH',
      body: JSON.stringify({ name }),
      headers: { 'Content-Type': 'application/json' },
    })
    setSaving(false)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Display Name
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <button type="submit" disabled={saving}>{saving ? 'Saving…' : 'Save changes'}</button>
    </form>
  )
}

For email changes, send a verification link to the new address via app/api/user/change-email/route.ts and only commit the update after the link is clicked. Do not update the email immediately on form submission.

• ID: data-protection.user-rights-access.data-correction

• Severity: low

• What to look for: Enumerate every relevant item. Look for a user profile or settings page where users can view and edit their personal information. Check what fields are editable: at minimum, users should be able to change their name, email address, phone number, and mailing address if those are collected. Verify that changes made on the edit form are immediately persisted and reflected throughout the application (e.g., if a user changes their display name, it updates in the header and in content they have posted). Check whether email changes require verification (a confirmation email to the new address) to prevent account takeover.

• Pass criteria: At least 1 of the following conditions is met. Users can view all personal data held about them on a profile/settings page and edit it. Changes are immediately persisted. Email changes require verification via a confirmation link sent to the new address before taking effect. Name and other fields update immediately throughout the UI.

• Fail criteria: No profile editing feature exists. Users can see their data but cannot modify it. Fields are read-only throughout the application.

• Skip (N/A) when: Application has no user accounts or collects no personal data beyond authentication credentials.

• Detail on fail: Example: "Profile page exists but all fields are read-only. No edit form or edit button found." or "Name field is editable but changes are not persisted — form submits but no API call is made.".

• Remediation: Add a profile edit form to the user settings page:

  // app/settings/profile/page.tsx
  'use client'
  
  export default function ProfileSettingsPage() {
    const [name, setName] = useState(user.name)
    const [saving, setSaving] = useState(false)
  
    async function handleSubmit(e: FormEvent) {
      e.preventDefault()
      setSaving(true)
      await fetch('/api/user/profile', {
        method: 'PATCH',
        body: JSON.stringify({ name }),
        headers: { 'Content-Type': 'application/json' }
      })
      setSaving(false)
      toast('Profile updated')
    }
  
    return (
      <form onSubmit={handleSubmit}>
        <label>
          Display Name
          <input value={name} onChange={e => setName(e.target.value)} />
        </label>
        <button type="submit" disabled={saving}>Save changes</button>
      </form>
    )
  }
  

  For email changes, send a verification link to the new address and only update the email after the link is clicked. This prevents account takeover via email change.