---
id: w5/m3/t005
title: Localize Ory Elements auth flows to the locale
worker: worker5
status: done
estimate: 60m
depends_on: [w5/m3/t001, w5/m3/t002]
---

## Objective

Make the `@ory/elements-react` flow components (`<Login>`, `<Registration>`,
`<Recovery>`, `<Settings>`) render in the **same** language as the rest of the
app. Ory Elements owns its own copy and does **not** inherit the app's react-i18next
instance — this is the "ensure i18n works for Ory's components" requirement and
the reason it's a separate task.

## Context

- Ory Elements React is configured via `OryClientConfiguration` in
  `src/common/lib/ory/config.ts` (`oryConfig`), passed to every flow component's
  `config` prop (see `src/features/auth/pages/login-page/index.tsx`). It ships
  its own translations and accepts an `intl` / locale configuration plus custom
  translation overrides — verify the exact field against the installed
  `@ory/elements-react@^1.2.0` types (`OryClientConfiguration` / intl provider),
  don't assume the API.
- The current locale comes from i18next (`i18n.language`, t001/t002). Drive Ory's
  locale from it so the switcher (t003) moves both in lockstep.
- SSR gotcha already handled (`ssr.noExternal: ["@ory/elements-react"]`,
  `dashboard/CLAUDE.md`) — don't regress it. The Ory locale must also be correct
  on the SSR render to avoid a mismatch (reuse t002's server-detected language).
- Any bex-specific strings Ory doesn't cover (or where bex wording should
  override Ory's defaults) go through Ory's custom-translations mechanism, not by
  forking Ory.

## Steps

1. Confirm how `@ory/elements-react@1.2.0` takes a locale + custom translations
   (inspect the package's exported config/intl types).
2. Make `oryConfig` (or a per-render wrapper) derive its locale from the current
   i18next language, including on SSR (server-detected language from t002).
3. Supply custom translations for any bex-branded/overridden strings.
4. Verify each auth page: switch language, confirm the Ory-rendered form labels/
   buttons/validation change too, with no hydration mismatch.

## Files

- `dashboard/src/common/lib/ory/config.ts`
- `dashboard/src/features/auth/pages/{login,register,forgot-password,settings}-page/index.tsx`
- (possibly) `dashboard/src/features/auth/components/auth-page-shell/*`

## Acceptance criteria

- [ ] Selecting a non-English language renders the Ory login/sign-up/forgot-password/
      settings forms (field labels, buttons, error/validation text) in that language.
- [ ] Ory locale matches the app locale on the initial SSR render — no hydration
      mismatch on the auth pages.
- [ ] `hide_ory_branding` / card-logo / settings-header overrides still hold.
- [ ] `yarn typecheck` / `yarn lint` pass.

## Out of scope

- Extracting bex's own auth hero copy (t004 owns that).
- Seeding additional app languages (t006).
</content>
