feat: DAH-4244 Detect if account exists

[jimlin-sfgov]

Description

New sign-in/sign-up behavior:

• attempt to sign in with email not in our system
• attempt to sign up with email in our system

A big portion of the diff is updating to the latest Clerk SDK, and resolving conflicts that came from the update.

If you are running this PR locally, you must update your node packages.

Jira ticket

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

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

[Copilot]

Pull request overview

This PR upgrades the Clerk React SDK and updates the account creation/sign-in flows to detect whether an email already has an account, transferring users into the appropriate Clerk flow (sign-in vs sign-up) and updating related tests/mocks accordingly.

Changes:

• Replace @clerk/clerk-react with @clerk/react (dependency + imports) and update Clerk hook usage to the v6 resource APIs.
• Add “transfer” behavior between sign-up and sign-in code flows based on Clerk error/status responses (account-exists detection and sign-up-if-missing transfer).
• Update Jest mocks and tests to reflect the new Clerk resource methods (emailCode.*, finalize, fetchStatus, etc.).

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
yarn.lock	Updates lockfile for @clerk/react and transitive dependency changes.
package.json	Switches dependency from @clerk/clerk-react to @clerk/react.
app/javascript/pages/account/verification-code.tsx	Migrates verification/resend logic to new Clerk APIs; adds sign-in↔sign-up transfer handling.
app/javascript/pages/account/create-an-account.tsx	Detects existing accounts and transfers create-account into sign-in code flow when applicable.
app/javascript/pages/account/add-password.tsx	Updates Clerk import to @clerk/react.
app/javascript/pages/account/account.tsx	Updates Clerk import to @clerk/react.
app/javascript/layouts/withAppSetup.tsx	Updates ClerkProvider import to @clerk/react.
app/javascript/layouts/Layout.tsx	Updates Clerk import to @clerk/react.
app/javascript/layouts/AccountNav.tsx	Updates Clerk import to @clerk/react.
app/javascript/hooks/useFeatureFlag.tsx	Minor formatting-only change.
app/javascript/authentication/withAuthentication.tsx	Updates Clerk import to @clerk/react.
app/javascript/authentication/SignInFlow.tsx	Migrates sign-in flows to new Clerk APIs (create, emailCode.sendCode, finalize, fetchStatus).
app/javascript/tests/setupTests.ts	Updates global Clerk mocks to @clerk/react.
app/javascript/tests/pages/SignInFlow.test.tsx	Updates tests/mocks to new Clerk resource APIs and code-flow behavior.
app/javascript/tests/pages/account/verification-code.test.tsx	Updates tests/mocks for verification/resend/finalize and transfer-to-sign-up behavior.
app/javascript/tests/pages/account/create-an-account.test.tsx	Adds coverage for transfer-to-sign-in behavior when account exists; updates mocks.
app/javascript/tests/pages/account/add-password.test.tsx	Updates Clerk mocks to @clerk/react.
app/javascript/tests/util/accountUtils.tsx	Updates Clerk import to @clerk/react.

Suppressed comments (1)

app/javascript/pages/account/verification-code.tsx:100

• verifySignUpCode ignores the result of signUp.emailCode.verifyCode(...). If Clerk returns an { error } object (as with the sign-in verify path), an invalid code may not be handled consistently and the only signal becomes a non-complete status. Capture and handle the error explicitly so invalid codes reliably surface the form error state and log the right details.

  const verifySignUpCode = async (code: string) => {
    if (signUpStatus === "fetching" || !signUp) return
    await signUp.emailCode.verifyCode({ code })
    if (signUp.status === "complete") {
      await signUp.finalize({
        navigate: ({ decorateUrl }: { decorateUrl: (url: string) => string }) => {
          void navigate(decorateUrl(getAddPasswordPath()))
        },
      })
    } else {
      console.error("Code verification error:", signUp)
      setError("code", { message: "invalid" })
    }

---

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