Fixed Default Language in i18n translation

packages/javascript/src/index.ts

@@ -176,6 +176,7 @@ export {default as resolveFlowTemplateLiterals} from './utils/resolveFlowTemplat
 export {default as countryCodeToFlagEmoji} from './utils/countryCodeToFlagEmoji';
 export {default as resolveLocaleDisplayName} from './utils/resolveLocaleDisplayName';
 export {default as resolveLocaleEmoji} from './utils/resolveLocaleEmoji';
+export {default as getBaseLanguage} from './utils/getBaseLanguage';
 export {default as buildValidatorFromRules} from './utils/buildValidatorFromRules';
 export {default as evaluateValidationRule, DEFAULT_VALIDATION_MESSAGE_KEYS} from './utils/evaluateValidationRule';
 export {default as processOpenIDScopes} from './utils/processOpenIDScopes';

packages/javascript/src/utils/getBaseLanguage.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with 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.
+ */
+
+/**
+ * Resolves a BCP 47 locale tag to its base (primary) language subtag, so that
+ * region-qualified tags compare equal to their bare form (e.g. "en-US" and "en"
+ * both resolve to "en"). Uses `Intl.Locale` when available, falling back to a
+ * simple split on the first "-".
+ *
+ * @param tag - BCP 47 locale tag to resolve (e.g. "en-US", "hi-IN", "en")
+ * @returns The lowercased base language subtag (e.g. "en", "hi")
+ *
+ * @example
+ * ```typescript
+ * getBaseLanguage('en-US') // 'en'
+ * getBaseLanguage('hi-IN') // 'hi'
+ * getBaseLanguage('en')    // 'en'
+ * ```
+ */
+export default function getBaseLanguage(tag: string): string {
+  try {
+    return new Intl.Locale(tag).language.toLowerCase();
+  } catch {
+    return tag.split('-')[0].toLowerCase();
+  }
+}

packages/react/src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx

@@ -1,7 +1,7 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import {resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';
+import {getBaseLanguage, resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';
 import {FC, ReactElement, ReactNode, useEffect, useMemo} from 'react';
 import BaseLanguageSwitcher, {LanguageOption, LanguageSwitcherRenderProps} from './BaseLanguageSwitcher';
 import useFlowMeta from '../../../contexts/FlowMeta/useFlowMeta';
@@ -89,22 +89,45 @@ const LanguageSwitcher: FC<LanguageSwitcherProps> = ({children, className}: Lang
     [effectiveLanguageCodes],
   );
 
-  // If the detected language isn't supported by the server, fall back to the first available language.
+  // If the detected language isn't supported by the server, fall back to English (matched by base
+  // language, e.g. browser "en-US" against server "en"), or the first available language if the
+  // server doesn't offer English either.
   useEffect(() => {
-    if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) {
-      switchLanguage(availableLanguageCodes[0]);
+    if (availableLanguageCodes.length === 0) {
+      return;
     }
+    const currentBase: string = getBaseLanguage(currentLanguage);
+    const isSupported: boolean = availableLanguageCodes.some(
+      (code: string): boolean => getBaseLanguage(code) === currentBase,
+    );
+    if (isSupported) {
+      return;
+    }
+    const englishCode: string | undefined = availableLanguageCodes.find(
+      (code: string): boolean => getBaseLanguage(code) === 'en',
+    );
+    switchLanguage(englishCode ?? availableLanguageCodes[0]);
   }, [availableLanguageCodes, currentLanguage, switchLanguage]);
 
+  // `currentLanguage` may be region-qualified (e.g. "en-US") while `languages[].code` entries are
+  // bare (e.g. "en") — pass down whichever option's code shares its base language, so BaseLanguageSwitcher
+  // can find a match instead of falling back to the raw, unlabeled code.
+  const displayLanguage: string = useMemo(() => {
+    const match: LanguageOption | undefined = languages.find(
+      (option: LanguageOption): boolean => getBaseLanguage(option.code) === getBaseLanguage(currentLanguage),
+    );
+    return match?.code ?? currentLanguage;
+  }, [languages, currentLanguage]);
+
   const handleLanguageChange = (language: string): void => {
-    if (language !== currentLanguage) {
+    if (language !== displayLanguage) {
       switchLanguage(language);
     }
   };
 
   return (
     <BaseLanguageSwitcher
-      currentLanguage={currentLanguage}
+      currentLanguage={displayLanguage}
       isLoading={isLoading}
       languages={languages}
       onLanguageChange={handleLanguageChange}

packages/react/src/contexts/ThunderID/ThunderIDProvider.tsx

@@ -59,6 +59,7 @@ const ThunderIDProvider: FC<PropsWithChildren<ThunderIDProviderProps>> = ({
   ...rest
 }: PropsWithChildren<ThunderIDProviderProps>): ReactElement => {
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
+
   const client: ThunderIDReactClient = useMemo(() => new ThunderIDReactClient(instanceId), [instanceId]);
   const storageManagerRef: any = useRef<any>(null);
   const {hasAuthParams, hasCalledForThisInstance} = useBrowserUrl();