ory/elements

Translations don't work for registration traits

Opened this issue · 2 comments

Benehiko commented

Preflight checklist

Ory Network Project

No response

Describe your problem

The translations don't work well with registration traits due to the dynamic nature of the trait titles. This data is set by the Identity schema and requires that the implementer somehow replace the titles before they are used by the Ory Elements UserAuthCard. See this discussion on the topic #118 (reply in thread)

Describe your ideal solution

However, considering that we support translations now, it might make sense to add keys related to the traits per language. For example

{
  "identities.messages.1010001": "Sign in",
  "identities.messages.1010002": "Sign in with {provider}",
  "traits.email": "Email",
  "traits.phone": "Mobile Number"
}

Workarounds or alternatives

One could replace the JSON data for these specific traits in the language you would like them to display in. But this requires implementing your own strategy outside of the translation layer of Ory Elements, which isn't ideal.

Version

0.1.0-beta-10

Additional Context

No response

calliope-codes commented

As a temporary workaround for internationalization-related errors for custom user fields, I was able to get rid of translation errors for custom traits (email, first name, and last name from the email-password quick start schema) on the registration form (flowType="registration") while retaining the default UI input labels by using the following custom translation configuration:

const customTranslations: CustomLanguageFormats = {
  en: {
    ...locales.en,
    'identities.messages.1070002': '',
  },
};

I tried using an empty string as the value after noticing that all custom traits had the same id (1070002), which made it impossible to specify each identifier separately. My environment is Node 20.9.0, NextJS 14.0.1, Ory Kratos v1.0.0 (self-hosted in Docker on my local machine), and @ory/elements 0.1.0-beta.12.

  • 👍2
1xtr commented

And why ID is same?
image
so always Error in console

Error: [@formatjs/intl Error FORMAT_ERROR] Error formatting message: "identities.messages.1070002", using default message as fallback.
MessageID: identities.messages.1070002
Default Message: Username
Description: undefined

And of course, in translate we set both field if provide field identities.messages.1070002

const customTranslations: CustomLanguageFormats = {
  en: {
    ...locales.en,
    'login.title': 'Login',
    // reg form email and username both change
    // 'identities.messages.1070002': 'Email', 
    'identities.messages.1070004': 'Email',
  },
}
  • 👍2