Custom translations can serve two main purposes:
- Support other languages
- Customize the standard texts of the components
For both cases, you add your custom translation by creating your own translation file. To see the structure of a translation file, please take a look at our default translations for “en” here.
By setting the autoDetectLanguage
to true in the CorbadoProvider
component, the component can automatically detect a user’s browser language and adjust all wordings accordingly.
If a language is not supported by Corbado yet, the component will default to “en”.
const en = {
signup: {
"signup-init": {
"signup-init": {
header: "Let's create an account",
subheader: "to check ",
text_login: "Would you like to login? ",
button_submit: "Sign up",
textField_fullName: "Full Name",
text_divider: "or use social logins"
}
}
},
login: {
"login-init": {
"login-init": {
header: "Please login",
subheader: "to check ",
text_signup: "Would you like to create an account? ",
button_signup: "Sign up",
button_submit: "Login"
}
}
},
passkeysList: {
button_createPasskey: "You can create passkeys here.",
field_credentialId: "ID: ",
field_status: "Status of Passkey: "
}
};
export default en;
To use this translation now, supply it to the CorbadoProvider
(see your framework’s integration guide for more details).
import { CorbadoProvider } from "@corbado/react";
import englishTranslations from "./translations/en";
const App = () => {
return (
<CorbadoProvider
projectId="pro-1234567890"
customTranslations={{
en: englishTranslations,
}}
>
/** Your application **/
</CorbadoProvider>
);
};
Responses are generated using AI and may contain mistakes.