Fix browser quickstart profile management

[janithjay]

Purpose

The "Manage Profile" dialog in samples/browser/quickstart was broken. Saving any field failed with a 400 Schema validation failed from PUT /users/me, and the dialog only rendered two hardcoded fields (First name, Last name) populated from ID token claims instead of the user's real profile attributes, with no schema validation.

Approach

@thunderid/browser is a headless, framework-agnostic layer. It ships no UI components. So the quickstart's hand-rolled dialog had drifted out of sync with what components actually do, and was sending a hardcoded, wrongly-shaped payload ({ name: { givenName, familyName } }) instead of the deployment's real (flat) schema attribute names.

Rewrote profileDialog.js to mirror @thunderid/react/@thunderid/vue's BaseUserProfile behavior instead of hardcoding shapes,

• Fetches the schema (getUsersMeMeta) and current attributes (getUsersMe) before rendering.
• Dynamically renders one row per non-credential schema attribute, in the same order, always-readonly field set, and empty-field handling as BaseUserProfile.
• Per-field edit/save/cancel instead of one shared form and Save button.
• Validates required/regex against the schema client-side before submitting.
• Merges each edit into the existing attributes via deepMerge before PUT /users/me, since that endpoint replaces the whole attributes document rather than merging.
• Avatar/display name (in the dialog and the nav bar) now refresh live after any field save, including picture.

After fixes

Related Issues

• fixes Profile updates fail schema validation and profile fields don't populate in Browser SDK quickstart thunderid#5021

Related PRs

• N/A

Checklist

• Followed the contribution guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Tests provided. (Add links if there are any)
  • Unit Tests
  • Integration Tests
• Breaking changes. (Fill if applicable)
  • Breaking changes section filled.
  • breaking change label added.

Security checks

• Followed secure coding standards.
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.

[coderabbitai]

Important

Review available on request

• 🔍 Trigger review

Reviews should be triggered manually for repositories with fewer than 10 stars. Select Trigger review above or comment @coderabbitai review to review the latest changes. For a full review, comment @coderabbitai full review.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9f7176b1-b8dc-4e1c-b7b5-b5970b7faf33

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.