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”.

Custom Translations
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>
    );
};