feat: DAH-4205 Add profile page

[cliu02]

Description

Adds frontend page for user to fill in their profile information and backend service to create a Salesforce contact ID for the Clerk user.

Jira ticket

https://sfgovdt.jira.com/browse/DAH-4205

Before requesting eng review

Version Control

• branch name begins with angular if it contains updates to Angular code
• branch name contains the Jira ticket number
• PR name follows type: TICKET-NUMBER Description format, use DAH-000 if it does not need a ticket
• PR name follows urgent: Description format if it is urgent and does not need a ticket

Code quality

• the set of changes is small
• all automated code checks pass (linting, tests, coverage, etc.)
• if the PR is a bugfix, there are tests and logs around the bug

Code conventions

• web pages are formatted with .scss stylesheets and ui-seeds tokens, rather than inline styles or Tailwind

Review instructions

• instructions specify which environment(s) it applies to
• instructions work for PA testers
• instructions have already been performed at least once

Request eng review

• PR has needs review label
• Use Housing Eng group to automatically assign reviewers, and/or assign specific engineers
• If time sensitive, notify engineers in Slack

Before merging

Request product acceptance (PA) testing

• PA tested in the review environment (use needs product acceptance label)
• if PA testing cannot be done, changes are behind a feature flag

[wiz-dt-tis]

Wiz Scan Summary

Scanner	Findings
Vulnerabilities	-
Sensitive Data	1  1  1
Secrets	-
IaC Misconfigurations	-
SAST Findings	-
Software Management Findings	-
Total	1  1  1

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try the Wiz Code extension for VS Code, JetBrains, or Visual Studio.

[Copilot]

Pull request overview

Adds a new “Add Profile” step to the Clerk-based account creation flow and introduces backend support for creating/retrieving a Salesforce Contact ID tied to the Clerk user.

Changes:

• Add new /add-profile frontend route + page to collect legal name and DOB, then create/fetch the user profile and route into My Account with a success toast.
• Add new Clerk-authenticated API endpoints (GET/POST /api/v1/account/profile) and a ClerkService to read/update Clerk private metadata for the Salesforce contact ID.
• Wire Clerk bearer-token authentication into Rails middleware, update routing, and extend shared account UI components/translations.

Reviewed changes

Copilot reviewed 20 out of 21 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
Gemfile.lock	Adds clerk-sdk-ruby (and dependencies) to the lockfile.
Gemfile	Adds clerk-sdk-ruby dependency (require: false).
config/routes.rb	Adds /api/v1/account/profile API routes and /add-profile page route.
config/application.rb	Initializes Clerk middleware and bearer-token-only authentication behavior.
app/views/auth/add_profile.html.slim	Adds Slim view to mount the React app for the profile step.
app/services/clerk_service.rb	New service wrapper for Clerk user lookup + metadata storage/retrieval.
app/javascript/util/routeUtil.ts	Adds localized path + app page enum entry for “add profile”.
app/javascript/pages/account/components/NameFieldset.tsx	Adds optional note support on the name fieldset.
app/javascript/pages/account/add-profile.tsx	New “Add Profile” page (form, Clerk token usage, API calls, navigation).
app/javascript/pages/account/add-profile.module.scss	Adds styling for the new profile page.
app/javascript/pages/account/add-password.tsx	Routes users from “Add Password” to “Add Profile” (save or skip).
app/javascript/pages/account/account.tsx	Adds an “account ready” success toast on first entry after profile completion.
app/javascript/packs/react_application.tsx	Registers the new React route for /add-profile.
app/javascript/authentication/withAuthentication.tsx	Updates Clerk auth gate to require a loaded profile and redirect to add-profile if missing.
app/javascript/authentication/user.ts	Broadens User.id type to support Clerk string IDs.
app/javascript/authentication/context/UserProvider.tsx	Loads Clerk profile into UserContext when Clerk auth flag is enabled.
app/javascript/api/authApiService.ts	Adds Clerk-authenticated createProfile + getProfile(sessionToken) API helpers.
app/javascript/tests/pages/account/add-password.test.tsx	Updates tests to expect navigation to /add-profile.
app/controllers/auth_controller.rb	Adds Rails action to render the add-profile React view.
app/controllers/api/v1/account_controller.rb	Adds Clerk-authenticated profile/create_profile endpoints and custom auth/current_user handling.
app/assets/json/translations/react/en.json	Adds new strings for “finish setting up”, legal name note, toast, etc.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.