Hi. I'd like to know how to change the labels on the fields (password, first name, save, sign in, profile settings...), I'd like to be able to put them in Portuguese. I'm using ory in Custom UI with Ory Elements mode (https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-ory-elements), with react-spa. #C02MR4DEEGH

Hi @fast-pizza-10456 There aren't proper instructions in the readme or in our docs to do this yet, but I will guide you here so you don't need to wait for that 😄 We have built in translations with the Ory Account Experience and Ory Elements. See below for a screenshot of the translation in Portuguese of the sign in page. Since you are using a custom UI built in Ory Elements, you can change the translations of your application by providing Ory Elements with your translation file. Specifically you can change the

ID

label by specifying a value for this key https://github.com/ory/elements/blob/main/src/locales/en.json#L61 We also already provide Portuguese out of the box here https://github.com/ory/elements/blob/main/src/locales/pt.json You can copy this file into your own react project and use it with your own

react-intl

provider. Just make sure you are on the latest version of Ory Elements. Then inside your project, you will need to use the

react-intl

provider directly like so

// other imports above 
import { pt } from "./locales";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      {/* We add the Ory themes here */}
      <ThemeProvider themeOverrides={{}}>
        <IntlProvider
          locale="pt"
          defaultLocale="en"
          messages={pt}
          defaultRichTextElements={{
            del: (chunks) => <del>{chunks}</del>,
          }}
        >
             // children are here like routes etc
       </IntlProvider>
     <ThemeProvider>
   </BrowserRouter>
  </React.StrictMode>
);

Hi 😀, thanks for replying. I've done everything you've shown, but it still hasn't reproduced the change in my project, I think I'm missing some more configuration that I don't know. Could you show (print) the use of IntlProvider in some file? Another question, how can I see the version of my Ory Elements nd update it? Thank you in advance for your availability.

Ory Elements is an npm package. So you can just install it in your react application using

npm i @ory/elements

https://www.npmjs.com/package/@ory/elements

Everything is according to your instructions, but it still hasn't changed the language. Is the configuration just the one you sent, the snippet of code? In the login file, you don't need to change anything else?For example, to change the language on this page.

This looks correct, the locale folder contains the Portuguese language and index.ts for exporting the json? https://github.com/ory/elements/blob/main/src/locales/index.ts And then the language file https://github.com/ory/elements/blob/main/src/locales/pt.json I am also working on providing official support for this here https://github.com/ory/elements/pull/158

Good morning. Yes, everything is fine, folders and files. Just out of conscience haha, does it have anything to do with me being in a development environment?

ah i see you are developing on it inside the elements repository?

That's right.

could you move the

react-spa

folder outside of the ory elements repository?

I can try.

You will need to install some dependencies most likely, such as

@ory/client

and

@ory/elements

Wow, it worked. Thank you very much.

🥳 I am busy with a patch that would make this a lot easier 🙂

Cool, I realized that there are some labels that are still in English and they are not pre-defined in pt.json. Is that something I can add? Like the part below: First name, Last Name, Newsletter subscription...

hmm good question, it should be possible. I would need to take a look

That's good. Because there seems to be a logical hierarchy sequence in the pt.json file. Where can I follow the progress of this? Or the answer to it?

I've been looking into it and it doesn't seem to be possible to do a translation for these labels since the labels come from the identity schema

Oh, right, thanks.