Release candidate

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.39",
+    "version": "10.0.0-rc.42",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

src/account/DefaultPage.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 DefaultPage(props: PageProps<KcContext, I18n>) {
     const { kcContext, ...rest } = props;
 
     return (

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;
 

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 =

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>() };

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 };

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>

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>

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">

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>

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>>;
 };

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
             }}

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>

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">

src/bin/eject-page.ts

@@ -149,7 +149,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             break edit_KcApp;
         }
 
-        const kcAppTsxPath = pathJoin(themeSrcDirPath, themeType, "KcApp.tsx");
+        const kcAppTsxPath = pathJoin(themeSrcDirPath, themeType, "KcPage.tsx");
 
         const kcAppTsxCode = fs.readFileSync(kcAppTsxPath).toString("utf8");
 
@@ -172,7 +172,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         if (kcAppTsxCode === modifiedKcAppTsxCode) {
             console.log(
                 chalk.red(
-                    "Unable to automatically update KcApp.tsx, please update it manually"
+                    "Unable to automatically update KcPage.tsx, please update it manually"
                 )
             );
             return;
@@ -201,7 +201,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     ".",
                     pathRelative(process.cwd(), themeSrcDirPath),
                     themeType,
-                    "KcApp.tsx"
+                    "KcPage.tsx"
                 )
             )}:`,
             chalk.grey("```"),
@@ -215,7 +215,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             ),
             ...[
                 ``,
-                ` export default function KcApp(props: { kcContext: KcContext; }) {`,
+                ` export default function KcPage(props: { kcContext: KcContext; }) {`,
                 ``,
                 `     // ...`,
                 ``,
@@ -225,15 +225,16 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                 `                 switch (kcContext.pageId) {`,
                 `                     // ...`,
                 `+                    case "${pageIdOrComponent}": return (`,
-                `+                        <Login`,
+                `+                        <${componentBasename}`,
                 `+                            {...{ kcContext, i18n, classes }}`,
                 `+                            Template={Template}`,
+                `+                            doUseDefaultCss={true}`,
                 ...(!componentCode.includes(userProfileFormFieldComponentName)
                     ? []
                     : [
-                          `+                            ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`
+                          `+                            ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`,
+                          `+                            doMakeUserConfirmPassword={doMakeUserConfirmPassword}`
                       ]),
-                `+                            doUseDefaultCss={true}`,
                 `+                        />`,
                 `+                    );`,
                 `                     default: return <Fallback /* .. */ />;`,

src/bin/shared/generateKcGenTs.ts

@@ -3,6 +3,7 @@ import type { BuildContext } from "./buildContext";
 import { getThemeSrcDirPath } from "./getThemeSrcDirPath";
 import * as fs from "fs/promises";
 import { join as pathJoin } from "path";
+import { existsAsync } from "../tools/fs.existsAsync";
 
 export type BuildContextLike = {
     projectDirPath: string;
@@ -21,41 +22,50 @@ export async function generateKcGenTs(params: {
         projectDirPath: buildContext.projectDirPath
     });
 
-    await fs.writeFile(
-        pathJoin(themeSrcDirPath, "kc.gen.ts"),
-        Buffer.from(
-            [
-                `/* prettier-ignore-start */`,
-                ``,
-                `/* eslint-disable */`,
-                ``,
-                `// @ts-nocheck`,
-                ``,
-                `// noinspection JSUnusedGlobalSymbols`,
-                ``,
-                `// This file is auto-generated by Keycloakify`,
-                ``,
-                `export type ThemeName = ${buildContext.themeNames.map(themeName => `"${themeName}"`).join(" | ")};`,
-                ``,
-                `export const themeNames: ThemeName[] = [${buildContext.themeNames.map(themeName => `"${themeName}"`).join(", ")}];`,
-                ``,
-                `export type KcEnvName = ${buildContext.environmentVariables.length === 0 ? "never" : buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(" | ")};`,
-                ``,
-                `export const KcEnvNames: KcEnvName[] = [${buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(", ")}];`,
-                ``,
-                `export const kcEnvDefaults: Record<KcEnvName, string> = ${JSON.stringify(
-                    Object.fromEntries(
-                        buildContext.environmentVariables.map(
-                            ({ name, default: defaultValue }) => [name, defaultValue]
-                        )
-                    ),
-                    null,
-                    2
-                )};`,
-                ``,
-                `/* prettier-ignore-end */`
-            ].join("\n"),
-            "utf8"
-        )
+    const filePath = pathJoin(themeSrcDirPath, "kc.gen.ts");
+
+    const currentContent = (await existsAsync(filePath))
+        ? await fs.readFile(filePath)
+        : undefined;
+
+    const newContent = Buffer.from(
+        [
+            `/* prettier-ignore-start */`,
+            ``,
+            `/* eslint-disable */`,
+            ``,
+            `// @ts-nocheck`,
+            ``,
+            `// noinspection JSUnusedGlobalSymbols`,
+            ``,
+            `// This file is auto-generated by Keycloakify`,
+            ``,
+            `export type ThemeName = ${buildContext.themeNames.map(themeName => `"${themeName}"`).join(" | ")};`,
+            ``,
+            `export const themeNames: ThemeName[] = [${buildContext.themeNames.map(themeName => `"${themeName}"`).join(", ")}];`,
+            ``,
+            `export type KcEnvName = ${buildContext.environmentVariables.length === 0 ? "never" : buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(" | ")};`,
+            ``,
+            `export const KcEnvNames: KcEnvName[] = [${buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(", ")}];`,
+            ``,
+            `export const kcEnvDefaults: Record<KcEnvName, string> = ${JSON.stringify(
+                Object.fromEntries(
+                    buildContext.environmentVariables.map(
+                        ({ name, default: defaultValue }) => [name, defaultValue]
+                    )
+                ),
+                null,
+                2
+            )};`,
+            ``,
+            `/* prettier-ignore-end */`
+        ].join("\n"),
+        "utf8"
     );
+
+    if (currentContent !== undefined && currentContent.equals(newContent)) {
+        return;
+    }
+
+    await fs.writeFile(filePath, newContent);
 }

src/login/DefaultPage.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,12 +41,12 @@ 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 DefaultPageProps = PageProps<KcContext, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
     doMakeUserConfirmPassword: boolean;
 };
 
-export default function Fallback(props: FallbackProps) {
+export default function DefaultPage(props: DefaultPageProps) {
     const { kcContext, ...rest } = props;
 
     return (

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;
 

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 =

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 (

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>() };

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 };

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: {

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)}

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>

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}

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 && (

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")}

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}

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}

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")}

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>

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

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>

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")}

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"

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")}

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}>

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")}

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" />

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")}

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")}

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

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")}

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}

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")}

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

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")}>

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">

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>>;
 };

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}

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} />}

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}

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>

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}

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")}

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" />

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={

stories/account/KcApp.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import Fallback from "../../dist/account/Fallback";
-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} />;
-}

stories/account/KcPage.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import DefaultPage from "../../dist/account/Fallback";
+import { useI18n } from "./i18n";
+import type { KcContext } from "./KcContext";
+import Template from "../../dist/account/Template";
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    const { i18n } = useI18n({ kcContext });
+
+    return <DefaultPage kcContext={kcContext} i18n={i18n} Template={Template} doUseDefaultCss={true} />;
+}

stories/account/KcPageStory.tsx

@@ -3,7 +3,7 @@ import type { DeepPartial } from "../../dist/tools/DeepPartial";
 import type { KcContext } from "./KcContext";
 import { createGetKcContextMock } from "../../dist/account/KcContext";
 import type { KcContextExtension, KcContextExtensionPerPage } from "./KcContext";
-import KcApp from "./KcApp";
+import KcPage from "./KcPage";
 import { themeNames, kcEnvDefaults } from "../kc.gen";
 
 const kcContextExtension: KcContextExtension = {
@@ -21,10 +21,10 @@ export const { getKcContextMock } = createGetKcContextMock({
     overridesPerPage: {}
 });
 
-export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+export function createKcPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
     const { pageId } = params;
 
-    function PageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+    function KcPageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
         const { kcContext: overrides } = props;
 
         const kcContextMock = getKcContextMock({
@@ -34,10 +34,10 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: { pa
 
         return (
             <React.StrictMode>
-                <KcApp kcContext={kcContextMock} />
+                <KcPage kcContext={kcContextMock} />
             </React.StrictMode>
         );
     }
 
-    return { PageStory };
+    return { KcPageStory };
 }

stories/account/pages/Account.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "account.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "account.ftl" });
 
 const meta = {
     title: "account/account.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/account/pages/FederatedIdentity.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "federatedIdentity.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "federatedIdentity.ftl" });
 
 const meta = {
     title: "account/federatedIdentity.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const NotConnected: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 pageId: "federatedIdentity.ftl",
                 federatedIdentity: {

stories/account/pages/Log.stories.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({
+const { KcPageStory } = createKcPageStory({
     pageId: "log.ftl"
 });
 
 const meta = {
     title: "account/log.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 log: {
                     events: [

stories/account/pages/Password.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "password.ftl" });
 
 const meta = {
     title: "account/password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithMessage: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: { type: "success", summary: "This is a test message" }
             }}

stories/account/pages/Sessions.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "sessions.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "sessions.ftl" });
 
 const meta = {
     title: "account/sessions.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 sessions: {
                     sessions: [
@@ -45,7 +45,7 @@ export const Default: Story = {
 
 export const WithError: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 url: { passwordUrl: "/auth/realms/keycloakify/account/password" },
                 stateChecker: "xQ7EOgFrLi4EvnJ8dbXKhwFGWk_bkOp0X89mhilt1os",

stories/account/pages/Totp.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "totp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "totp.ftl" });
 
 const meta = {
     title: "account/totp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 totp: {
                     enabled: false,
@@ -51,7 +51,7 @@ export const Default: Story = {
 
 export const WithTotpEnabled: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 totp: {
                     enabled: true,
@@ -98,7 +98,7 @@ export const WithTotpEnabled: Story = {
 
 export const WithManualMode: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 mode: "manual",
                 totp: {
@@ -136,7 +136,7 @@ export const WithManualMode: Story = {
 
 export const MoreThanOneTotpProviders: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 totp: {
                     enabled: true,

stories/login/KcPage.tsx

@@ -1,13 +1,16 @@
 import React from "react";
-import Fallback from "../../dist/login/Fallback";
+import DefaultPage 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";
 
-export default function KcApp(props: { kcContext: KcContext }) {
+export default function KcPage(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
+    const { i18n } = useI18n({ kcContext });
+
     useDownloadTerms({
         kcContext,
         downloadTermsMarkdown: async ({ currentLanguageTag }) => {
@@ -34,8 +37,9 @@ export default function KcApp(props: { kcContext: KcContext }) {
     });
 
     return (
-        <Fallback
+        <DefaultPage
             kcContext={kcContext}
+            i18n={i18n}
             Template={Template}
             doUseDefaultCss={true}
             UserProfileFormFields={UserProfileFormFields}

stories/login/KcPageStory.tsx

@@ -3,7 +3,7 @@ import type { DeepPartial } from "../../dist/tools/DeepPartial";
 import type { KcContext } from "./KcContext";
 import { createGetKcContextMock } from "../../dist/login/KcContext";
 import type { KcContextExtension, KcContextExtensionPerPage } from "./KcContext";
-import KcApp from "./KcApp";
+import KcPage from "./KcPage";
 import { themeNames, kcEnvDefaults } from "../kc.gen";
 
 const kcContextExtension: KcContextExtension = {
@@ -21,10 +21,10 @@ export const { getKcContextMock } = createGetKcContextMock({
     overridesPerPage: {}
 });
 
-export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+export function createKcPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
     const { pageId } = params;
 
-    function PageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+    function KcPageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
         const { kcContext: overrides } = props;
 
         const kcContextMock = getKcContextMock({
@@ -34,10 +34,10 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: { pa
 
         return (
             <React.StrictMode>
-                <KcApp kcContext={kcContextMock} />
+                <KcPage kcContext={kcContextMock} />
             </React.StrictMode>
         );
     }
 
-    return { PageStory };
+    return { KcPageStory };
 }

stories/login/pages/Code.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "code.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "code.ftl" });
 
 const meta = {
     title: "login/code.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/DeleteAccountConfirm.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "delete-account-confirm.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "delete-account-confirm.ftl" });
 
 const meta = {
     title: "login/delete-account-confirm.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/DeleteCredential.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "delete-credential.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "delete-credential.ftl" });
 
 const meta = {
     title: "login/delete-credential.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/Error.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "error.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "error.ftl" });
 
 const meta = {
     title: "login/error.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithAnotherMessage: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: { summary: "With another error message" }
             }}

stories/login/pages/FrontchannelLogout.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "frontchannel-logout.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "frontchannel-logout.ftl" });
 
 const meta = {
     title: "login/frontchannel-logout.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/IdpReviewUserProfile.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "idp-review-user-profile.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "idp-review-user-profile.ftl" });
 
 const meta = {
     title: "login/idp-review-user-profile.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/Info.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "info.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "info.ftl" });
 
 const meta = {
     title: "login/info.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: {
                     summary: "Server info message"
@@ -27,7 +27,7 @@ export const Default: Story = {
 
 export const WithLinkBack: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: {
                     summary: "Server message"
@@ -40,7 +40,7 @@ export const WithLinkBack: Story = {
 
 export const WithRequiredActions: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 message: {
                     summary: "Server message"

stories/login/pages/Login.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login.ftl" });
 
 const meta = {
     title: "login/login.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithoutRegistration: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { registrationAllowed: false }
             }}
@@ -29,7 +29,7 @@ export const WithoutRegistration: Story = {
 
 export const WithoutRememberMe: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { rememberMe: false }
             }}
@@ -39,7 +39,7 @@ export const WithoutRememberMe: Story = {
 
 export const WithoutPasswordReset: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { resetPasswordAllowed: false }
             }}
@@ -49,7 +49,7 @@ export const WithoutPasswordReset: Story = {
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { loginWithEmailAllowed: false }
             }}
@@ -59,7 +59,7 @@ export const WithEmailAsUsername: Story = {
 
 export const WithPresetUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 login: { username: "max.mustermann@mail.com" }
             }}
@@ -69,7 +69,7 @@ export const WithPresetUsername: Story = {
 
 export const WithImmutablePresetUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 auth: {
                     attemptedUsername: "max.mustermann@mail.com",
@@ -87,7 +87,7 @@ export const WithImmutablePresetUsername: Story = {
 
 export const WithSocialProviders: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 social: {
                     displayInfo: true,
@@ -173,7 +173,7 @@ export const WithSocialProviders: Story = {
 
 export const WithoutPasswordField: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: { password: false }
             }}

stories/login/pages/LoginConfigTotp.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-config-totp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-config-totp.ftl" });
 
 const meta = {
     title: "login/login-config-totp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithManualSetUp: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 mode: "manual"
             }}
@@ -29,7 +29,7 @@ export const WithManualSetUp: Story = {
 
 export const WithError: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 messagesPerField: {
                     get: (fieldName: string) => (fieldName === "totp" ? "Invalid TOTP" : undefined),

stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
 
 const meta = {
     title: "login/login-oauth2-device-verify-user-code.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginIdpLinkConfirm.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-idp-link-confirm.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-confirm.ftl" });
 
 const meta = {
     title: "login/login-idp-link-confirm.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginIdpLinkEmail.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-idp-link-email.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-email.ftl" });
 
 const meta = {
     title: "login/login-idp-link-email.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-oauth2-device-verify-user-code.ftl" });
 
 const meta = {
     title: "login/login-oauth2-device-verify-user-code.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginOauthGrant.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-oauth-grant.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-oauth-grant.ftl" });
 
 const meta = {
     title: "login/login-oauth-grant.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginOtp.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-otp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-otp.ftl" });
 
 const meta = {
     title: "login/login-otp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginPageExpired.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-page-expired.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-page-expired.ftl" });
 
 const meta = {
     title: "login/login-page-expired.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginPassword.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-password.ftl" });
 
 const meta = {
     title: "login/login-password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-recovery-authn-code-config.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-recovery-authn-code-config.ftl" });
 
 const meta = {
     title: "login/login-recovery-authn-code-config.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginRecoveryAuthnCodeInput.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-recovery-authn-code-input.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-recovery-authn-code-input.ftl" });
 
 const meta = {
     title: "login/login-recovery-authn-code-input.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginResetOtp.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-reset-otp.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-reset-otp.ftl" });
 
 const meta = {
     title: "login/login-reset-otp.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginResetPassword.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-reset-password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-reset-password.ftl" });
 
 const meta = {
     title: "login/login-reset-password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: {
                     loginWithEmailAllowed: true,

stories/login/pages/LoginUpdatePassword.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-update-password.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-update-password.ftl" });
 
 const meta = {
     title: "login/login-update-password.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginUpdateProfile.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-update-profile.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-update-profile.ftl" });
 
 const meta = {
     title: "login/login-update-profile.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginUsername.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-username.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-username.ftl" });
 
 const meta = {
     title: "login/login-username.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: {
                     loginWithEmailAllowed: true,

stories/login/pages/LoginVerifyEmail.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-verify-email.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-verify-email.ftl" });
 
 const meta = {
     title: "login/login-verify-email.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LoginX509Info.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "login-x509-info.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "login-x509-info.ftl" });
 
 const meta = {
     title: "login/login-x509-info.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/LogoutConfirm.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "logout-confirm.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "logout-confirm.ftl" });
 
 const meta = {
     title: "login/logout-confirm.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/Register.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "register.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "register.ftl" });
 
 const meta = {
     title: "login/register.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithFieldError: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 profile: {
                     attributesByName: {
@@ -41,7 +41,7 @@ export const WithFieldError: Story = {
 
 export const WithEmailAsUsername: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 realm: {
                     registrationEmailAsUsername: true
@@ -53,7 +53,7 @@ export const WithEmailAsUsername: Story = {
 
 export const WithoutPassword: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 passwordRequired: false
             }}
@@ -63,7 +63,7 @@ export const WithoutPassword: Story = {
 
 export const WithRecaptcha: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 scripts: ["https://www.google.com/recaptcha/api.js?hl=en"],
                 recaptchaRequired: true,
@@ -75,7 +75,7 @@ export const WithRecaptcha: Story = {
 
 export const WithRecaptchaFrench: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 locale: {
                     currentLanguageTag: "fr"
@@ -90,7 +90,7 @@ export const WithRecaptchaFrench: Story = {
 
 export const WithPresets: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 profile: {
                     attributesByName: {

stories/login/pages/SamlPostForm.stories.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "saml-post-form.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "saml-post-form.ftl" });
 
 const meta = {
     title: "login/saml-post-form.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };

stories/login/pages/SelectAuthenticator.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "select-authenticator.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "select-authenticator.ftl" });
 
 const meta = {
     title: "login/select-authenticator.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const WithDifferentAuthenticationMethods: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 auth: {
                     authenticationSelections: [

stories/login/pages/Terms.stories.tsx

@@ -1,25 +1,25 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../PageStory";
+import { createKcPageStory } from "../KcPageStory";
 
-const { PageStory } = createPageStory({ pageId: "terms.ftl" });
+const { KcPageStory } = createKcPageStory({ pageId: "terms.ftl" });
 
 const meta = {
     title: "login/terms.ftl",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <PageStory />
+    render: () => <KcPageStory />
 };
 
 export const French: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 locale: {
                     currentLanguageTag: "fr"
@@ -31,7 +31,7 @@ export const French: Story = {
 
 export const Spanish: Story = {
     render: () => (
-        <PageStory
+        <KcPageStory
             kcContext={{
                 locale: {
                     currentLanguageTag: "es"