topiray-auth-react 1.1.3 → 1.1.4

package/README.md

@@ -14,6 +14,7 @@ A comprehensive, themeable React component library for authentication flows. Bui
 - 🔐 **Complete Auth Flow** - Sign in/up, 2FA, email verification, password reset
 - ⚡ **TypeScript** - Full type safety and IntelliSense support
 - 🎯 **Tree Shakeable** - Import only what you need
+- 🌐 **i18n Support** - Built-in internationalization with customizable translations
 
 <img width="1910" height="892" alt="image" src="https://github.com/user-attachments/assets/1eb04b72-be57-477a-96de-2879d2fc9191" />
 <img width="1910" height="892" alt="image" src="https://github.com/user-attachments/assets/089695f9-9558-4cea-af24-fec94ecd2ebb" />
@@ -750,6 +751,195 @@ const handleSocialLogin = (provider: 'google' | 'apple' | 'facebook') => {
 - **High Contrast**: Colors meet WCAG contrast requirements
 - **Reduced Motion**: Respects user's motion preferences
 
+## Internationalization (i18n)
+
+All auth components support internationalization out of the box. English is the default language. You can provide custom translations for any language by wrapping your app with the `I18nProvider`.
+
+### Default Behavior (English)
+
+Without any i18n configuration, all components render in English. No setup is required.
+
+### Adding a New Language
+
+1. Create a translation JSON file following the same structure as the built-in English translations. All keys live under the `topiray.auth` namespace:
+
+```json
+// fr.json
+{
+  "topiray": {
+    "auth": {
+      "signIn": {
+        "title": "Se connecter",
+        "emailPlaceholder": "E-mail",
+        "passwordPlaceholder": "Mot de passe",
+        "submitButton": "Continuer",
+        "submittingButton": "Connexion en cours...",
+        "dividerText": "ou se connecter avec",
+        "forgotPassword": "Mot de passe oublié ?",
+        "noAccount": "Vous n'avez pas de compte ?",
+        "signUpLink": "S'inscrire"
+      },
+      "signUp": {
+        "title": "Créez votre compte",
+        "emailPlaceholder": "E-mail",
+        "passwordPlaceholder": "Mot de passe",
+        "submitButton": "Créer un compte",
+        "submittingButton": "Création du compte...",
+        "dividerText": "ou s'inscrire avec",
+        "hasAccount": "Vous avez déjà un compte ?",
+        "signInLink": "Se connecter"
+      },
+      "forgottenPassword": {
+        "title": "Mot de passe oublié ?",
+        "description": "Entrez l'adresse e-mail associée à votre compte et nous vous enverrons un lien unique pour réinitialiser votre mot de passe.",
+        "emailPlaceholder": "E-mail",
+        "submitButton": "Réinitialiser le mot de passe",
+        "submittingButton": "Envoi en cours..."
+      },
+      "resetPassword": {
+        "title": "Réinitialiser votre mot de passe",
+        "description": "Entrez votre nouveau mot de passe ci-dessous. Assurez-vous qu'il est sécurisé et comporte au moins 8 caractères.",
+        "newPasswordPlaceholder": "Nouveau mot de passe",
+        "confirmPasswordPlaceholder": "Confirmer le mot de passe",
+        "submitButton": "Réinitialiser le mot de passe",
+        "submittingButton": "Réinitialisation...",
+        "errors": {
+          "passwordRequired": "Le mot de passe est requis",
+          "confirmPasswordRequired": "La confirmation du mot de passe est requise",
+          "passwordsMismatch": "Les mots de passe ne correspondent pas"
+        }
+      },
+      "verifyEmail": {
+        "title": "Vérifiez votre e-mail",
+        "imageAlt": "Vérification de l'e-mail",
+        "descriptionPrefix": "Nous avons envoyé un e-mail de vérification à",
+        "descriptionSuffix": ". Veuillez cliquer sur le lien dans cet e-mail pour continuer.",
+        "emailFallback": "[votre e-mail]",
+        "checkInbox": "Vérifier ma boîte de réception",
+        "resendEmail": "Renvoyer l'e-mail",
+        "resendingEmail": "Envoi en cours..."
+      },
+      "twoFactor": {
+        "setup": {
+          "title": "Authentification multi-facteurs",
+          "description": "Utilisez votre application d'authentification pour scanner ce code QR. Si vous n'avez pas d'application d'authentification sur votre appareil, vous devrez en installer une maintenant.",
+          "learnMore": "En savoir plus",
+          "cantScanQr": "Impossible de scanner le code QR ?",
+          "qrPlaceholder": "Le code QR apparaîtra ici",
+          "manualEntryKey": "Clé de saisie manuelle :",
+          "cancelButton": "Annuler",
+          "nextButton": "Suivant",
+          "loadingButton": "Chargement..."
+        },
+        "verify": {
+          "title": "Entrez votre code de vérification",
+          "description": "Entrez le code que vous voyez dans votre application d'authentification",
+          "verifyButton": "Vérifier",
+          "verifyingButton": "Vérification...",
+          "helpText": "Vous pouvez aussi coller votre code à 6 chiffres"
+        },
+        "complete": {
+          "title": "Vous êtes prêt",
+          "descriptionLine1": "Vous pouvez maintenant utiliser l'application d'authentification mobile pour obtenir un code d'authentification chaque fois que vous vous connectez.",
+          "descriptionLine2": "Enregistrez ces codes de secours à usage unique dans un endroit sûr.",
+          "copyButton": "Copier",
+          "copiedButton": "Copié !",
+          "downloadButton": "Télécharger",
+          "footerText": "Ces codes de secours vous permettent de vous connecter si vous ne pouvez pas recevoir de SMS ou si vous n'avez pas accès à vos autres méthodes d'authentification à deux facteurs.",
+          "doneButton": "Terminé",
+          "loadingButton": "Chargement...",
+          "copyCodesButton": "Copier les codes",
+          "copiedCodesButton": "Copié !"
+        }
+      }
+    }
+  }
+}
+```
+
+2. Wrap your app with the `I18nProvider` and pass your translations:
+
+```tsx
+import { ThemeProvider, I18nProvider, defaultTheme } from 'topiray-auth-react'
+import fr from './i18n/fr.json'
+
+function App() {
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <I18nProvider translations={fr}>
+        {/* Your auth components */}
+      </I18nProvider>
+    </ThemeProvider>
+  )
+}
+```
+
+### Partial Translations
+
+You only need to provide the keys you want to override. Any missing keys will automatically fall back to the default English translations:
+
+```tsx
+import { I18nProvider } from 'topiray-auth-react'
+
+const customTranslations = {
+  topiray: {
+    auth: {
+      signIn: {
+        title: "Welcome back",
+        submitButton: "Log in"
+      }
+    }
+  }
+}
+
+<I18nProvider translations={customTranslations}>
+  {/* SignInForm will show "Welcome back" and "Log in", 
+      all other strings fall back to English */}
+</I18nProvider>
+```
+
+### Dynamic Language Switching
+
+Switch languages at runtime by updating the translations passed to `I18nProvider`:
+
+```tsx
+import { I18nProvider, en } from 'topiray-auth-react'
+import fr from './i18n/fr.json'
+import de from './i18n/de.json'
+
+const languages = { en, fr, de }
+
+function App() {
+  const [locale, setLocale] = useState('en')
+
+  return (
+    <I18nProvider translations={languages[locale]}>
+      <select onChange={(e) => setLocale(e.target.value)} value={locale}>
+        <option value="en">English</option>
+        <option value="fr">Français</option>
+        <option value="de">Deutsch</option>
+      </select>
+      {/* Your auth components */}
+    </I18nProvider>
+  )
+}
+```
+
+### Translation Keys Reference
+
+All translation keys are nested under `topiray.auth`. Here is the full key structure:
+
+| Namespace | Keys |
+|-----------|------|
+| `topiray.auth.signIn` | `title`, `emailPlaceholder`, `passwordPlaceholder`, `submitButton`, `submittingButton`, `dividerText`, `forgotPassword`, `noAccount`, `signUpLink` |
+| `topiray.auth.signUp` | `title`, `emailPlaceholder`, `passwordPlaceholder`, `submitButton`, `submittingButton`, `dividerText`, `hasAccount`, `signInLink` |
+| `topiray.auth.forgottenPassword` | `title`, `description`, `emailPlaceholder`, `submitButton`, `submittingButton` |
+| `topiray.auth.resetPassword` | `title`, `description`, `newPasswordPlaceholder`, `confirmPasswordPlaceholder`, `submitButton`, `submittingButton`, `errors.passwordRequired`, `errors.confirmPasswordRequired`, `errors.passwordsMismatch` |
+| `topiray.auth.verifyEmail` | `title`, `imageAlt`, `descriptionPrefix`, `descriptionSuffix`, `emailFallback`, `checkInbox`, `resendEmail`, `resendingEmail` |
+| `topiray.auth.twoFactor.setup` | `title`, `description`, `learnMore`, `cantScanQr`, `qrPlaceholder`, `manualEntryKey`, `cancelButton`, `nextButton`, `loadingButton` |
+| `topiray.auth.twoFactor.verify` | `title`, `description`, `verifyButton`, `verifyingButton`, `helpText` |
+| `topiray.auth.twoFactor.complete` | `title`, `descriptionLine1`, `descriptionLine2`, `copyButton`, `copiedButton`, `downloadButton`, `footerText`, `doneButton`, `loadingButton`, `copyCodesButton`, `copiedCodesButton` |
+
 ## Browser Support
 
 - Chrome 90+
@@ -757,6 +947,10 @@ const handleSocialLogin = (provider: 'google' | 'apple' | 'facebook') => {
 - Safari 14+
 - Edge 90+
 
+## Authors
+
+JayArrowz
+
 ## Contributing
 
 1. Fork the repository
@@ -765,7 +959,6 @@ const handleSocialLogin = (provider: 'google' | 'apple' | 'facebook') => {
 4. Add tests for new functionality
 5. Submit a pull request
 
-
 ## Support
 
 For questions and support:

package/dist/i18n/I18nProvider.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { TranslationDictionary } from './types';
+interface I18nContextType {
+    t: (key: string) => string;
+    translations: TranslationDictionary;
+}
+export declare const useTranslation: () => I18nContextType;
+interface I18nProviderProps {
+    children: React.ReactNode;
+    translations: TranslationDictionary;
+}
+export declare const I18nProvider: React.FC<I18nProviderProps>;
+export {};

package/dist/i18n/en.json.d.ts

@@ -0,0 +1,93 @@
+declare const _default: {
+  "topiray": {
+    "auth": {
+      "signIn": {
+        "title": "Sign in",
+        "emailPlaceholder": "Email",
+        "passwordPlaceholder": "Password",
+        "submitButton": "Continue",
+        "submittingButton": "Signing in...",
+        "dividerText": "or sign in with",
+        "forgotPassword": "Forgot Password?",
+        "noAccount": "Don't have an account?",
+        "signUpLink": "Sign up"
+      },
+      "signUp": {
+        "title": "Create your account",
+        "emailPlaceholder": "Email",
+        "passwordPlaceholder": "Password",
+        "submitButton": "Create Account",
+        "submittingButton": "Creating account...",
+        "dividerText": "or sign up with",
+        "hasAccount": "Already have an account?",
+        "signInLink": "Sign in"
+      },
+      "forgottenPassword": {
+        "title": "Forgot your password?",
+        "description": "Enter your email address associated to your account and we will send you a one time link to reset your password.",
+        "emailPlaceholder": "Email",
+        "submitButton": "Reset Password",
+        "submittingButton": "Sending..."
+      },
+      "resetPassword": {
+        "title": "Reset your password",
+        "description": "Enter your new password below. Make sure it's secure and at least 8 characters long.",
+        "newPasswordPlaceholder": "New Password",
+        "confirmPasswordPlaceholder": "Confirm Password",
+        "submitButton": "Reset Password",
+        "submittingButton": "Resetting...",
+        "errors": {
+          "passwordRequired": "Password is required",
+          "confirmPasswordRequired": "Confirm password is required",
+          "passwordsMismatch": "Passwords do not match"
+        }
+      },
+      "verifyEmail": {
+        "title": "Verify your email",
+        "imageAlt": "Email verification",
+        "descriptionPrefix": "We sent a verification email to",
+        "descriptionSuffix": ". Please tap the link inside that email to continue.",
+        "emailFallback": "[your email]",
+        "checkInbox": "Check my inbox",
+        "resendEmail": "Resend Email",
+        "resendingEmail": "Sending..."
+      },
+      "twoFactor": {
+        "setup": {
+          "title": "Multi-Factor Authentication",
+          "description": "Use your authentication app to scan this QR code. If you don't have an authentication app on your device, you'll need to install one now.",
+          "learnMore": "Learn more",
+          "cantScanQr": "Can't scan the QR code?",
+          "qrPlaceholder": "QR Code will appear here",
+          "manualEntryKey": "Manual entry key:",
+          "cancelButton": "Cancel",
+          "nextButton": "Next",
+          "loadingButton": "Loading..."
+        },
+        "verify": {
+          "title": "Enter your verification code",
+          "description": "Enter the code that you see in your authenticator app",
+          "verifyButton": "Verify",
+          "verifyingButton": "Verifying...",
+          "helpText": "You can also paste your 6-digit code"
+        },
+        "complete": {
+          "title": "You're all set",
+          "descriptionLine1": "Now you can use the mobile authenticator app to get an authentication code any time you log in.",
+          "descriptionLine2": "Save these single-use backup codes in a safe place.",
+          "copyButton": "Copy",
+          "copiedButton": "Copied!",
+          "downloadButton": "Download",
+          "footerText": "These backup codes let you log in if you can't receive a text message or don't have access to any of your other two-factor authentication methods.",
+          "doneButton": "Done",
+          "loadingButton": "Loading...",
+          "copyCodesButton": "Copy Codes",
+          "copiedCodesButton": "Copied!"
+        }
+      }
+    }
+  }
+}
+;
+
+export default _default;

package/dist/i18n/index.d.ts

@@ -0,0 +1,3 @@
+export { I18nProvider, useTranslation } from './I18nProvider';
+export type { TranslationDictionary } from './types';
+export { default as en } from './en.json';

package/dist/i18n/types.d.ts

@@ -0,0 +1 @@
+export type TranslationDictionary = Record<string, unknown>;

package/dist/index.d.ts

@@ -9,6 +9,9 @@ export { AlertMessage } from './components/common/AlertMessage';
 export { BackArrow } from './components/common/BackArrow';
 export { SocialLoginButtons } from './components/common/SocialLoginButtons';
 export type { ButtonProps, AlertMessageProps, BackArrowProps, SocialLoginButtonsProps } from './components/common/types';
+export { I18nProvider, useTranslation } from './i18n/I18nProvider';
+export type { TranslationDictionary } from './i18n/types';
+export { default as en } from './i18n/en.json';
 export { AuthCard } from './components/auth/AuthCard';
 export { SignInForm } from './components/auth/SignInForm';
 export { SignUpForm } from './components/auth/SignUpForm';