Escapado commented 1 year ago

Feature request

I would like to request the option to localize error and info messages for e-mail auth.

Is your feature request related to a problem? Please describe.

I am using the german localization of the auth ui. However if invalid credentials are entered the error message will be displayed in english. Same goes for the info message that is displayed if a user resets their password.

Describe the solution you'd like

I would like to be able to provide localization strings for all the different messages that the ui might display.

Describe alternatives you've considered

Currently my workaround is to hide the messages and append a pseudo element to display a different error. This feels incredibly janky.

Screenshot from 2022-12-13 23-28-57

PhilBookst commented 1 year ago

1 for me, it's really weird when all of the UI is in german but then an english error pops up.

carlosstenzel commented 1 year ago

@MildTomato can you tell if there is any option?

silentworks commented 1 year ago

@carlosstenzel please read issue #97 and see what I mentioned in point 2.

konhi commented 1 year ago

MildTomato commented 1 year ago

Sorry for late response.

Yep, i agree this is really related to https://github.com/supabase/gotrue/issues/915 as @konhi mentions, so we can assign translations easily to error codes.

hmmhmmhm commented 1 year ago

I needed the translation urgently, so I wrote the following temporary code. If someone needs translated error messages in a hurry, you might want to consider using the code below.

// * Supabase Auth Error Message Translation
useEffect(() => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type !== "childList" || mutation.addedNodes.length === 0)
        return;

      for (const node of mutation.addedNodes) {
        if (
          node instanceof HTMLElement &&
          (node.classList.contains("supabase-account-ui_ui-message") ||
            node.classList.contains("supabase-auth-ui_ui-message"))
        ) {
          const originErrorMessage = node.innerHTML.trim();

          let translatedErrorMessage = "<DEFAULT MESSAGE>";
          switch (originErrorMessage) {
            case "To signup, please provide your email":
              translatedErrorMessage = "";
              break;
            case "Signup requires a valid password":
              translatedErrorMessage = "";
              break;
            case "User already registered":
              translatedErrorMessage = "";
              break;
            case "Only an email address or phone number should be provided on signup.":
              translatedErrorMessage = "";
              break;
            case "Signups not allowed for this instance":
              translatedErrorMessage = "";
              break;
            case "Email signups are disabled":
              translatedErrorMessage = "";
              break;
            case "Email link is invalid or has expired":
              translatedErrorMessage = "";
              break;
            case "Token has expired or is invalid":
              translatedErrorMessage = "";
              break;
            case "The new email address provided is invalid":
              translatedErrorMessage = "";
              break;
            case "Password should be at least 6 characters":
              translatedErrorMessage = "";
              break;
            case "Invalid login credentials":
              translatedErrorMessage = "";
              break;
          }

          if (!document.querySelector("#auth-forgot-password")) {
            node.innerHTML = translatedErrorMessage;
          }
        }
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}, []);

caipicoder commented 1 year ago

Thanks for sharing 🙏

Le ven. 28 avr. 2023 à 05:49, hmmhmmhm @.***> a écrit :

I needed the translation urgently, so I wrote the following temporary code. If someone needs translated error messages in a hurry, you might want to consider using the code below.

// * Supabase Auth Error Message TranslationuseEffect(() => { const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type !== "childList" || mutation.addedNodes.length === 0) return;
  for (const node of mutation.addedNodes) {
    if (
      node instanceof HTMLElement &&
      node.classList.contains("supabase-auth-ui_ui-message")
    ) {
      const originErrorMessage = node.innerHTML.trim();

      let translatedErrorMessage = "<DEFAULT MESSAGE>";
      switch (originErrorMessage) {
        case "To signup, please provide your email":
          translatedErrorMessage = "";
          break;
        case "Signup requires a valid password":
          translatedErrorMessage = "";
          break;
        case "User already registered":
          translatedErrorMessage = "";
          break;
        case "Only an email address or phone number should be provided on signup.":
          translatedErrorMessage = "";
          break;
        case "Signups not allowed for this instance":
          translatedErrorMessage = "";
          break;
        case "Email signups are disabled":
          translatedErrorMessage = "";
          break;
        case "Email link is invalid or has expired":
          translatedErrorMessage = "";
          break;
        case "Token has expired or is invalid":
          translatedErrorMessage = "";
          break;
        case "The new email address provided is invalid":
          translatedErrorMessage = "";
          break;
        case "Password should be at least 6 characters":
          translatedErrorMessage = "";
          break;
      }

      if (!document.querySelector("#auth-forgot-password")) {
        node.innerHTML = translatedErrorMessage;
      }
    }
  }
});
});

observer.observe(document.body, { childList: true, subtree: true, });}, []);

— Reply to this email directly, view it on GitHub https://github.com/supabase/auth-ui/issues/86#issuecomment-1526945755, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABA5QRJSLZC4NRI2NB2DX3XDM45ZANCNFSM6AAAAAAS5XWJSY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

hmmhmmhm commented 1 year ago

While working on this, I noticed something very strange: out of all the messages I get from gotrue, only one is translated into multiple languages. (The message appears to be related to sending a password reset email.) Is this by design, and why is only this message translated?

silentworks commented 1 year ago

@hmmhmmhm that's interesting, I didn't know this was even translated. We will be working on Auth codes over the coming months to allow for better i18n support.

tgraveleau commented 1 year ago

I ran into the issue too and maybe a good fix would be to add a code field on the error and to document all codes so each of us can handle them as he wants.