Update

src/account/KcPage.tsx

@@ -1,20 +1,24 @@
 import { Suspense } from "react";
 import type { ClassKey } from "keycloakify/account";
 import type { KcContext } from "./KcContext";
-import Fallback from "keycloakify/account/Fallback";
+import { useI18n } from "./i18n";
+import DefaultPage from "keycloakify/account/DefaultPage";
 import Template from "keycloakify/account/Template";
 
 export default function KcApp(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
+    const { i18n } = useI18n({ kcContext });
+
     return (
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
                     default:
                         return (
-                            <Fallback
+                            <DefaultPage
                                 kcContext={kcContext}
+                                i18n={i18n}
                                 classes={classes}
                                 Template={Template}
                                 doUseDefaultCss={true}

src/account/KcPageStory.tsx

@@ -5,7 +5,7 @@ import type {
     KcContextExtension,
     KcContextExtensionPerPage
 } from "./KcContext";
-import KcApp from "./KcApp";
+import KcPage from "./KcPage";
 import { themeNames, kcEnvDefaults } from "../kc.gen";
 
 const kcContextExtension: KcContextExtension = {
@@ -23,12 +23,12 @@ export const { getKcContextMock } = createGetKcContextMock({
     overridesPerPage: {}
 });
 
-export function createPageStory<PageId extends KcContext["pageId"]>(params: {
+export function createKcPageStory<PageId extends KcContext["pageId"]>(params: {
     pageId: PageId;
 }) {
     const { pageId } = params;
 
-    function PageStory(props: {
+    function KcPageStory(props: {
         kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
     }) {
         const { kcContext: overrides } = props;
@@ -38,8 +38,8 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
             overrides
         });
 
-        return <KcApp kcContext={kcContextMock} />;
+        return <KcPage kcContext={kcContextMock} />;
     }
 
-    return { PageStory };
+    return { KcPageStory };
 }

src/login/KcPage.tsx

@@ -2,7 +2,8 @@ import { Suspense, lazy } from "react";
 import type { ClassKey } from "keycloakify/login";
 import type { KcContext } from "./KcContext";
 import { useDownloadTerms } from "keycloakify/login";
-import Fallback from "keycloakify/login/Fallback";
+import { useI18n } from "./i18n";
+import DefaultPage from "keycloakify/login/DefaultPage";
 import Template from "keycloakify/login/Template";
 const UserProfileFormFields = lazy(() => import("keycloakify/login/UserProfileFormFields"));
 
@@ -36,14 +37,17 @@ export default function KcApp(props: { kcContext: KcContext }) {
         }
     });
 
+    const { i18n } = useI18n({ kcContext });
+
     return (
         <Suspense>
             {(() => {
                 switch (kcContext.pageId) {
                     default:
                         return (
-                            <Fallback
+                            <DefaultPage
                                 kcContext={kcContext}
+                                i18n={i18n}
                                 classes={classes}
                                 Template={Template}
                                 doUseDefaultCss={true}