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.

On top of the schema-driven rewrite, two more issues surfaced while finishing this off. The per-field edit UI didn't match @thunderid/react/@thunderid/vue's BaseUserProfile, and saving a field closed the whole dialog unexpectedly. Verifying the fix with a real E2E run also surfaced a stale test (TC004) and a serious bug in the E2E harness's own cleanup step that deleted the local admin account instead of the test user it was meant to remove.

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.

Save/Cancel now match BaseUserProfile's buttons, and saving no longer closes the dialog

• Fixed the dialog closing itself on every save: onSaved called renderSignedInPage(), which replaces #app's innerHTML - destroying the dialog overlay, since it's appended as a sibling via insertAdjacentHTML.
• Split the callback: onSaved now only updates in-memory user state (the dialog already refreshes its own header locally), and the full nav/page refresh is deferred to a new onClose callback that fires after the dialog is actually dismissed.

E2E coverage: fixed a stale test, and a harness bug that deleted the admin account

• tests/e2e/tests/browser-quickstart/sign-in-out.spec.ts's TC004 and its page object (browser-quickstart.page.ts) were written against the dialog's old single-form design (#profile-first-name, #profile-dialog-save) before this PR's schema-driven, per-field-edit refactor landed. So it had never actually passed against current markup. Rewrote both to drive the real per-field edit/save UI (data-field/data-action selectors), mirroring the already-correct pattern in react-quickstart/vue-quickstart's equivalent test.
• Running that fixed test against a real backend surfaced a separate, pre-existing bug. global-teardown.ts looked up the shared test user via GET /users?attribute=username&value=..., but the backend only recognizes a SCIM-style filter=<attr> eq "<value>" query param - the old query was silently ignored, returning the full unfiltered, ID-sorted user list. Since the seeded default admin's deterministic ID (01900000-...) sorts ahead of the randomly-keyed test user, users[0] was the admin account, and teardown deleted it. Fixed the query format, added a client-side exact-match check before deleting, and made a failed lookup throw instead of silently treating "we don't know" the same as "nothing to clean up."

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

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: bc612c72-47b7-4ed5-9070-b945d763baf5

---

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.