Gen3: Use i18next instead of loc

scripts/buildtools/commands/verify-package.js

@@ -17,8 +17,8 @@ const EXPECTED_BUNDLE_SIZES = {
   'okta-sign-in.oie.min.js': 1.3 * MB,
   'okta-sign-in.polyfill.js': 504 * KB,
   'okta-sign-in.polyfill.min.js': 108 * KB,
-  'okta-sign-in.next.js': 1.7 * MB,
-  'okta-sign-in.next.no-polyfill.js': 1.8 * MB,
+  'okta-sign-in.next.js': 1.8 * MB,
+  'okta-sign-in.next.no-polyfill.js': 1.7 * MB,
   'okta-sign-in.debugger.min.js': 170 * KB,
 };
 

src/util/Bundles.ts

@@ -221,13 +221,17 @@ export default {
     this.currentLanguage = null;
   },
 
-  loadLanguage: async function(language: string, overrides: i18nOptions, assets: Assets, supportedLanguages: string[]): Promise<void> {
+  loadLanguage: async function(
+    language: string, overrides: i18nOptions, assets: Assets, supportedLanguages: string[],
+    omitDefaultKeys?: (key: string) => boolean
+  ): Promise<void> {
     const parsedOverrides = parseOverrides(overrides);
     const lowerCaseLanguage = language.toLowerCase();
     const bundles = await getBundles(language, assets, supportedLanguages);
     // Always extend from the built in defaults in the event that some
     // properties are not translated
-    this.login = _.extend({}, login, bundles.login);
+    const loginFiltered = omitDefaultKeys ? _.omit(login, (_, k) => omitDefaultKeys(k)) : login;
+    this.login = _.extend({}, loginFiltered, bundles.login);
     this.country = _.extend({}, country, bundles.country);
     this.courage = _.extend({}, login, bundles.login);
     if (parsedOverrides[lowerCaseLanguage]) {

src/util/loc.ts

@@ -48,7 +48,7 @@ declare global {
  * @param  {Boolean} [ignoreIncorrectParams] If true, a custom 'okta-i18n-error' event would not be dispatched
  * @return {String} The localized value
  */
-export const loc = function (
+const localize = function (
   key: string,
   bundleName: BundleName = 'login',
   params: Array<string | number | boolean | unknown> = [],
@@ -128,7 +128,7 @@ function getRawLocale() {
  * @param {String} bundleName The i18n bundle name
  * @param {String} reason Could be 'bundle' (Bundle not found), 'key' (Key not found) or 'parameters' (Parameters mismatch).
  */
-function emitL10nError(key: string, bundleName: string, reason: string) {
+export function emitL10nError(key: string, bundleName: string, reason: string) {
   const event = createCustomEvent('okta-i18n-error', {
     detail: {
       type: 'l10n-error',
@@ -193,3 +193,20 @@ function sprintf(value: string, params: Array<string | number | boolean | unknow
 
   return newValue;
 }
+
+/**
+ * Add ability to override global `loc` util used in `v2/ion/*`, `util/*` etc.
+ */
+type Loc = (
+  key: string,
+  bundleName?: string,
+  params?: Array<string | number | boolean | undefined>
+) => string;
+
+let loc: Loc = localize;
+
+export const setLocUtil = (newLoc: Loc) => {
+  loc = newLoc;
+};
+
+export { loc };

src/v3/jest.setup.js

@@ -17,6 +17,7 @@ import {
   toHaveBeenCalledBefore,
 } from 'jest-extended';
 import mockBundles from '../util/Bundles.ts';
+import { setLocUtil } from '../util/loc.ts';
 
 expect.extend({
   toBeFalse,
@@ -40,9 +41,12 @@ global.DEBUG = false;
 
 expect.addSnapshotSerializer(createSerializer({ includeStyles: false }));
 
-jest.mock('util/loc', () => ({
-  loc: jest.fn().mockImplementation(
+jest.mock('src/util/locUtil', () => {
+  const originalModule = jest.requireActual('src/util/locUtil');
+  const loc = jest.fn().mockImplementation(
     // eslint-disable-next-line no-unused-vars
     (key, bundle, params) => (mockBundles.login[key] ? key : new Error(`Invalid i18n key: ${key}`)),
-  ),
-}));
+  );
+  setLocUtil(loc);
+  return { ...originalModule, loc };
+});

src/v3/package.json

@@ -56,6 +56,7 @@
     "dompurify": "^2.5.5",
     "duo_web_sdk": "https://github.com/duosecurity/duo_web_sdk.git",
     "html-react-parser": "^3.0.9",
+    "i18next": "^23.14.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "preact": "^10.20.1",

src/v3/src/components/AuthHeader/AuthHeader.tsx

@@ -22,9 +22,8 @@ import Image from '../Image';
 
 // TODO: maybe extract to util class if used reused
 const shouldRenderAuthCoin = (props?: AuthCoinProps): boolean => {
-  const authCoinConfiguration = getAuthCoinConfiguration();
   const authCoinConfigByAuthKey = props?.authenticatorKey
-    && authCoinConfiguration[props?.authenticatorKey];
+    && getAuthCoinConfiguration()[props.authenticatorKey];
 
   return typeof authCoinConfigByAuthKey !== 'undefined'
     || typeof props?.url !== 'undefined';

src/v3/src/components/Widget/index.tsx

@@ -64,6 +64,7 @@ import {
   getLanguageCode,
   getLanguageDirection,
   getOdysseyTranslationOverrides,
+  initDefaultLanguage,
   isAndroidOrIOS,
   isAuthClientSet,
   isConfigRegisterFlow,
@@ -72,6 +73,7 @@ import {
   loadLanguage,
   SessionStorage,
   triggerEmailVerifyCallback,
+  unloadLanguage,
 } from '../../util';
 import { getEventContext } from '../../util/getEventContext';
 import { stylisPlugins } from '../../util/stylisPlugins';
@@ -149,10 +151,17 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
     };
   }, [brandColors, customTheme, languageDirection]);
 
+  useOnce(() => {
+    // Load default language.
+    // Should be called before initial render
+    initDefaultLanguage();
+  });
+
   // on unmount, remove the language
   useEffect(() => () => {
     if (Bundles.isLoaded(languageCode)) {
       Bundles.remove();
+      unloadLanguage(languageCode);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

src/v3/src/transformer/password/passwordSettingsUtils.test.ts

@@ -14,7 +14,7 @@ import { PASSWORD_REQUIREMENTS_KEYS } from '../../constants';
 import { ComplexityRequirements } from '../../types';
 import { getComplexityItems } from './passwordSettingsUtils';
 
-jest.mock('util/loc', () => ({
+jest.mock('../../util/locUtil', () => ({
   loc: jest.fn().mockImplementation(
     (key) => key,
   ),

src/v3/src/util/getPasswordExpiryContentTitleAndParams.ts

@@ -15,7 +15,7 @@ import { loc } from './locUtil';
 
 export const getPasswordExpiryContentTitleAndParams = (daysToExpiry = -1): TitleElement['options'] => {
   if (daysToExpiry > 0) {
-    return { content: loc('password.expiring.title', 'login', [`${daysToExpiry}`]) };
+    return { content: loc('password.expiring.title', 'login', [daysToExpiry]) };
   }
 
   if (daysToExpiry === 0) {

src/v3/src/util/i18next.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import i18next from 'i18next';
+
+import config from '../../../config/config.json';
+
+const i18ni = i18next.createInstance();
+
+const ns = ['login', 'country'];
+const defaultNS = 'login';
+
+i18ni.init({
+  defaultNS,
+  ns,
+  fallbackLng: config.defaultLanguage,
+  load: 'currentOnly',
+  keySeparator: false,
+  nsSeparator: ':',
+  interpolation: {
+    prefix: '{',
+    suffix: '}',
+    // No need to escape
+    // Need to use raw value for phone numbers containing `‎`
+    // React is already safe from XSS
+    escapeValue: false,
+    skipOnVariables: false, // to handle translations that use nesting
+  },
+});
+
+export { i18ni as i18next };

src/v3/src/util/languageUtils.ts

@@ -12,10 +12,24 @@
 
 import { OdysseyI18nResourceKeys, odysseyI18nResourceKeysList } from '@okta/odyssey-react-mui';
 
+import config from '../../../config/config.json';
+import { LanguageCode } from '../../../types';
 import Bundles from '../../../util/Bundles';
 import { WidgetProps } from '../types';
+import { isDevelopmentEnvironment } from './environmentUtils';
+import { i18next } from './i18next';
 import { getLanguageCode, getSupportedLanguages } from './settingsUtils';
 
+export const initDefaultLanguage = () => {
+  // Load translations for default language from Bundles to i18next
+  const languageCode = Bundles.currentLanguage ?? config.defaultLanguage;
+  const isDefaultLanguage = !Bundles.currentLanguage;
+  if (isDefaultLanguage && !i18next.hasResourceBundle(languageCode, 'login')) {
+    i18next.addResourceBundle(languageCode, 'login', Bundles.login);
+    i18next.addResourceBundle(languageCode, 'country', Bundles.country);
+  }
+};
+
 export const loadLanguage = async (widgetProps: WidgetProps): Promise<void> => {
   const { i18n = {}, assets: { baseUrl, rewrite } = {} } = widgetProps;
   const languageCode = getLanguageCode(widgetProps);
@@ -29,10 +43,31 @@ export const loadLanguage = async (widgetProps: WidgetProps): Promise<void> => {
     assetsBaseUrl = assetsBaseUrl.substring(0, assetsBaseUrl.length - 1);
   }
 
-  return Bundles.loadLanguage(languageCode, i18n, {
+  // Don't reuse plural forms in English for other languages.
+  // See https://www.i18next.com/translation-function/plurals
+  const pluralSuffixes = ['_one', '_other'];
+  const omitDefaultKeys = (key: string) => pluralSuffixes.some((s) => key.endsWith(s));
+  await Bundles.loadLanguage(languageCode, i18n, {
     baseUrl: assetsBaseUrl,
     rewrite: rewrite ?? ((val) => val),
-  }, supportedLanguages);
+  }, supportedLanguages, omitDefaultKeys);
+
+  // Load translations from Bundles to i18next and change language
+  i18next.addResourceBundle(languageCode, 'login', Bundles.login);
+  i18next.addResourceBundle(languageCode, 'country', Bundles.country);
+  i18next.changeLanguage(languageCode);
+};
+
+export const unloadLanguage = (languageCode: LanguageCode) => {
+  // Remove translations from i18next
+  if (languageCode !== config.defaultLanguage && !isDevelopmentEnvironment()) {
+    // For dev environment with HMR don't clear translations.
+    // Otherwise during HMR widget language will be reset to default one.
+    // `Bundles.remove()` also doesn't reset bundles to default language.
+    i18next.removeResourceBundle(languageCode, 'login');
+    i18next.removeResourceBundle(languageCode, 'country');
+  }
+  i18next.changeLanguage(undefined);
 };
 
 export const getOdysseyTranslationOverrides = (): Partial<OdysseyI18nResourceKeys> => (