From 7a040935e9fa4a8d6b5983518f3c53030730272f Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Sun, 9 Jun 2024 11:20:45 +0200
Subject: [PATCH] i18n need to be passed as props if we want to be able to
 ovewrite

---
 src/account/Fallback.tsx                        |  5 +++--
 src/account/Template.tsx                        |  8 ++++----
 src/account/TemplateProps.ts                    |  7 ++++---
 src/account/i18n/i18n.tsx                       |  6 +++---
 src/account/i18n/index.ts                       | 13 ++++---------
 src/account/pages/Account.tsx                   | 10 +++++-----
 src/account/pages/Applications.tsx              | 10 +++++-----
 src/account/pages/FederatedIdentity.tsx         | 10 +++++-----
 src/account/pages/Log.tsx                       | 10 +++++-----
 src/account/pages/PageProps.ts                  |  8 ++++----
 src/account/pages/Password.tsx                  |  9 +++++----
 src/account/pages/Sessions.tsx                  | 10 +++++-----
 src/account/pages/Totp.tsx                      | 10 +++++-----
 src/login/Fallback.tsx                          |  5 +++--
 src/login/Template.tsx                          |  7 ++++---
 src/login/TemplateProps.ts                      |  7 +++----
 src/login/UserProfileFormFields.tsx             | 10 +++++-----
 src/login/i18n/i18n.tsx                         |  4 ++--
 src/login/i18n/index.ts                         | 13 ++++---------
 src/login/lib/useUserProfileForm.tsx            | 14 ++++++++------
 src/login/pages/Code.tsx                        |  9 +++++----
 src/login/pages/DeleteAccountConfirm.tsx        | 10 +++++-----
 src/login/pages/DeleteCredential.tsx            |  9 +++++----
 src/login/pages/Error.tsx                       | 17 ++++++++++++-----
 src/login/pages/FrontchannelLogout.tsx          |  9 +++++----
 src/login/pages/IdpReviewUserProfile.tsx        | 10 ++++++----
 src/login/pages/Info.tsx                        |  9 +++++----
 src/login/pages/Login.tsx                       |  8 ++++----
 src/login/pages/LoginConfigTotp.tsx             | 10 ++++------
 src/login/pages/LoginIdpLinkConfirm.tsx         | 10 +++++-----
 src/login/pages/LoginIdpLinkEmail.tsx           | 16 +++++++++++-----
 .../pages/LoginOauth2DeviceVerifyUserCode.tsx   | 16 +++++++++++-----
 src/login/pages/LoginOauthGrant.tsx             |  9 +++++----
 src/login/pages/LoginOtp.tsx                    |  9 +++++----
 src/login/pages/LoginPageExpired.tsx            | 10 +++++-----
 src/login/pages/LoginPassword.tsx               |  8 ++++----
 .../pages/LoginRecoveryAuthnCodeConfig.tsx      | 15 ++++++++++-----
 src/login/pages/LoginRecoveryAuthnCodeInput.tsx |  9 +++++----
 src/login/pages/LoginResetOtp.tsx               |  9 +++++----
 src/login/pages/LoginResetPassword.tsx          |  9 +++++----
 src/login/pages/LoginUpdatePassword.tsx         |  8 ++++----
 src/login/pages/LoginUpdateProfile.tsx          | 10 ++++++----
 src/login/pages/LoginUsername.tsx               |  9 +++++----
 src/login/pages/LoginVerifyEmail.tsx            |  9 +++++----
 src/login/pages/LoginX509Info.tsx               | 10 +++++-----
 src/login/pages/LogoutConfirm.tsx               | 10 +++++-----
 src/login/pages/PageProps.ts                    |  8 ++++----
 src/login/pages/Register.tsx                    | 17 ++++++++++++-----
 src/login/pages/SamlPostForm.tsx                | 10 +++++-----
 src/login/pages/SelectAuthenticator.tsx         |  9 +++++----
 src/login/pages/Terms.tsx                       | 17 ++++++++++++-----
 src/login/pages/UpdateEmail.tsx                 |  9 +++++----
 src/login/pages/WebauthnAuthenticate.tsx        |  9 +++++----
 src/login/pages/WebauthnError.tsx               | 17 ++++++++++++-----
 src/login/pages/WebauthnRegister.tsx            |  8 ++++----
 stories/account/KcApp.tsx                       |  5 ++++-
 stories/login/KcApp.tsx                         |  4 ++++
 57 files changed, 310 insertions(+), 246 deletions(-)

diff --git a/src/account/Fallback.tsx b/src/account/Fallback.tsx
index ab93e0f6..308154a6 100644
--- a/src/account/Fallback.tsx
+++ b/src/account/Fallback.tsx
@@ -1,7 +1,8 @@
 import { lazy, Suspense } from "react";
 import { assert, type Equals } from "tsafe/assert";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import type { KcContext } from "./KcContext";
+import type { KcContext } from "keycloakify/account/KcContext";
+import { I18n } from "keycloakify/account/i18n";
 
 const Password = lazy(() => import("keycloakify/account/pages/Password"));
 const Account = lazy(() => import("keycloakify/account/pages/Account"));
@@ -11,7 +12,7 @@ const Applications = lazy(() => import("keycloakify/account/pages/Applications")
 const Log = lazy(() => import("keycloakify/account/pages/Log"));
 const FederatedIdentity = lazy(() => import("keycloakify/account/pages/FederatedIdentity"));
 
-export default function Fallback(props: PageProps<KcContext>) {
+export default function Fallback(props: PageProps<KcContext, I18n>) {
     const { kcContext, ...rest } = props;
 
     return (
diff --git a/src/account/Template.tsx b/src/account/Template.tsx
index a6d12832..4b7acc24 100644
--- a/src/account/Template.tsx
+++ b/src/account/Template.tsx
@@ -5,15 +5,15 @@ import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
 import type { TemplateProps } from "keycloakify/account/TemplateProps";
+import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
-import { useI18n } from "./i18n";
 
-export default function Template(props: TemplateProps<KcContext>) {
-    const { kcContext, doUseDefaultCss, active, classes, children } = props;
+export default function Template(props: TemplateProps<KcContext, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = useI18n({ kcContext });
+    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
     const { locale, url, features, realm, message, referrer } = kcContext;
 
diff --git a/src/account/TemplateProps.ts b/src/account/TemplateProps.ts
index 470f0a3a..0e5196d2 100644
--- a/src/account/TemplateProps.ts
+++ b/src/account/TemplateProps.ts
@@ -1,12 +1,13 @@
 import type { ReactNode } from "react";
-import type { KcContext } from "./KcContext";
 
-export type TemplateProps<KcContext extends KcContext.Common> = {
+export type TemplateProps<KcContext, I18n> = {
     kcContext: KcContext;
+    i18n: I18n;
     doUseDefaultCss: boolean;
-    active: string;
     classes?: Partial<Record<ClassKey, string>>;
     children: ReactNode;
+
+    active: string;
 };
 
 export type ClassKey =
diff --git a/src/account/i18n/i18n.tsx b/src/account/i18n/i18n.tsx
index 759533b4..954c92dc 100644
--- a/src/account/i18n/i18n.tsx
+++ b/src/account/i18n/i18n.tsx
@@ -130,7 +130,7 @@ function createGetI18n<ExtraMessageKey extends string = never>(extraMessages: {
             extraMessages: extraMessages[partialI18n.currentLanguageTag]
         });
 
-        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag !== fallbackLanguageTag;
+        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag;
 
         const result: Result = {
             i18n: {
@@ -175,7 +175,7 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
     const { getI18n } = createGetI18n(extraMessages);
 
-    function useI18n(params: { kcContext: KcContextLike }): I18n {
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
         const { kcContext } = params;
 
         const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
@@ -198,7 +198,7 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
             };
         }, []);
 
-        return i18n_toReturn;
+        return { i18n: i18n_toReturn };
     }
 
     return { useI18n, ofTypeI18n: Reflect<I18n>() };
diff --git a/src/account/i18n/index.ts b/src/account/i18n/index.ts
index 4d326433..fe7f3152 100644
--- a/src/account/i18n/index.ts
+++ b/src/account/i18n/index.ts
@@ -1,10 +1,5 @@
-export type { MessageKey } from "./i18n";
-import { createUseI18n } from "./i18n";
-export { createUseI18n };
+import type { GenericI18n, MessageKey, KcContextLike } from "./i18n";
+export type { MessageKey, KcContextLike };
+export type I18n = GenericI18n<MessageKey>;
+export { createUseI18n } from "./i18n";
 export { fallbackLanguageTag } from "./i18n";
-
-const { useI18n, ofTypeI18n } = createUseI18n({});
-
-export type I18n = typeof ofTypeI18n;
-
-export { useI18n };
diff --git a/src/account/pages/Account.tsx b/src/account/pages/Account.tsx
index 2dc0a296..77b0724f 100644
--- a/src/account/pages/Account.tsx
+++ b/src/account/pages/Account.tsx
@@ -2,10 +2,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template } = props;
+export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
     const classes = {
         ...props.classes,
@@ -19,10 +19,10 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
 
     const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, doUseDefaultCss, classes }} active="account">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account">
             <div className="row">
                 <div className="col-md-10">
                     <h2>{msg("editAccountHtmlTitle")}</h2>
diff --git a/src/account/pages/Applications.tsx b/src/account/pages/Applications.tsx
index ab6dac74..6187baf2 100644
--- a/src/account/pages/Applications.tsx
+++ b/src/account/pages/Applications.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Applications(props: PageProps<Extract<KcContext, { pageId: "applications.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, classes, Template } = props;
+export default function Applications(props: PageProps<Extract<KcContext, { pageId: "applications.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -17,10 +17,10 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
         stateChecker
     } = kcContext;
 
-    const { msg, advancedMsg } = useI18n({ kcContext });
+    const { msg, advancedMsg } = i18n;
 
     return (
-        <Template {...{ kcContext, doUseDefaultCss, classes }} active="applications">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="applications">
             <div className="row">
                 <div className="col-md-10">
                     <h2>{msg("applicationsHtmlTitle")}</h2>
diff --git a/src/account/pages/FederatedIdentity.tsx b/src/account/pages/FederatedIdentity.tsx
index bcbd4c72..f1a264b8 100644
--- a/src/account/pages/FederatedIdentity.tsx
+++ b/src/account/pages/FederatedIdentity.tsx
@@ -1,14 +1,14 @@
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function FederatedIdentity(props: PageProps<Extract<KcContext, { pageId: "federatedIdentity.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, classes, Template } = props;
+export default function FederatedIdentity(props: PageProps<Extract<KcContext, { pageId: "federatedIdentity.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
 
     const { url, federatedIdentity, stateChecker } = kcContext;
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
     return (
-        <Template {...{ kcContext, doUseDefaultCss, classes }} active="federatedIdentity">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="federatedIdentity">
             <div className="main-layout social">
                 <div className="row">
                     <div className="col-md-10">
diff --git a/src/account/pages/Log.tsx b/src/account/pages/Log.tsx
index fc741859..08b4d0e8 100644
--- a/src/account/pages/Log.tsx
+++ b/src/account/pages/Log.tsx
@@ -2,10 +2,10 @@ import type { Key } from "react";
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, classes, Template } = props;
+export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -14,10 +14,10 @@ export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.f
 
     const { log } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
-        <Template {...{ kcContext, doUseDefaultCss, classes }} active="log">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="log">
             <div className={kcClsx("kcContentWrapperClass")}>
                 <div className="col-md-10">
                     <h2>{msg("accountLogHtmlTitle")}</h2>
diff --git a/src/account/pages/PageProps.ts b/src/account/pages/PageProps.ts
index 12e81076..b269d62a 100644
--- a/src/account/pages/PageProps.ts
+++ b/src/account/pages/PageProps.ts
@@ -1,10 +1,10 @@
-import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
+import { type TemplateProps, type ClassKey } from "keycloakify/account/TemplateProps";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
-import type { KcContext } from "../KcContext";
 
-export type PageProps<NarrowedKcContext = KcContext> = {
-    Template: LazyOrNot<(props: TemplateProps<any>) => JSX.Element | null>;
+export type PageProps<NarrowedKcContext, I18n> = {
+    Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
     kcContext: NarrowedKcContext;
+    i18n: I18n;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;
 };
diff --git a/src/account/pages/Password.tsx b/src/account/pages/Password.tsx
index 099e5877..a45715a0 100644
--- a/src/account/pages/Password.tsx
+++ b/src/account/pages/Password.tsx
@@ -3,10 +3,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template } = props;
+export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
     const classes = {
         ...props.classes,
@@ -20,7 +20,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
 
     const { url, password, account, stateChecker } = kcContext;
 
-    const { msgStr, msg } = useI18n({ kcContext });
+    const { msgStr, msg } = i18n;
 
     const [currentPassword, setCurrentPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
@@ -77,6 +77,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                         return kcContext.message;
                     })()
                 },
+                i18n,
                 doUseDefaultCss,
                 classes
             }}
diff --git a/src/account/pages/Sessions.tsx b/src/account/pages/Sessions.tsx
index a89ecb5e..2ae1976b 100644
--- a/src/account/pages/Sessions.tsx
+++ b/src/account/pages/Sessions.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,9 +13,9 @@ export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "
 
     const { url, stateChecker, sessions } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
     return (
-        <Template {...{ kcContext, doUseDefaultCss, classes }} active="sessions">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
             <div className={kcClsx("kcContentWrapperClass")}>
                 <div className="col-md-10">
                     <h2>{msg("sessionsHtmlTitle")}</h2>
diff --git a/src/account/pages/Totp.tsx b/src/account/pages/Totp.tsx
index 6c614557..e2d2452b 100644
--- a/src/account/pages/Totp.tsx
+++ b/src/account/pages/Totp.tsx
@@ -2,10 +2,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -14,7 +14,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
 
     const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
 
-    const { msg, msgStr, advancedMsg } = useI18n({ kcContext });
+    const { msg, msgStr, advancedMsg } = i18n;
 
     const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
         HmacSHA1: "SHA1",
@@ -23,7 +23,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
     };
 
     return (
-        <Template {...{ kcContext, doUseDefaultCss, classes }} active="totp">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
             <>
                 <div className="row">
                     <div className="col-md-10">
diff --git a/src/login/Fallback.tsx b/src/login/Fallback.tsx
index 23df761d..cf8c8442 100644
--- a/src/login/Fallback.tsx
+++ b/src/login/Fallback.tsx
@@ -2,7 +2,8 @@ import { lazy, Suspense } from "react";
 import { assert, type Equals } from "tsafe/assert";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import type { KcContext } from "./KcContext";
+import type { I18n } from "keycloakify/login/i18n";
+import type { KcContext } from "keycloakify/login/KcContext";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 
 const Login = lazy(() => import("keycloakify/login/pages/Login"));
@@ -40,7 +41,7 @@ const LoginResetOtp = lazy(() => import("keycloakify/login/pages/LoginResetOtp")
 const LoginX509Info = lazy(() => import("keycloakify/login/pages/LoginX509Info"));
 const WebauthnError = lazy(() => import("keycloakify/login/pages/WebauthnError"));
 
-type FallbackProps = PageProps<KcContext> & {
+type FallbackProps = PageProps<KcContext, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
     doMakeUserConfirmPassword: boolean;
 };
diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index 74efa011..e961245e 100644
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@@ -6,10 +6,10 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
-import { useI18n } from "./i18n";
 
-export default function Template(props: TemplateProps<KcContext>) {
+export default function Template(props: TemplateProps<KcContext, I18n>) {
     const {
         displayInfo = false,
         displayMessage = true,
@@ -21,6 +21,7 @@ export default function Template(props: TemplateProps<KcContext>) {
         documentTitle,
         bodyClassName,
         kcContext,
+        i18n,
         doUseDefaultCss,
         classes,
         children
@@ -28,7 +29,7 @@ export default function Template(props: TemplateProps<KcContext>) {
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = useI18n({ kcContext });
+    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
     const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession, scripts } = kcContext;
 
diff --git a/src/login/TemplateProps.ts b/src/login/TemplateProps.ts
index 4ebb6226..dde6c08a 100644
--- a/src/login/TemplateProps.ts
+++ b/src/login/TemplateProps.ts
@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
-import type { KcContext } from "./KcContext";
 
-export type TemplateProps<KcContext extends KcContext.Common> = {
+export type TemplateProps<KcContext, I18n> = {
     kcContext: KcContext;
+    i18n: I18n;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;
+    children: ReactNode;
 
     displayInfo?: boolean;
     displayMessage?: boolean;
@@ -16,8 +17,6 @@ export type TemplateProps<KcContext extends KcContext.Common> = {
     infoNode?: ReactNode;
     documentTitle?: string;
     bodyClassName?: string;
-
-    children: ReactNode;
 };
 
 export type ClassKey =
diff --git a/src/login/UserProfileFormFields.tsx b/src/login/UserProfileFormFields.tsx
index 4feff26b..fba7b571 100644
--- a/src/login/UserProfileFormFields.tsx
+++ b/src/login/UserProfileFormFields.tsx
@@ -9,10 +9,11 @@ import {
     type FormFieldError
 } from "keycloakify/login/lib/useUserProfileForm";
 import type { Attribute } from "keycloakify/login/KcContext";
-import { useI18n, type I18n } from "./i18n";
+import type { I18n } from "./i18n";
 
 export type UserProfileFormFieldsProps = {
     kcContext: KcContextLike;
+    i18n: I18n;
     kcClsx: KcClsx;
     onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
     doMakeUserConfirmPassword: boolean;
@@ -30,15 +31,16 @@ type BeforeAfterFieldProps = {
 };
 
 export default function UserProfileFormFields(props: UserProfileFormFieldsProps) {
-    const { kcContext, kcClsx, onIsFormSubmittableValueChange, doMakeUserConfirmPassword, BeforeField, AfterField } = props;
+    const { kcContext, i18n, kcClsx, onIsFormSubmittableValueChange, doMakeUserConfirmPassword, BeforeField, AfterField } = props;
 
-    const { advancedMsg } = useI18n({ kcContext });
+    const { advancedMsg } = i18n;
 
     const {
         formState: { formFieldStates, isFormSubmittable },
         dispatchFormAction
     } = useUserProfileForm({
         kcContext,
+        i18n,
         doMakeUserConfirmPassword
     });
 
@@ -46,8 +48,6 @@ export default function UserProfileFormFields(props: UserProfileFormFieldsProps)
         onIsFormSubmittableValueChange(isFormSubmittable);
     }, [isFormSubmittable]);
 
-    const i18n = useI18n({ kcContext });
-
     const groupNameRef = { current: "" };
 
     return (
diff --git a/src/login/i18n/i18n.tsx b/src/login/i18n/i18n.tsx
index 5160d4a2..feb124ce 100644
--- a/src/login/i18n/i18n.tsx
+++ b/src/login/i18n/i18n.tsx
@@ -177,7 +177,7 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
     const { getI18n } = createGetI18n(extraMessages);
 
-    function useI18n(params: { kcContext: KcContextLike }): I18n {
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
         const { kcContext } = params;
 
         const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
@@ -200,7 +200,7 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
             };
         }, []);
 
-        return i18n_toReturn;
+        return { i18n: i18n_toReturn };
     }
 
     return { useI18n, ofTypeI18n: Reflect<I18n>() };
diff --git a/src/login/i18n/index.ts b/src/login/i18n/index.ts
index db312cfe..fe7f3152 100644
--- a/src/login/i18n/index.ts
+++ b/src/login/i18n/index.ts
@@ -1,10 +1,5 @@
-export type { MessageKey, KcContextLike } from "./i18n";
-import { createUseI18n } from "./i18n";
-export { createUseI18n };
+import type { GenericI18n, MessageKey, KcContextLike } from "./i18n";
+export type { MessageKey, KcContextLike };
+export type I18n = GenericI18n<MessageKey>;
+export { createUseI18n } from "./i18n";
 export { fallbackLanguageTag } from "./i18n";
-
-const { useI18n, ofTypeI18n } = createUseI18n({});
-
-export type I18n = typeof ofTypeI18n;
-
-export { useI18n };
diff --git a/src/login/lib/useUserProfileForm.tsx b/src/login/lib/useUserProfileForm.tsx
index bfdd49fa..b79fcad7 100644
--- a/src/login/lib/useUserProfileForm.tsx
+++ b/src/login/lib/useUserProfileForm.tsx
@@ -11,7 +11,7 @@ import type { PasswordPolicies, Attribute, Validators } from "keycloakify/login/
 import type { KcContext } from "../KcContext";
 import type { MessageKey } from "keycloakify/login/i18n";
 import { KcContextLike as KcContextLike_i18n } from "keycloakify/login/i18n";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export type FormFieldError = {
     errorMessage: JSX.Element;
@@ -83,6 +83,7 @@ assert<Extract<KcContext.Register, { pageId: "register.ftl" }> extends KcContext
 
 export type ParamsOfUseUserProfileForm = {
     kcContext: KcContextLike;
+    i18n: I18n;
     doMakeUserConfirmPassword: boolean;
 };
 
@@ -105,7 +106,7 @@ namespace internal {
 }
 
 export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm {
-    const { kcContext, doMakeUserConfirmPassword } = params;
+    const { kcContext, i18n, doMakeUserConfirmPassword } = params;
 
     const { insertScriptTags } = useInsertScriptTags({
         componentOrHookName: "useUserProfileForm",
@@ -122,7 +123,8 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
     }, []);
 
     const { getErrors } = useGetErrors({
-        kcContext
+        kcContext,
+        i18n
     });
 
     const initialState = useMemo((): internal.State => {
@@ -523,12 +525,12 @@ type KcContextLike_useGetErrors = KcContextLike_i18n & {
 
 assert<KcContextLike extends KcContextLike_useGetErrors ? true : false>();
 
-function useGetErrors(params: { kcContext: KcContextLike_useGetErrors }) {
-    const { kcContext } = params;
+function useGetErrors(params: { kcContext: KcContextLike_useGetErrors; i18n: I18n }) {
+    const { kcContext, i18n } = params;
 
     const { messagesPerField, passwordPolicies } = kcContext;
 
-    const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n({ kcContext });
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
 
     const getErrors = useConstCallback(
         (params: {
diff --git a/src/login/pages/Code.tsx b/src/login/pages/Code.tsx
index d6e42bff..576a2ccd 100644
--- a/src/login/pages/Code.tsx
+++ b/src/login/pages/Code.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,11 +13,12 @@ export default function Code(props: PageProps<Extract<KcContext, { pageId: "code
 
     const { code } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             headerNode={code.success ? msg("codeSuccessTitle") : msg("codeErrorTitle", code.error)}
diff --git a/src/login/pages/DeleteAccountConfirm.tsx b/src/login/pages/DeleteAccountConfirm.tsx
index 20f327fe..8d847a27 100644
--- a/src/login/pages/DeleteAccountConfirm.tsx
+++ b/src/login/pages/DeleteAccountConfirm.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext, { pageId: "delete-account-confirm.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext, { pageId: "delete-account-confirm.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,10 +13,10 @@ export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext,
 
     const { url, triggered_from_aia } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("deleteAccountConfirm")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("deleteAccountConfirm")}>
             <form action={url.loginAction} className="form-vertical" method="post">
                 <div className="alert alert-warning" style={{ marginTop: "0", marginBottom: "30px" }}>
                     <span className="pficon pficon-warning-triangle-o"></span>
diff --git a/src/login/pages/DeleteCredential.tsx b/src/login/pages/DeleteCredential.tsx
index 56e7d6e7..e1c2959a 100644
--- a/src/login/pages/DeleteCredential.tsx
+++ b/src/login/pages/DeleteCredential.tsx
@@ -1,12 +1,12 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function DeleteCredential(props: PageProps<Extract<KcContext, { pageId: "delete-credential.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function DeleteCredential(props: PageProps<Extract<KcContext, { pageId: "delete-credential.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { msgStr, msg } = useI18n({ kcContext });
+    const { msgStr, msg } = i18n;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -18,6 +18,7 @@ export default function DeleteCredential(props: PageProps<Extract<KcContext, { p
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={false}
diff --git a/src/login/pages/Error.tsx b/src/login/pages/Error.tsx
index feafd688..b35d725b 100644
--- a/src/login/pages/Error.tsx
+++ b/src/login/pages/Error.tsx
@@ -1,16 +1,23 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Error(props: PageProps<Extract<KcContext, { pageId: "error.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function Error(props: PageProps<Extract<KcContext, { pageId: "error.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { message, client, skipLink } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} displayMessage={false} headerNode={msg("errorTitle")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("errorTitle")}
+        >
             <div id="kc-error-message">
                 <p className="instruction">{message.summary}</p>
                 {!skipLink && client !== undefined && client.baseUrl !== undefined && (
diff --git a/src/login/pages/FrontchannelLogout.tsx b/src/login/pages/FrontchannelLogout.tsx
index 38b2cb92..d82d00ae 100644
--- a/src/login/pages/FrontchannelLogout.tsx
+++ b/src/login/pages/FrontchannelLogout.tsx
@@ -1,14 +1,14 @@
 import { useEffect } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function FrontchannelLogout(props: PageProps<Extract<KcContext, { pageId: "frontchannel-logout.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function FrontchannelLogout(props: PageProps<Extract<KcContext, { pageId: "frontchannel-logout.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { logout } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     useEffect(() => {
         if (logout.logoutRedirectUri) {
@@ -19,6 +19,7 @@ export default function FrontchannelLogout(props: PageProps<Extract<KcContext, {
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             documentTitle={msgStr("frontchannel-logout.title")}
diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx
index cbeea618..791ae7ca 100644
--- a/src/login/pages/IdpReviewUserProfile.tsx
+++ b/src/login/pages/IdpReviewUserProfile.tsx
@@ -4,22 +4,22 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-type IdpReviewUserProfileProps = PageProps<Extract<KcContext, { pageId: "idp-review-user-profile.ftl" }>> & {
+type IdpReviewUserProfileProps = PageProps<Extract<KcContext, { pageId: "idp-review-user-profile.ftl" }>, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
     doMakeUserConfirmPassword: boolean;
 };
 
 export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     const { url, messagesPerField } = kcContext;
 
@@ -28,6 +28,7 @@ export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={messagesPerField.exists("global")}
@@ -37,6 +38,7 @@ export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
             <form id="kc-idp-review-profile-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
                     kcContext={kcContext}
+                    i18n={i18n}
                     onIsFormSubmittableValueChange={setIsFomSubmittable}
                     kcClsx={kcClsx}
                     doMakeUserConfirmPassword={doMakeUserConfirmPassword}
diff --git a/src/login/pages/Info.tsx b/src/login/pages/Info.tsx
index ad34a27b..1a00fdc8 100644
--- a/src/login/pages/Info.tsx
+++ b/src/login/pages/Info.tsx
@@ -1,12 +1,12 @@
 import { assert } from "keycloakify/tools/assert";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { msgStr, msg } = useI18n({ kcContext });
+    const { msgStr, msg } = i18n;
 
     assert(
         kcContext.message !== undefined,
@@ -18,6 +18,7 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={false}
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index aacf6ada..d96ddb7e 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -4,10 +4,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -16,7 +16,6 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
 
     const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
 
-    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
@@ -24,6 +23,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={!messagesPerField.existsError("username", "password")}
diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx
index 1a18ed9b..997f3f0c 100644
--- a/src/login/pages/LoginConfigTotp.tsx
+++ b/src/login/pages/LoginConfigTotp.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx, KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,12 +13,10 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
     const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
-    const i18n = useI18n({ kcContext });
-
     const { msg, msgStr, advancedMsg } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("loginTotpTitle")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("loginTotpTitle")}>
             <>
                 <ol id="kc-totp-settings">
                     <li>
diff --git a/src/login/pages/LoginIdpLinkConfirm.tsx b/src/login/pages/LoginIdpLinkConfirm.tsx
index bf782112..7131dfdf 100644
--- a/src/login/pages/LoginIdpLinkConfirm.tsx
+++ b/src/login/pages/LoginIdpLinkConfirm.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,10 +13,10 @@ export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContext,
 
     const { url, idpAlias } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("confirmLinkIdpTitle")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("confirmLinkIdpTitle")}>
             <form id="kc-register-form" action={url.loginAction} method="post">
                 <div className={kcClsx("kcFormGroupClass")}>
                     <button
diff --git a/src/login/pages/LoginIdpLinkEmail.tsx b/src/login/pages/LoginIdpLinkEmail.tsx
index 649050bc..8674b547 100644
--- a/src/login/pages/LoginIdpLinkEmail.tsx
+++ b/src/login/pages/LoginIdpLinkEmail.tsx
@@ -1,16 +1,22 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-email.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-email.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { url, realm, brokerContext, idpAlias } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("emailLinkIdpTitle", idpAlias)}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("emailLinkIdpTitle", idpAlias)}
+        >
             <p id="instruction1" className="instruction">
                 {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
             </p>
diff --git a/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx b/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
index 57bdd632..21590063 100644
--- a/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
+++ b/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
@@ -1,15 +1,15 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { PageProps } from "keycloakify/login/pages/PageProps";
 import { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
 export default function LoginOauth2DeviceVerifyUserCode(
-    props: PageProps<Extract<KcContext, { pageId: "login-oauth2-device-verify-user-code.ftl" }>>
+    props: PageProps<Extract<KcContext, { pageId: "login-oauth2-device-verify-user-code.ftl" }>, I18n>
 ) {
-    const { kcContext, doUseDefaultCss, classes, Template } = props;
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
     const { url } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -17,7 +17,13 @@ export default function LoginOauth2DeviceVerifyUserCode(
     });
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("oauth2DeviceVerificationTitle")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("oauth2DeviceVerificationTitle")}
+        >
             <form
                 id="kc-user-verify-device-user-code-form"
                 className={kcClsx("kcFormClass")}
diff --git a/src/login/pages/LoginOauthGrant.tsx b/src/login/pages/LoginOauthGrant.tsx
index aef21ee3..5c019d88 100644
--- a/src/login/pages/LoginOauthGrant.tsx
+++ b/src/login/pages/LoginOauthGrant.tsx
@@ -1,13 +1,13 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { PageProps } from "keycloakify/login/pages/PageProps";
 import { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pageId: "login-oauth-grant.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, classes, Template } = props;
+export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pageId: "login-oauth-grant.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
     const { url, oauth, client } = kcContext;
 
-    const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n({ kcContext });
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -17,6 +17,7 @@ export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pa
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             bodyClassName="oauth"
diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx
index 9567894c..a7ce947e 100644
--- a/src/login/pages/LoginOtp.tsx
+++ b/src/login/pages/LoginOtp.tsx
@@ -2,10 +2,10 @@ import { Fragment } from "react";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "login-otp.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "login-otp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -14,11 +14,12 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
 
     const { otpLogin, url, messagesPerField } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={!messagesPerField.existsError("totp")}
diff --git a/src/login/pages/LoginPageExpired.tsx b/src/login/pages/LoginPageExpired.tsx
index 550f3e0c..741c55a1 100644
--- a/src/login/pages/LoginPageExpired.tsx
+++ b/src/login/pages/LoginPageExpired.tsx
@@ -1,16 +1,16 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginPageExpired(props: PageProps<Extract<KcContext, { pageId: "login-page-expired.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { url } = kcContext;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("pageExpiredTitle")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("pageExpiredTitle")}>
             <p id="instruction1" className="instruction">
                 {msg("pageExpiredMsg1")}
                 <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
diff --git a/src/login/pages/LoginPassword.tsx b/src/login/pages/LoginPassword.tsx
index 0c37cb3d..48371933 100644
--- a/src/login/pages/LoginPassword.tsx
+++ b/src/login/pages/LoginPassword.tsx
@@ -4,10 +4,10 @@ import { assert } from "tsafe/assert";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginPassword(props: PageProps<Extract<KcContext, { pageId: "login-password.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginPassword(props: PageProps<Extract<KcContext, { pageId: "login-password.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -16,7 +16,6 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
 
     const { realm, url, messagesPerField } = kcContext;
 
-    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
@@ -24,6 +23,7 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             headerNode={msg("doLogIn")}
diff --git a/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx b/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
index 52c37ccf..2eed0465 100644
--- a/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
+++ b/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
@@ -4,10 +4,10 @@ import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-config.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-config.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -16,7 +16,6 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
 
     const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
 
-    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
@@ -145,7 +144,13 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
     }, []);
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("recovery-code-config-header")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("recovery-code-config-header")}
+        >
             <div className={clsx("pf-c-alert", "pf-m-warning", "pf-m-inline", kcClsx("kcRecoveryCodesWarning"))} aria-label="Warning alert">
                 <div className="pf-c-alert__icon">
                     <i className="pficon-warning-triangle-o" aria-hidden="true" />
diff --git a/src/login/pages/LoginRecoveryAuthnCodeInput.tsx b/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
index 2a107dcf..1fc06920 100644
--- a/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
+++ b/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-input.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-input.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,11 +13,12 @@ export default function LoginRecoveryAuthnCodeInput(props: PageProps<Extract<KcC
 
     const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             headerNode={msg("auth-recovery-code-header")}
diff --git a/src/login/pages/LoginResetOtp.tsx b/src/login/pages/LoginResetOtp.tsx
index b8c1aebb..ec81a273 100644
--- a/src/login/pages/LoginResetOtp.tsx
+++ b/src/login/pages/LoginResetOtp.tsx
@@ -2,10 +2,10 @@ import { Fragment } from "react";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginResetOtp(props: PageProps<Extract<KcContext, { pageId: "login-reset-otp.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginResetOtp(props: PageProps<Extract<KcContext, { pageId: "login-reset-otp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -14,11 +14,12 @@ export default function LoginResetOtp(props: PageProps<Extract<KcContext, { page
 
     const { url, messagesPerField, configuredOtpCredentials } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={!messagesPerField.existsError("totp")}
diff --git a/src/login/pages/LoginResetPassword.tsx b/src/login/pages/LoginResetPassword.tsx
index 254e965e..377dbc13 100644
--- a/src/login/pages/LoginResetPassword.tsx
+++ b/src/login/pages/LoginResetPassword.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,11 +13,12 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
 
     const { url, realm, auth, messagesPerField } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayInfo
diff --git a/src/login/pages/LoginUpdatePassword.tsx b/src/login/pages/LoginUpdatePassword.tsx
index 7f8b71bd..e1b25942 100644
--- a/src/login/pages/LoginUpdatePassword.tsx
+++ b/src/login/pages/LoginUpdatePassword.tsx
@@ -3,17 +3,16 @@ import { assert } from "tsafe/assert";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginUpdatePassword(props: PageProps<Extract<KcContext, { pageId: "login-update-password.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginUpdatePassword(props: PageProps<Extract<KcContext, { pageId: "login-update-password.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
-    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const { url, messagesPerField, isAppInitiatedAction } = kcContext;
@@ -21,6 +20,7 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={!messagesPerField.existsError("password", "password-confirm")}
diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx
index b98e9fc1..c9be29a6 100644
--- a/src/login/pages/LoginUpdateProfile.tsx
+++ b/src/login/pages/LoginUpdateProfile.tsx
@@ -4,15 +4,15 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-type LoginUpdateProfileProps = PageProps<Extract<KcContext, { pageId: "login-update-profile.ftl" }>> & {
+type LoginUpdateProfileProps = PageProps<Extract<KcContext, { pageId: "login-update-profile.ftl" }>, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
     doMakeUserConfirmPassword: boolean;
 };
 
 export default function LoginUpdateProfile(props: LoginUpdateProfileProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -21,13 +21,14 @@ export default function LoginUpdateProfile(props: LoginUpdateProfileProps) {
 
     const { url, isAppInitiatedAction } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayRequiredFields
@@ -36,6 +37,7 @@ export default function LoginUpdateProfile(props: LoginUpdateProfileProps) {
             <form id="kc-update-profile-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
                     kcContext={kcContext}
+                    i18n={i18n}
                     kcClsx={kcClsx}
                     onIsFormSubmittableValueChange={setIsFormSubmittable}
                     doMakeUserConfirmPassword={doMakeUserConfirmPassword}
diff --git a/src/login/pages/LoginUsername.tsx b/src/login/pages/LoginUsername.tsx
index 67e0bffa..c3a7f22c 100644
--- a/src/login/pages/LoginUsername.tsx
+++ b/src/login/pages/LoginUsername.tsx
@@ -3,10 +3,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -15,13 +15,14 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
 
     const { social, realm, url, usernameHidden, login, registrationDisabled, messagesPerField } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={!messagesPerField.existsError("username")}
diff --git a/src/login/pages/LoginVerifyEmail.tsx b/src/login/pages/LoginVerifyEmail.tsx
index 1e7e5c42..368c5fe2 100644
--- a/src/login/pages/LoginVerifyEmail.tsx
+++ b/src/login/pages/LoginVerifyEmail.tsx
@@ -1,17 +1,18 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginVerifyEmail(props: PageProps<Extract<KcContext, { pageId: "login-verify-email.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     const { url, user } = kcContext;
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayInfo
diff --git a/src/login/pages/LoginX509Info.tsx b/src/login/pages/LoginX509Info.tsx
index 380853aa..d22e32cc 100644
--- a/src/login/pages/LoginX509Info.tsx
+++ b/src/login/pages/LoginX509Info.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LoginX509Info(props: PageProps<Extract<KcContext, { pageId: "login-x509-info.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LoginX509Info(props: PageProps<Extract<KcContext, { pageId: "login-x509-info.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,10 +13,10 @@ export default function LoginX509Info(props: PageProps<Extract<KcContext, { page
 
     const { url, x509 } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("doLogIn")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("doLogIn")}>
             <form id="kc-x509-login-info" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <div className={kcClsx("kcFormGroupClass")}>
                     <div className={kcClsx("kcLabelWrapperClass")}>
diff --git a/src/login/pages/LogoutConfirm.tsx b/src/login/pages/LogoutConfirm.tsx
index 1d30ae99..14ff6eb0 100644
--- a/src/login/pages/LogoutConfirm.tsx
+++ b/src/login/pages/LogoutConfirm.tsx
@@ -1,10 +1,10 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "logout-confirm.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -13,10 +13,10 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
 
     const { url, client, logoutConfirm } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("logoutConfirmTitle")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("logoutConfirmTitle")}>
             <div id="kc-logout-confirm" className="content-area">
                 <p className="instruction">{msg("logoutConfirmHeader")}</p>
                 <form className="form-actions" action={url.logoutConfirmAction} method="POST">
diff --git a/src/login/pages/PageProps.ts b/src/login/pages/PageProps.ts
index 3f0a60ed..e8d73449 100644
--- a/src/login/pages/PageProps.ts
+++ b/src/login/pages/PageProps.ts
@@ -1,10 +1,10 @@
 import { type TemplateProps, type ClassKey } from "keycloakify/login/TemplateProps";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
-import type { KcContext } from "keycloakify/account/KcContext";
 
-export type PageProps<NarowedKcContext = KcContext> = {
-    Template: LazyOrNot<(props: TemplateProps<any>) => JSX.Element | null>;
-    kcContext: NarowedKcContext;
+export type PageProps<NarrowedKcContext, I18n> = {
+    Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
+    kcContext: NarrowedKcContext;
+    i18n: I18n;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;
 };
diff --git a/src/login/pages/Register.tsx b/src/login/pages/Register.tsx
index 1144c154..6e3eece2 100644
--- a/src/login/pages/Register.tsx
+++ b/src/login/pages/Register.tsx
@@ -6,15 +6,15 @@ import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>> & {
+type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
     doMakeUserConfirmPassword: boolean;
 };
 
 export default function Register(props: RegisterProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -23,16 +23,23 @@ export default function Register(props: RegisterProps) {
 
     const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey, termsAcceptanceRequired } = kcContext;
 
-    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("registerTitle")} displayRequiredFields>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            headerNode={msg("registerTitle")}
+            displayRequiredFields
+        >
             <form id="kc-register-form" className={kcClsx("kcFormClass")} action={url.registrationAction} method="post">
                 <UserProfileFormFields
                     kcContext={kcContext}
+                    i18n={i18n}
                     kcClsx={kcClsx}
                     onIsFormSubmittableValueChange={setIsFormSubmittable}
                     doMakeUserConfirmPassword={doMakeUserConfirmPassword}
diff --git a/src/login/pages/SamlPostForm.tsx b/src/login/pages/SamlPostForm.tsx
index afc2b3ca..bb0ff74e 100644
--- a/src/login/pages/SamlPostForm.tsx
+++ b/src/login/pages/SamlPostForm.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageId: "saml-post-form.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { msgStr, msg } = useI18n({ kcContext });
+    const { msgStr, msg } = i18n;
 
     const { samlPost } = kcContext;
 
@@ -26,7 +26,7 @@ export default function SamlPostForm(props: PageProps<Extract<KcContext, { pageI
         htmlFormElement.submit();
     }, [htmlFormElement]);
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("saml.post-form.title")}>
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("saml.post-form.title")}>
             <p>{msg("saml.post-form.message")}</p>
             <form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement}>
                 {samlPost.SAMLRequest && <input type="hidden" name="SAMLRequest" value={samlPost.SAMLRequest} />}
diff --git a/src/login/pages/SelectAuthenticator.tsx b/src/login/pages/SelectAuthenticator.tsx
index 180b7cae..6a6a5187 100644
--- a/src/login/pages/SelectAuthenticator.tsx
+++ b/src/login/pages/SelectAuthenticator.tsx
@@ -1,18 +1,19 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
     const { url, auth } = kcContext;
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
-    const { msg } = useI18n({ kcContext });
+    const { msg } = i18n;
 
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayInfo={false}
diff --git a/src/login/pages/Terms.tsx b/src/login/pages/Terms.tsx
index 19ccc0bf..fa897e76 100644
--- a/src/login/pages/Terms.tsx
+++ b/src/login/pages/Terms.tsx
@@ -3,17 +3,17 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { useTermsMarkdown } from "keycloakify/login/lib/useDownloadTerms";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     const { locale, url } = kcContext;
 
@@ -24,7 +24,14 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
     }
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} displayMessage={false} headerNode={msg("termsTitle")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage={false}
+            headerNode={msg("termsTitle")}
+        >
             <div id="kc-terms-text" lang={termsLanguageTag !== locale?.currentLanguageTag ? termsLanguageTag : undefined}>
                 <Markdown>{termsMarkdown}</Markdown>
             </div>
diff --git a/src/login/pages/UpdateEmail.tsx b/src/login/pages/UpdateEmail.tsx
index 1bc301d0..0df7edae 100644
--- a/src/login/pages/UpdateEmail.tsx
+++ b/src/login/pages/UpdateEmail.tsx
@@ -4,22 +4,21 @@ import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>> & {
+type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
     doMakeUserConfirmPassword: boolean;
 };
 
 export default function UpdateEmail(props: UpdateEmailProps) {
-    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
-    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
@@ -29,6 +28,7 @@ export default function UpdateEmail(props: UpdateEmailProps) {
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={messagesPerField.exists("global")}
@@ -38,6 +38,7 @@ export default function UpdateEmail(props: UpdateEmailProps) {
             <form id="kc-update-email-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
                     kcContext={kcContext}
+                    i18n={i18n}
                     kcClsx={kcClsx}
                     onIsFormSubmittableValueChange={setIsFormSubmittable}
                     doMakeUserConfirmPassword={doMakeUserConfirmPassword}
diff --git a/src/login/pages/WebauthnAuthenticate.tsx b/src/login/pages/WebauthnAuthenticate.tsx
index bd90d3da..f3a704a9 100644
--- a/src/login/pages/WebauthnAuthenticate.tsx
+++ b/src/login/pages/WebauthnAuthenticate.tsx
@@ -5,10 +5,10 @@ import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
@@ -26,7 +26,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
         shouldDisplayAuthenticators
     } = kcContext;
 
-    const { msg, msgStr, advancedMsg } = useI18n({ kcContext });
+    const { msg, msgStr, advancedMsg } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
         componentOrHookName: "WebauthnAuthenticate",
@@ -137,6 +137,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             displayMessage={!messagesPerField.existsError("username")}
diff --git a/src/login/pages/WebauthnError.tsx b/src/login/pages/WebauthnError.tsx
index 52d5e3e9..c45feb9c 100644
--- a/src/login/pages/WebauthnError.tsx
+++ b/src/login/pages/WebauthnError.tsx
@@ -1,14 +1,14 @@
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { url, isAppInitiatedAction } = kcContext;
 
-    const { msg, msgStr } = useI18n({ kcContext });
+    const { msg, msgStr } = i18n;
 
     const { kcClsx } = getKcClsx({
         doUseDefaultCss,
@@ -16,7 +16,14 @@ export default function WebauthnError(props: PageProps<Extract<KcContext, { page
     });
 
     return (
-        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} displayMessage headerNode={msg("webauthn-error-title")}>
+        <Template
+            kcContext={kcContext}
+            i18n={i18n}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
+            displayMessage
+            headerNode={msg("webauthn-error-title")}
+        >
             <form id="kc-error-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <input type="hidden" id="executionValue" name="authenticationExecution" />
                 <input type="hidden" id="isSetRetry" name="isSetRetry" />
diff --git a/src/login/pages/WebauthnRegister.tsx b/src/login/pages/WebauthnRegister.tsx
index 7ca0b02b..f600eb17 100644
--- a/src/login/pages/WebauthnRegister.tsx
+++ b/src/login/pages/WebauthnRegister.tsx
@@ -4,10 +4,10 @@ import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import { useI18n, type I18n } from "../i18n";
+import type { I18n } from "../i18n";
 
-export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>>) {
-    const { kcContext, doUseDefaultCss, Template, classes } = props;
+export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
@@ -29,7 +29,6 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
         isAppInitiatedAction
     } = kcContext;
 
-    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
@@ -207,6 +206,7 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
     return (
         <Template
             kcContext={kcContext}
+            i18n={i18n}
             doUseDefaultCss={doUseDefaultCss}
             classes={classes}
             headerNode={
diff --git a/stories/account/KcApp.tsx b/stories/account/KcApp.tsx
index 23389f8c..1a9a10fb 100644
--- a/stories/account/KcApp.tsx
+++ b/stories/account/KcApp.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import Fallback from "../../dist/account/Fallback";
+import { useI18n } from "./i18n";
 import type { KcContext } from "./KcContext";
 import Template from "../../dist/account/Template";
 
 export default function KcApp(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
-    return <Fallback kcContext={kcContext} Template={Template} doUseDefaultCss={true} />;
+    const { i18n } = useI18n({ kcContext });
+
+    return <Fallback kcContext={kcContext} i18n={i18n} Template={Template} doUseDefaultCss={true} />;
 }
diff --git a/stories/login/KcApp.tsx b/stories/login/KcApp.tsx
index 1651436c..697a1e49 100644
--- a/stories/login/KcApp.tsx
+++ b/stories/login/KcApp.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Fallback from "../../dist/login/Fallback";
 import type { KcContext } from "./KcContext";
+import { useI18n } from "./i18n";
 import { useDownloadTerms } from "../../dist/login/lib/useDownloadTerms";
 import Template from "../../dist/login/Template";
 import UserProfileFormFields from "../../dist/login/UserProfileFormFields";
@@ -8,6 +9,8 @@ import UserProfileFormFields from "../../dist/login/UserProfileFormFields";
 export default function KcApp(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
+    const { i18n } = useI18n({ kcContext });
+
     useDownloadTerms({
         kcContext,
         downloadTermsMarkdown: async ({ currentLanguageTag }) => {
@@ -36,6 +39,7 @@ export default function KcApp(props: { kcContext: KcContext }) {
     return (
         <Fallback
             kcContext={kcContext}
+            i18n={i18n}
             Template={Template}
             doUseDefaultCss={true}
             UserProfileFormFields={UserProfileFormFields}