React: Package Translations (#62)

* added translation file

* add translation params

* updated react example

* refactored component structure

* added german translation

* resolved PR review

packages/react/src/flows/PasskeyLoginWithEmailOTPFallbackFlow.tsx

@@ -1,9 +1,9 @@
 import { PasskeyLoginWithEmailOtpFallbackScreens } from '@corbado/web-core';
 
-import { EmailOTP } from '../screens/EmailOTP';
-import { InitiateLogin } from '../screens/InitiateLogin';
-import { PasskeyAppend } from '../screens/PasskeyAppend';
-import { PasskeyError } from '../screens/PasskeyError';
+import { EmailOTP } from '../screens/login/EmailOTP';
+import { InitiateLogin } from '../screens/login/InitiateLogin';
+import { PasskeyError } from '../screens/login/PasskeyError';
+import { PasskeyAppend } from '../screens/shared/PasskeyAppend';
 
 export const PasskeyLoginWithEmailOTPFallbackFlow = {
   [PasskeyLoginWithEmailOtpFallbackScreens.Start]: InitiateLogin,

packages/react/src/flows/PasskeySignupWithEmailOTPFallbackFlow.tsx

@@ -1,12 +1,12 @@
 import { PasskeySignupWithEmailOtpFallbackScreens } from '@corbado/web-core';
 
-import { EmailOTP } from '../screens/EmailOTP';
-import { InitiateSignup } from '../screens/InitiateSignup';
-import { PasskeyAppend } from '../screens/PasskeyAppend';
-import { PasskeyBenefits } from '../screens/PasskeyBenefits';
-import { PasskeyError } from '../screens/PasskeyError';
-import { PasskeySignup } from '../screens/PasskeySignup';
-import { PasskeyWelcome } from '../screens/PasskeyWelcome';
+import { PasskeyAppend } from '../screens/shared/PasskeyAppend';
+import { EmailOTP } from '../screens/signup/EmailOTP';
+import { InitiateSignup } from '../screens/signup/InitiateSignup';
+import { PasskeyBenefits } from '../screens/signup/PasskeyBenefits';
+import { PasskeyError } from '../screens/signup/PasskeyError';
+import { PasskeySignup } from '../screens/signup/PasskeySignup';
+import { PasskeyWelcome } from '../screens/signup/PasskeyWelcome';
 
 export const PasskeySignupWithEmailOTPFallbackFlow = {
   [PasskeySignupWithEmailOtpFallbackScreens.Start]: InitiateSignup,

packages/react/src/i18n/index.ts

@@ -2,16 +2,18 @@ import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
+import TRANSLATIONS_DE from './locales/de';
 import TRANSLATIONS_EN from './locales/en';
 
-const defaultLanguage = 'en';
+export const defaultLanguage = 'en';
 
 void i18n
   .use(initReactI18next)
   .use(LanguageDetector)
   .init({
     resources: {
       en: { translation: TRANSLATIONS_EN },
+      de: { translation: TRANSLATIONS_DE },
     },
     keySeparator: '.',
     fallbackLng: defaultLanguage,
@@ -38,17 +40,40 @@ const setI18nLanguage = (lang: string): void => {
 /**
  * @function handleDynamicLocaleSetup An async function that handles setting the language of the user to the preferred locale.
  *
- * @param {*} [locale=navigator.language] This is the locale a user wants to set. It deefaults to the locale of the user's browser if no value is padded. e.g `de-DE`, `en-GB`
+ * @param {boolean} [shouldAutoDetectLanguage=true] This is a boolean that determines if the language of the user should be auto detected. It defaults to true if no value is passed.
+ * @param {string} [defaultLang=defaultLanguage] This is the default language to be used if the language of the user cannot be auto detected. It defaults to `en` if no value is passed.
+ * @param {object} [customTranslations={}] This is an object containing custom translations. Each key should be a language code and each value should be an object containing the translations for that language.
  * @return {*} Promise<void>
  */
-export const handleDynamicLocaleSetup = (locale = navigator.language) => {
-  const lang = getLanguage(locale.substring(0, 2));
+export const handleDynamicLocaleSetup = (
+  shouldAutoDetectLanguage = true,
+  defaultLang = defaultLanguage,
+  customTranslations: Record<string, object> | null = null,
+) => {
+  const locale = window.navigator.language;
+
+  // If the language of the user is the same as the default language and there are no custom translations, do nothing
+  if (
+    shouldAutoDetectLanguage &&
+    defaultLang === defaultLanguage &&
+    locale === defaultLanguage &&
+    !customTranslations
+  ) {
+    return;
+  }
+
+  // Add custom translations
+  for (const [lang, translations] of Object.entries(customTranslations ?? {})) {
+    i18n.addResourceBundle(lang, 'translation', translations, true, true);
+  }
+
+  const language = shouldAutoDetectLanguage ? getLanguage(locale) : defaultLang;
   try {
-    void i18n.changeLanguage(lang);
-    setI18nLanguage(lang);
+    void i18n.changeLanguage(language);
+    setI18nLanguage(language);
   } catch {
-    void i18n.changeLanguage(defaultLanguage);
-    setI18nLanguage(defaultLanguage);
+    void i18n.changeLanguage(defaultLang);
+    setI18nLanguage(defaultLang);
   }
 };
 

packages/react/src/i18n/locales/de.ts

@@ -0,0 +1,94 @@
+const de = {
+  common: {
+    passkeyPrompt: {
+      header: 'Schneller anmelden mit',
+      button_showPasskeyBenefits: 'Passkeys',
+      button_start: 'Aktivieren',
+      button_skip: 'Vielleicht später',
+    },
+  },
+  signup: {
+    start: {
+      header: 'Erstellen Sie Ihr Konto',
+      subheader: 'Sie haben bereits ein Konto?',
+      button_login: 'Anmelden',
+      button_submit: 'Mit E-Mail fortfahren',
+      textField_name: 'Name',
+      textField_email: 'E-Mail-Adresse',
+      validationError_name: 'Bitte geben Sie einen Namen ein',
+      validationError_email: 'Bitte geben Sie eine gültige E-Mail ein',
+    },
+    passkey: {
+      header: 'Lassen Sie uns einrichten mit',
+      body: 'Wir werden ein Konto für',
+      button_showPasskeyBenefits: 'Passkeys',
+      button_start: 'Konto erstellen',
+      button_emailOtp: 'Einmalcode per E-Mail senden',
+      button_back: 'Zurück',
+    },
+    passkeyBenefits: {
+      header: 'Passkeys',
+      body_introduction:
+        'Mit Passkeys müssen Sie sich keine komplexen Passwörter mehr merken. Melden Sie sich sicher an, indem Sie',
+      body_loginMethods: 'Face ID, Touch ID oder Sperrcode verwenden.',
+      button_start: 'Passkey erstellen',
+      button_skip: 'Vielleicht später',
+    },
+    passkeySuccess: {
+      header: 'Willkommen!',
+      subheader: 'Passkey erstellt',
+      body_text1: 'Sie können Ihre Identität nun mit Ihrem',
+      body_text2: 'Passkey oder per E-Mail Einmalcode',
+      body_text3: 'bei der Anmeldung bestätigen.',
+      button: 'Fortsetzen',
+    },
+    passkeyError: {
+      header: 'Lassen Sie uns einrichten',
+      body_errorMessage1: 'Das Erstellen Ihres Kontos war nicht möglich mit',
+      body_errorMessage2: 'Versuchen Sie es erneut oder melden Sie sich mit E-Mail Einmalcode an.',
+      button_showPasskeyBenefits: 'Passkeys',
+      button_retry: 'Erneut versuchen',
+      button_emailOtp: 'Einmalcode per E-Mail senden',
+      button_back: 'Zurück',
+      button_cancel: 'Abbrechen',
+    },
+    emailOtp: {
+      header: 'Geben Sie den Code ein, um das Konto zu erstellen',
+      body_text1: 'Wir haben gerade einen Einmalcode gesendet an ',
+      body_text2: 'Der Code läuft in Kürze ab, bitte geben Sie ihn bald ein.',
+      validationError_otp: 'Der OTP ist falsch',
+      button_verify: 'Fortsetzen',
+      button_sendOtpAgain: 'Einmalcode erneut senden',
+      button_back: 'Abbrechen',
+    },
+  },
+  login: {
+    start: {
+      header: 'Willkommen zurück!',
+      subheader: 'Sie haben noch kein Konto?',
+      button_signup: 'Konto erstellen',
+      button_submit: 'Mit E-Mail fortfahren',
+      textField_email: 'E-Mail-Adresse',
+      validationError_email: 'Bitte geben Sie eine gültige E-Mail ein',
+    },
+    passkeyError: {
+      header: 'Anmeldung mit Passkeys',
+      body: 'Anmeldung mit Passkeys nicht möglich. Versuchen Sie es erneut oder melden Sie sich mit E-Mail Einmalcode an.',
+      button_retry: 'Erneut versuchen',
+      button_emailOtp: 'Einmalcode per E-Mail senden',
+      button_back: 'Zurück',
+      button_cancel: 'Abbrechen',
+    },
+    emailOtp: {
+      header: 'Geben Sie den Code ein, um sich anzumelden',
+      body_text1: 'Wir haben gerade einen Einmalcode gesendet an ',
+      body_text2: 'Der Code läuft in Kürze ab, bitte geben Sie ihn bald ein.',
+      validationError_otp: 'Der OTP ist falsch',
+      button_verify: 'Fortsetzen',
+      button_sendOtpAgain: 'Einmalcode erneut senden',
+      button_back: 'Abbrechen',
+    },
+  },
+};
+
+export default de;

packages/react/src/i18n/locales/en.ts

@@ -1,53 +1,93 @@
 const en = {
-  signup: {
-    header: 'Create your account',
-    'sub-header': 'You already have an account? <1>Log in</1>',
-    continue_email: 'Continue with email',
-  },
-  passkey_signup: {
-    header: 'Let’s get you set up with <1>Passkeys</1>',
-    'sub-header': 'We’ll create an account for <1>{{email_address}}</1>.',
-    primary_btn: 'Create your account',
-    secondary_btn: 'Send email one time code',
-    tertiary_btn: 'Back',
-  },
-  create_passkey: {
-    header: 'Passkeys',
-    body: 'With passkeys, you don’t need to remember complex passwords anymore. Log in securely to using <1>Face ID, Touch ID or screen lock code</1>.',
-    primary_btn: 'Create passkey',
-    secondary_btn: 'Maybe later',
-  },
-  create_passkey_error: {
-    header: 'Let’s get you set up',
-    body: 'Creating your account with <1>passkeys</1> not possible. Try again or log in with email one time code.',
-    primary_btn: 'Try again',
-    secondary_btn: 'Send email one time code',
-    tertiary_btn: 'Back',
+  common: {
+    passkeyPrompt: {
+      header: 'Log in even faster with',
+      button_showPasskeyBenefits: 'Passkeys',
+      button_start: 'Activate',
+      button_skip: 'Maybe later',
+    },
   },
-  create_passkey_success: {
-    header: 'Welcome!',
-    secondary_header: 'Passkey created',
-    body: 'You can now confirm your identity using your <1>passkey or via email one time code</1> when you log in.',
-  },
-  activate_passkey: {
-    header: 'Log in even faster with <1>Passkeys</1>',
-    primary_btn: 'Activate',
-    secondary_btn: 'Maybe later',
-  },
-  email_link: {
-    header: 'Enter code to create account',
-    body: 'We just sent a one time code to <1>email adress</1>. The code expires shortly, so please enter it soon.',
-    otp_required: 'Valid OTP required',
-  },
-  generic: {
-    name: 'Name',
-    email: 'Email address',
-    continue: 'Continue',
-    cancel: 'Cancel',
+  signup: {
+    start: {
+      header: 'Create your account',
+      subheader: 'You already have an account?',
+      button_login: 'Log in',
+      button_submit: 'Continue with email',
+      textField_name: 'Name',
+      textField_email: 'Email address',
+      validationError_name: 'Please enter a name',
+      validationError_email: 'Please enter a valid email',
+    },
+    passkey: {
+      header: "Let's get you set up with",
+      body: "We'll create an account for",
+      button_showPasskeyBenefits: 'Passkeys',
+      button_start: 'Create your account',
+      button_emailOtp: 'Send email one time code',
+      button_back: 'Back',
+    },
+    passkeyBenefits: {
+      header: 'Passkeys',
+      body_introduction:
+        "With passkeys, you don't need to remember complex passwords anymore. Log in securely by using",
+      body_loginMethods: 'Face ID, Touch ID or screen lock code.',
+      button_start: 'Create passkey',
+      button_skip: 'Maybe later',
+    },
+    passkeySuccess: {
+      header: 'Welcome!',
+      subheader: 'Passkey created',
+      body_text1: 'You can now confirm your identity using your',
+      body_text2: 'passkey or via email one time code',
+      body_text3: 'when you log in.',
+      button: 'Continue',
+    },
+    passkeyError: {
+      header: "Let's get you set up",
+      body_errorMessage1: 'Creating your account was not possible with',
+      body_errorMessage2: 'Try again or sign up with email one time code.',
+      button_showPasskeyBenefits: 'passkeys',
+      button_retry: 'Try again',
+      button_emailOtp: 'Send email one time code',
+      button_back: 'Back',
+      button_cancel: 'Cancel',
+    },
+    emailOtp: {
+      header: 'Enter code to create account',
+      body_text1: 'We just sent a one time code to ',
+      body_text2: 'The code expires shortly, so please enter it soon.',
+      validationError_otp: 'OTP is incorrect',
+      button_verify: 'Continue',
+      button_sendOtpAgain: 'Send one time code again',
+      button_back: 'Cancel',
+    },
   },
-  validation_errors: {
-    name: 'Please enter a name',
-    email: 'Please enter a valid email',
+  login: {
+    start: {
+      header: 'Welcome back!',
+      subheader: "Don't have and account yet?",
+      button_signup: 'Create account',
+      button_submit: 'Continue with email',
+      textField_email: 'Email address',
+      validationError_email: 'Please enter a valid email',
+    },
+    passkeyError: {
+      header: 'Log in with Passkeys',
+      body: 'Login with passkeys not possible. Try again or log in with email one time code.',
+      button_retry: 'Try again',
+      button_emailOtp: 'Send email one time code',
+      button_back: 'Back',
+      button_cancel: 'Cancel',
+    },
+    emailOtp: {
+      header: 'Enter code to log in',
+      body_text1: 'We just sent a one time code to ',
+      body_text2: 'The code expires shortly, so please enter it soon.',
+      validationError_otp: 'OTP is incorrect',
+      button_verify: 'Continue',
+      button_sendOtpAgain: 'Send one time code again',
+      button_back: 'Cancel',
+    },
   },
 };
 

packages/react/src/index.tsx

@@ -6,13 +6,26 @@ import React from 'react';
 
 import FlowHandlerProvider from './contexts/FlowHandlerProvider';
 import UserDataProvider from './contexts/UserDataProvider';
+import { defaultLanguage as defaultAppLanguage, handleDynamicLocaleSetup } from './i18n';
 import { ScreensFlow } from './screens/ScreenFlow';
 
 interface Props {
   onLoggedIn: () => void;
+  defaultLanguage?: string;
+  autoDetectLanguage?: boolean;
+  customTranslations?: Record<string, object> | null;
 }
 
-const CorbadoAuthUI = ({ onLoggedIn }: Props) => {
+const CorbadoAuthUI = ({
+  onLoggedIn,
+  defaultLanguage = defaultAppLanguage,
+  autoDetectLanguage = true,
+  customTranslations = null,
+}: Props) => {
+  React.useEffect(() => {
+    handleDynamicLocaleSetup(autoDetectLanguage, defaultLanguage, customTranslations);
+  }, []);
+
   return (
     <div id='corbado-auth'>
       <div className='container'>