You can override the TOTP setup text in Ory Elements by providing custom translations (i18n). Option 1 — Using OryProvider: - Define your translation key/value for the relevant locale(s). - Pass them via customTranslations to OryProvider. Example:

tsx // translations.ts export const messages = {   en: {     // Replace the TOTP setup instruction text key with your copy:     // Use the exact key from Elements’ locale files     "settings.totp.instructions": "Your custom instructions on how to set up the authenticator.",   }, }  // app.tsx import { OryProvider } from "@ory/elements-react" import { messages } from "./translations"  export default function App({ Component, ...props }) {   return (     <OryProvider customTranslations={messages}>       <Component {...props} />     </OryProvider>   ) }

This injects your copy wherever the TOTP settings component renders that message. You can find the exact keys to override in the Elements locale files. [[Using custom translations](https://www.ory.sh/docs/elements/guides/internationalization#using-custom-translations); [IntlConfig](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/IntlConfig)] Option 2 — Using react-intl directly: Wrap your app in react-intl’s IntlProvider and pass your messages for the current locale; use the same message keys as Elements. [[Internationalization guide](https://www.ory.sh/docs/elements/guides/internationalization#using-custom-translations)]

Yes, OryProvider exists in Elements 1.x and is the way to inject config and custom translations. It’s documented as part of @ory/elements-react and takes config plus optional customTranslations via the config shape. [[OryProvider](https://www.ory.sh/docs/elements/reference/@ory/elements-react/functions/OryProvider); [OryProviderProps](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps)] If you don’t see it in your codebase, you can either: - Add OryProvider at your app root to supply translations (recommended). [[OryProvider](https://www.ory.sh/docs/elements/reference/@ory/elements-react/functions/OryProvider)] - Or wrap with OryConfigurationProvider and your own intl setup, but OryProvider already wraps that for you. [[OryConfigurationProvider](https://www.ory.sh/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider)] To change the TOTP instruction text, provide custom translations using OryProvider:

tsx // translations.ts export const messages = {   en: {     // Use the exact key from Elements’ locales repo for the TOTP instruction     "settings.totp.instructions": "Your custom authenticator setup instructions.",   }, }  // app.tsx/root layout import { OryProvider } from "@ory/elements-react"  export default function App({ children }) {   return (     <OryProvider config={{ /* your sdk + project config */ }} customTranslations={messages}>       {children}     </OryProvider>   ) }

If you prefer react-intl directly, wrap your app with IntlProvider and provide the same keys. [[Using custom translations](https://www.ory.sh/docs/elements/guides/internationalization#using-custom-translations); [Internationalization](https://www.ory.sh/docs/elements/guides/internationalization)]

You’re right — with OryClientConfiguration you can pass i18n via the intl property, including customTranslations. Here’s how:

tsx // translations.ts export const customTranslations = {   en: {     // Use the exact key from Elements’ locales for the TOTP setup text     "settings.totp.instructions": "Your custom instructions on how to set up the authenticator.",   }, }  // config.ts import { OryClientConfiguration } from "@ory/elements-react"  export const config: OryClientConfiguration = {   project: {     // ...your AccountExperienceConfiguration (urls, name, etc.)   },   sdk: {     url: "<https://your-slug.projects.oryapis.com>", // or your API base URL   },   intl: {     locale: "en",     customTranslations, // inject your overrides here   }, }

Then provide this config to Ory Elements (e.g., via OryProvider or per-component config prop, depending on your setup):

tsx import { OryProvider } from "@ory/elements-react" import { config } from "./config"  export function App({ children }) {   return <OryProvider config={config}>{children}</OryProvider> }

Key refs: the OryClientConfiguration interface supports an intl field with locale and customTranslations; custom i18n is documented in the Elements i18n guide. [[OryClientConfiguration](https://www.ory.sh/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration); [IntlConfig](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/IntlConfig); [Using custom translations](https://www.ory.sh/docs/elements/guides/internationalization#using-custom-translations)]

You can override that text by supplying a custom translation for the key settings.totp.description via the intl.customTranslations field in your OryClientConfiguration. Example:

tsx // translations.ts export const customTranslations = {   en: {     "settings.totp.description": "Your custom instructions on how to set up the authenticator.",   }, }  // config.ts import { OryClientConfiguration } from "@ory/elements-react"  export const config: OryClientConfiguration = {   project: {     // your AccountExperienceConfiguration...   },   intl: {     locale: "en",     customTranslations,   }, }

Pass this config to your Settings component (or globally if you use a provider). The intl.customTranslations mechanism is documented in OryClientConfiguration and IntlConfig, and custom i18n overrides are covered in the Elements i18n guide. [[OryClientConfiguration](https://www.ory.sh/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration); [IntlConfig](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/IntlConfig); [Using custom translations](https://www.ory.sh/docs/elements/guides/internationalization#using-custom-translations)]