auth-ui
auth-ui copied to clipboard
supabase-community
Error message localization
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.
- 1 for me, it's really weird when all of the UI is in german but then an english error pops up.
@carlosstenzel please read issue #97 and see what I mentioned in point 2.
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.
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,
});
}, []);
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: @.***>
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?
@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.
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.
Same here, could be an important feature to add. (thanks for the temporary code until the feature.)
