Fix syncronization with non react pages

src/lib/components/Template.tsx

@@ -44,7 +44,7 @@ export const Template = memo((props: TemplateProps) => {
         displayInfoNode = null
     } = props;
 
-    console.log("Rendering this page with react using keycloak-react-theming");
+    useEffect(()=> { console.log("Rendering this page with react using keycloak-react-theming") },[]);
 
     const { t } = useKcTranslation();
 
@@ -53,7 +53,7 @@ export const Template = memo((props: TemplateProps) => {
     const { kcLanguageTag, setKcLanguageTag } = useKcLanguageTag();
 
     const onChangeLanguageClickFactory = useCallbackFactory(
-        ([languageTag]: [KcLanguageTag]) =>
+        ([languageTag]: [KcLanguageTag]) => 
             setKcLanguageTag(languageTag)
     );
 
@@ -138,9 +138,9 @@ export const Template = memo((props: TemplateProps) => {
                                     <ul>
                                         {
                                             locale.supported.map(
-                                                ({ languageTag }) =>
+                                                ({ languageTag, url }) =>
                                                     <li className="kc-dropdown-item">
-                                                        <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
+                                                        <a href={url} onClick={onChangeLanguageClickFactory(languageTag)}>
                                                             {getKcLanguageTagLabel(languageTag)}
                                                         </a>
 

src/lib/i18n/KcLanguageTag.ts

@@ -55,12 +55,16 @@ export function getBestMatchAmongKcLanguageTag(
 
     const iso2LanguageLike = languageLike.split("-")[0].toLowerCase();
 
-    const language = availableLanguages.find(language =>
+    const kcLanguageTag = availableLanguages.find(language =>
         language.toLowerCase().includes(iso2LanguageLike) ||
         getKcLanguageTagLabel(language).toLocaleLowerCase() === languageLike.toLocaleLowerCase()
     );
 
-    if (language === undefined && languageLike !== navigator.language) {
+    if (kcLanguageTag !== undefined) {
+        return kcLanguageTag;
+    }
+
+    if (languageLike !== navigator.language) {
         return getBestMatchAmongKcLanguageTag(navigator.language);
     }
 

src/lib/i18n/useKcLanguageTag.ts

@@ -9,5 +9,5 @@ export const { useKcLanguageTag } = createUseGlobalState(
         kcContext?.locale?.["current" as never] ??
         navigator.language
     ),
-    { "persistance": "cookies" }
+    { "persistance": "cookie" }
 );

src/lib/kcContext.ts

@@ -27,7 +27,7 @@ export declare namespace KcContext {
         /** Undefined if !realm.internationalizationEnabled */
         locale?: {
             supported: {
-                //url: string;
+                url: string;
                 languageTag: KcLanguageTag;
                 /** Is determined by languageTag. Ex: languageTag === "en" => label === "English"
                  * or getLanguageLabel(languageTag) === label