keycloakify 9.0.0-rc.0 → 9.0.0

package/src/bin/keycloakify/generateJavaStackFiles/generateJavaStackFiles.ts

@@ -36,113 +36,42 @@ export async function generateJavaStackFiles(params: {
             const pomFileCode = [
                 `<?xml version="1.0"?>`,
                 `<project xmlns="http://maven.apache.org/POM/4.0.0"`,
-                `	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`,
-                `	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
-                `	<modelVersion>4.0.0</modelVersion>`,
+                `	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`,
+                `	 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
+                `  <modelVersion>4.0.0</modelVersion>`,
                 `	<groupId>${buildOptions.groupId}</groupId>`,
                 `	<artifactId>${buildOptions.artifactId}</artifactId>`,
                 `	<version>${buildOptions.themeVersion}</version>`,
                 `	<name>${buildOptions.artifactId}</name>`,
-                `	<description />`,
-                `	<packaging>jar</packaging>`,
-                `	<properties>`,
-                `	    <java.version>17</java.version>`,
-                `	    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>`,
-                `	    <keycloak.version>999.0.0-SNAPSHOT</keycloak.version>`,
-                `	    <guava.version>32.0.0-jre</guava.version>`,
-                `	    <lombok.version>1.18.28</lombok.version>`,
-                `	    <auto-service.version>1.1.1</auto-service.version>`,
-                `	</properties>`,
-                `	<build>`,
-                `	    <plugins>`,
-                `	        <plugin>`,
-                `	            <artifactId>maven-compiler-plugin</artifactId>`,
-                `	            <version>3.11.0</version>`,
-                `	            <configuration>`,
-                `	                <source>\${java.version}</source>`,
-                `	                <target>\${java.version}</target>`,
-                `	                <compilerArgument>-Xlint:unchecked</compilerArgument>`,
-                `	                <compilerArgument>-Xlint:deprecation</compilerArgument>`,
-                `	                <useIncrementalCompilation>false</useIncrementalCompilation>`,
-                `	                <annotationProcessorPaths>`,
-                `	                    <path>`,
-                `	                        <groupId>com.google.auto.service</groupId>`,
-                `	                        <artifactId>auto-service</artifactId>`,
-                `	                        <version>\${auto-service.version}</version>`,
-                `	                    </path>`,
-                `	                    <path>`,
-                `	                        <groupId>org.projectlombok</groupId>`,
-                `	                        <artifactId>lombok</artifactId>`,
-                `	                        <version>\${lombok.version}</version>`,
-                `	                    </path>`,
-                `	                </annotationProcessorPaths>`,
-                `	            </configuration>`,
-                `	        </plugin>`,
-                `	        <plugin>`,
-                `	            <groupId>org.apache.maven.plugins</groupId>`,
-                `	            <artifactId>maven-jar-plugin</artifactId>`,
-                `	            <version>3.2.0</version>`,
-                `	            <configuration>`,
-                `	                <archive>`,
-                `	                    <manifestEntries>`,
-                `	                        <Dependencies>`,
-                `	                            <![CDATA[org.keycloak.keycloak-common,org.keycloak.keycloak-core,org.keycloak.keycloak-server-spi,org.keycloak.keycloak-server-spi-private,org.keycloak.keycloak-services,com.google.guava]]>`,
-                `	                        </Dependencies>`,
-                `	                    </manifestEntries>`,
-                `	                </archive>`,
-                `	            </configuration>`,
-                `	        </plugin>`,
-                `	        <plugin>`,
-                `	            <groupId>com.spotify.fmt</groupId>`,
-                `	            <artifactId>fmt-maven-plugin</artifactId>`,
-                `	            <version>2.20</version>`,
-                `	        </plugin>`,
-                `	    </plugins>`,
-                `	</build>`,
-                `	<dependencies>`,
-                `	    <dependency>`,
-                `	        <groupId>org.projectlombok</groupId>`,
-                `	        <artifactId>lombok</artifactId>`,
-                `	        <version>\${lombok.version}</version>`,
-                `	        <scope>provided</scope>`,
-                `	    </dependency>`,
-                `	    <dependency>`,
-                `	        <groupId>com.google.auto.service</groupId>`,
-                `	        <artifactId>auto-service</artifactId>`,
-                `	        <version>\${auto-service.version}</version>`,
-                `	        <scope>provided</scope>`,
-                `	    </dependency>`,
-                `	    <dependency>`,
-                `	        <groupId>org.keycloak</groupId>`,
-                `	        <artifactId>keycloak-server-spi</artifactId>`,
-                `	        <version>\${keycloak.version}</version>`,
-                `	        <scope>provided</scope>`,
-                `	    </dependency>`,
-                `	    <dependency>`,
-                `	        <groupId>org.keycloak</groupId>`,
-                `	        <artifactId>keycloak-server-spi-private</artifactId>`,
-                `	        <version>\${keycloak.version}</version>`,
-                `	        <scope>provided</scope>`,
-                `	    </dependency>`,
-                `	    <dependency>`,
-                `	        <groupId>org.keycloak</groupId>`,
-                `	        <artifactId>keycloak-services</artifactId>`,
-                `	        <version>\${keycloak.version}</version>`,
-                `	        <scope>provided</scope>`,
-                `	    </dependency>`,
-                `	    <dependency>`,
-                `	        <groupId>jakarta.ws.rs</groupId>`,
-                `	        <artifactId>jakarta.ws.rs-api</artifactId>`,
-                `	        <version>3.1.0</version>`,
-                `	        <scope>provided</scope>`,
-                `	    </dependency>`,
-                `	    <dependency>`,
-                `	        <groupId>com.google.guava</groupId>`,
-                `	        <artifactId>guava</artifactId>`,
-                `	        <version>\${guava.version}</version>`,
-                `	        <scope>provided</scope>`,
-                `	    </dependency>`,
-                `	</dependencies>`,
+                `  <description />`,
+                `  <packaging>jar</packaging>`,
+                `  <properties>`,
+                `    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>`,
+                `  </properties>`,
+                `  <build>`,
+                `    <plugins>`,
+                `      <plugin>`,
+                `        <groupId>org.apache.maven.plugins</groupId>`,
+                `        <artifactId>maven-shade-plugin</artifactId>`,
+                `	<version>3.5.1</version>`,
+                `        <executions>`,
+                `          <execution>`,
+                `            <phase>package</phase>`,
+                `            <goals>`,
+                `              <goal>shade</goal>`,
+                `            </goals>`,
+                `          </execution>`,
+                `        </executions>`,
+                `      </plugin>`,
+                `    </plugins>`,
+                `  </build>`,
+                `  <dependencies>`,
+                `    <dependency>`,
+                `      <groupId>io.phasetwo.keycloak</groupId>`,
+                `      <artifactId>keycloak-account-v1</artifactId>`,
+                `      <version>0.1</version>`,
+                `    </dependency>`,
+                `  </dependencies>`,
                 `</project>`
             ].join("\n");
 

package/src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -1,5 +1,5 @@
 import * as fs from "fs";
-import { join as pathJoin } from "path";
+import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
 import type { BuildOptions } from "./BuildOptions";
@@ -19,8 +19,8 @@ generateStartKeycloakTestingContainer.basename = "start_keycloak_testing_contain
 const containerName = "keycloak-testing-container";
 
 /** Files for being able to run a hot reload keycloak container */
-export function generateStartKeycloakTestingContainer(params: { keycloakVersion: string; buildOptions: BuildOptionsLike }) {
-    const { keycloakVersion, buildOptions } = params;
+export function generateStartKeycloakTestingContainer(params: { jarFilePath: string; keycloakVersion: string; buildOptions: BuildOptionsLike }) {
+    const { jarFilePath, keycloakVersion, buildOptions } = params;
 
     const themeRelativeDirPath = pathJoin("src", "main", "resources", "theme");
     const themeDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, themeRelativeDirPath);
@@ -40,12 +40,19 @@ export function generateStartKeycloakTestingContainer(params: { keycloakVersion:
                 `   --name ${containerName} \\`,
                 "   -e KEYCLOAK_ADMIN=admin \\",
                 "   -e KEYCLOAK_ADMIN_PASSWORD=admin \\",
+                `   -v "${pathJoin(
+                    "$(pwd)",
+                    pathRelative(buildOptions.keycloakifyBuildDirPath, jarFilePath)
+                )}":"/opt/keycloak/providers/${pathBasename(jarFilePath)}" \\`,
                 ...fs
                     .readdirSync(themeDirPath)
                     .filter(name => fs.lstatSync(pathJoin(themeDirPath, name)).isDirectory())
                     .map(
                         themeName =>
-                            `   -v "${pathJoin(".", themeRelativeDirPath, themeName).replace(/\\/g, "/")}":"/opt/keycloak/themes/${themeName}":rw \\`
+                            `   -v "${pathJoin("$(pwd)", themeRelativeDirPath, themeName).replace(
+                                /\\/g,
+                                "/"
+                            )}":"/opt/keycloak/themes/${themeName}":rw \\`
                     ),
                 `   -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
                 `   start-dev --features=declarative-user-profile`,

package/src/bin/keycloakify/generateTheme/downloadKeycloakStaticResources.ts

@@ -1,6 +1,6 @@
 import { transformCodebase } from "../../tools/transformCodebase";
 import * as fs from "fs";
-import { join as pathJoin } from "path";
+import { join as pathJoin, dirname as pathDirname } from "path";
 import { downloadBuiltinKeycloakTheme } from "../../download-builtin-keycloak-theme";
 import { resources_common, type ThemeType } from "../../constants";
 import { BuildOptions } from "../BuildOptions";
@@ -21,12 +21,36 @@ export async function downloadKeycloakStaticResources(
         keycloakVersion: string;
         usedResources: {
             resourcesCommonFilePaths: string[];
-            resourcesFilePaths: string[];
         } | undefined;
         buildOptions: BuildOptionsLike;
     }
 ) {
-    const { themeType, themeDirPath, keycloakVersion, usedResources, buildOptions } = params;
+    const { themeType, themeDirPath, keycloakVersion, buildOptions } = params;
+
+    // NOTE: Hack for 427
+    const usedResources = (() => {
+        const { usedResources } = params;
+
+        if (usedResources === undefined) {
+            return undefined;
+        }
+
+        assert(usedResources !== undefined);
+
+        return {
+            "resourcesCommonDirPaths": usedResources.resourcesCommonFilePaths.map(filePath => {
+                {
+                    const splitArg = "/dist/";
+
+                    if (filePath.includes(splitArg)) {
+                        return filePath.split(splitArg)[0] + splitArg;
+                    }
+                }
+
+                return pathDirname(filePath);
+            })
+        };
+    })();
 
     const tmpDirPath = pathJoin(
         themeDirPath,
@@ -43,17 +67,7 @@ export async function downloadKeycloakStaticResources(
 
     transformCodebase({
         "srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
-        "destDirPath": resourcesPath,
-        "transformSourceCode":
-            usedResources === undefined
-                ? undefined
-                : ({ fileRelativePath, sourceCode }) => {
-                      if (!usedResources.resourcesFilePaths.includes(fileRelativePath)) {
-                          return undefined;
-                      }
-
-                      return { "modifiedSourceCode": sourceCode };
-                  }
+        "destDirPath": resourcesPath
     });
 
     transformCodebase({
@@ -63,7 +77,7 @@ export async function downloadKeycloakStaticResources(
             usedResources === undefined
                 ? undefined
                 : ({ fileRelativePath, sourceCode }) => {
-                      if (!usedResources.resourcesCommonFilePaths.includes(fileRelativePath)) {
+                      if (usedResources.resourcesCommonDirPaths.find(dirPath => fileRelativePath.startsWith(dirPath)) === undefined) {
                           return undefined;
                       }
 

package/src/bin/keycloakify/generateTheme/readStaticResourcesUsage.ts

@@ -1,17 +1,15 @@
 import { crawl } from "../../tools/crawl";
-import { join as pathJoin } from "path";
+import { join as pathJoin, sep as pathSep } from "path";
 import * as fs from "fs";
 import type { ThemeType } from "../../constants";
 
 /** Assumes the theme type exists */
 export function readStaticResourcesUsage(params: { keycloakifySrcDirPath: string; themeSrcDirPath: string; themeType: ThemeType }): {
     resourcesCommonFilePaths: string[];
-    resourcesFilePaths: string[];
 } {
     const { keycloakifySrcDirPath, themeSrcDirPath, themeType } = params;
 
     const resourcesCommonFilePaths = new Set<string>();
-    const resourcesFilePaths = new Set<string>();
 
     for (const srcDirPath of [pathJoin(keycloakifySrcDirPath, themeType), pathJoin(themeSrcDirPath, themeType)]) {
         const filePaths = crawl({ "dirPath": srcDirPath, "returnedPathsType": "absolute" }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
@@ -26,58 +24,53 @@ export function readStaticResourcesUsage(params: { keycloakifySrcDirPath: string
             const wrap = readPaths({ rawSourceFile });
 
             wrap.resourcesCommonFilePaths.forEach(filePath => resourcesCommonFilePaths.add(filePath));
-            wrap.resourcesFilePaths.forEach(filePath => resourcesFilePaths.add(filePath));
         }
     }
 
     return {
-        "resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths),
-        "resourcesFilePaths": Array.from(resourcesFilePaths)
+        "resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths)
     };
 }
 
 /** Exported for testing purpose */
 export function readPaths(params: { rawSourceFile: string }): {
     resourcesCommonFilePaths: string[];
-    resourcesFilePaths: string[];
 } {
     const { rawSourceFile } = params;
 
     const resourcesCommonFilePaths = new Set<string>();
-    const resourcesFilePaths = new Set<string>();
 
-    for (const isCommon of [true, false]) {
-        const set = isCommon ? resourcesCommonFilePaths : resourcesFilePaths;
+    {
+        const regexp = new RegExp(`resourcesCommonPath\\s*}([^\`]+)\``, "g");
 
-        {
-            const regexp = new RegExp(`resources${isCommon ? "Common" : ""}Path\\s*}([^\`]+)\``, "g");
+        const matches = [...rawSourceFile.matchAll(regexp)];
 
-            const matches = [...rawSourceFile.matchAll(regexp)];
+        for (const match of matches) {
+            const filePath = match[1];
 
-            for (const match of matches) {
-                const filePath = match[1];
-
-                set.add(filePath);
-            }
+            resourcesCommonFilePaths.add(filePath);
         }
+    }
 
-        {
-            const regexp = new RegExp(`resources${isCommon ? "Common" : ""}Path\\s*[+,]\\s*["']([^"'\`]+)["'\`]`, "g");
+    {
+        const regexp = new RegExp(`resourcesCommonPath\\s*[+,]\\s*["']([^"'\`]+)["'\`]`, "g");
 
-            const matches = [...rawSourceFile.matchAll(regexp)];
+        const matches = [...rawSourceFile.matchAll(regexp)];
 
-            for (const match of matches) {
-                const filePath = match[1];
+        for (const match of matches) {
+            const filePath = match[1];
 
-                set.add(filePath);
-            }
+            resourcesCommonFilePaths.add(filePath);
         }
     }
 
-    const removePrefixSlash = (filePath: string) => (filePath.startsWith("/") ? filePath.slice(1) : filePath);
+    const normalizePath = (filePath: string) => {
+        filePath = filePath.startsWith("/") ? filePath.slice(1) : filePath;
+        filePath = filePath.replace(/\//g, pathSep);
+        return filePath;
+    };
 
     return {
-        "resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths).map(removePrefixSlash),
-        "resourcesFilePaths": Array.from(resourcesFilePaths).map(removePrefixSlash)
+        "resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths).map(normalizePath)
     };
 }

package/src/bin/keycloakify/keycloakify.ts

@@ -63,14 +63,14 @@ export async function main() {
     });
 
     if (buildOptions.doCreateJar) {
-        child_process.execSync("mvn package", { "cwd": buildOptions.keycloakifyBuildDirPath });
+        child_process.execSync("mvn clean install", { "cwd": buildOptions.keycloakifyBuildDirPath });
     }
 
-    // We want, however, to test in a container running the latest Keycloak version
-    const containerKeycloakVersion = "21.1.2";
+    const containerKeycloakVersion = "23.0.0";
 
     generateStartKeycloakTestingContainer({
         "keycloakVersion": containerKeycloakVersion,
+        jarFilePath,
         buildOptions
     });
 

package/src/bin/keycloakify/replacers/replaceImportsFromStaticInJsCode.ts

@@ -16,18 +16,25 @@ export function replaceImportsFromStaticInJsCode(params: { jsCode: string }): {
     const { jsCode } = params;
 
     const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [
-        new RegExp(`([a-zA-Z_]+)\\.([a-zA-Z]+)=function\\(([a-zA-Z]+)\\){return"static\\/${language}\\/"`, "g"),
-        (...[, n, u, e]) => `
-			${n}[(function(){
-                var pd= Object.getOwnPropertyDescriptor(${n}, "p");
+        new RegExp(`([a-zA-Z_]+)\\.([a-zA-Z]+)=(function\\(([a-z]+)\\){return|([a-z]+)=>)"static\\/${language}\\/"`, "g"),
+        (...[, n, u, matchedFunction, eForFunction]) => {
+            const isArrowFunction = matchedFunction.includes("=>");
+            const e = isArrowFunction ? matchedFunction.replace("=>", "").trim() : eForFunction;
+
+            return `
+            ${n}[(function(){
+                var pd = Object.getOwnPropertyDescriptor(${n}, "p");
                 if( pd === undefined || pd.configurable ){
                     Object.defineProperty(${n}, "p", {
                         get: function() { return window.${ftlValuesGlobalName}.url.resourcesPath; },
-                        set: function (){}
+                        set: function() {}
                     });
                 }
-				return "${u}";
-			})()] = function(${e}) { return "${true ? "/build/" : ""}static/${language}/"`
+                return "${u}";
+            })()] = ${isArrowFunction ? `${e} =>` : `function(${e}) { return `} "/build/static/${language}/"`
+                .replace(/\s+/g, " ")
+                .trim();
+        }
     ];
 
     const fixedJsCode = jsCode

package/src/lib/usePrepareTemplate.ts

@@ -23,24 +23,21 @@ export function usePrepareTemplate(params: {
         const removeArray: (() => void)[] = [];
 
         (async () => {
-            const prLoadedArray: Promise<void>[] = [];
-
-            styles.reverse().forEach(href => {
+            for (const style of [...styles].reverse()) {
                 const { prLoaded, remove } = headInsert({
                     "type": "css",
                     "position": "prepend",
-                    href
+                    "href": style
                 });
 
                 removeArray.push(remove);
 
-                prLoadedArray.push(prLoaded);
-            });
-
-            await Promise.all(prLoadedArray);
+                // TODO: Find a way to do that in parallel (without breaking the order)
+                await prLoaded;
 
-            if (isUnmounted) {
-                return;
+                if (isUnmounted) {
+                    return;
+                }
             }
 
             setReady();

package/src/login/Fallback.tsx

@@ -12,6 +12,8 @@ const Error = lazy(() => import("keycloakify/login/pages/Error"));
 const LoginResetPassword = lazy(() => import("keycloakify/login/pages/LoginResetPassword"));
 const LoginVerifyEmail = lazy(() => import("keycloakify/login/pages/LoginVerifyEmail"));
 const Terms = lazy(() => import("keycloakify/login/pages/Terms"));
+const LoginDeviceVerifyUserCode = lazy(() => import("keycloakify/login/pages/LoginDeviceVerifyUserCode"));
+const LoginOauthGrant = lazy(() => import("keycloakify/login/pages/LoginOauthGrant"));
 const LoginOtp = lazy(() => import("keycloakify/login/pages/LoginOtp"));
 const LoginPassword = lazy(() => import("keycloakify/login/pages/LoginPassword"));
 const LoginUsername = lazy(() => import("keycloakify/login/pages/LoginUsername"));
@@ -52,6 +54,10 @@ export default function Fallback(props: PageProps<KcContext, I18n>) {
                         return <LoginVerifyEmail kcContext={kcContext} {...rest} />;
                     case "terms.ftl":
                         return <Terms kcContext={kcContext} {...rest} />;
+                    case "login-oauth2-device-verify-user-code.ftl":
+                        return <LoginDeviceVerifyUserCode kcContext={kcContext} {...rest} />;
+                    case "login-oauth-grant.ftl":
+                        return <LoginOauthGrant kcContext={kcContext} {...rest} />;
                     case "login-otp.ftl":
                         return <LoginOtp kcContext={kcContext} {...rest} />;
                     case "login-username.ftl":

package/src/login/Template.tsx

@@ -38,7 +38,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
             `${url.resourcesPath}/css/login.css`
         ],
         "htmlClassName": getClassName("kcHtmlClass"),
-        "bodyClassName": undefined
+        "bodyClassName": getClassName("kcBodyClass")
     });
 
     if (!isReady) {

package/src/login/TemplateProps.ts

@@ -21,6 +21,7 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
 };
 
 export type ClassKey =
+    | "kcBodyClass"
     | "kcHtmlClass"
     | "kcLoginClass"
     | "kcHeaderClass"
@@ -93,4 +94,5 @@ export type ClassKey =
     | "kcSelectOTPListItemClass"
     | "kcAuthenticatorOtpCircleClass"
     | "kcSelectOTPItemHeadingClass"
-    | "kcFormOptionsWrapperClass";
+    | "kcFormOptionsWrapperClass"
+    | "kcFormButtonsWrapperClass";

package/src/login/kcContext/KcContext.ts

@@ -19,6 +19,8 @@ export type KcContext =
     | KcContext.LoginResetPassword
     | KcContext.LoginVerifyEmail
     | KcContext.Terms
+    | KcContext.LoginDeviceVerifyUserCode
+    | KcContext.LoginOauthGrant
     | KcContext.LoginOtp
     | KcContext.LoginUsername
     | KcContext.WebauthnAuthenticate
@@ -38,6 +40,7 @@ export type KcContext =
 
 export declare namespace KcContext {
     export type Common = {
+        themeVersion: string;
         keycloakifyVersion: string;
         themeType: "login";
         themeName: string;
@@ -242,6 +245,27 @@ export declare namespace KcContext {
         pageId: "terms.ftl";
     };
 
+    export type LoginDeviceVerifyUserCode = Common & {
+        pageId: "login-oauth2-device-verify-user-code.ftl";
+        url: {
+            oauth2DeviceVerificationAction: string;
+        };
+    };
+
+    export type LoginOauthGrant = Common & {
+        pageId: "login-oauth-grant.ftl";
+        oauth: {
+            code: string;
+            client: string;
+            clientScopesRequested: {
+                consentScreenText: string;
+            }[];
+        };
+        url: {
+            oauthAction: string;
+        };
+    };
+
     export type LoginOtp = Common & {
         pageId: "login-otp.ftl";
         otpLogin: {

package/src/login/kcContext/kcContextMocks.ts

@@ -105,6 +105,7 @@ const PUBLIC_URL = (typeof process !== "object" ? undefined : process.env?.["PUB
 const resourcesPath = pathJoin(PUBLIC_URL, keycloak_resources, "login", "resources");
 
 export const kcContextCommonMock: KcContext.Common = {
+    "themeVersion": "0.0.0",
     "keycloakifyVersion": "0.0.0",
     "themeType": "login",
     "themeName": "my-theme-name",
@@ -242,7 +243,9 @@ export const kcContextCommonMock: KcContext.Common = {
 const loginUrl = {
     ...kcContextCommonMock.url,
     "loginResetCredentialsUrl": "/auth/realms/myrealm/login-actions/reset-credentials?client_id=account&tab_id=HoAx28ja4xg",
-    "registrationUrl": "/auth/realms/myrealm/login-actions/registration?client_id=account&tab_id=HoAx28ja4xg"
+    "registrationUrl": "/auth/realms/myrealm/login-actions/registration?client_id=account&tab_id=HoAx28ja4xg",
+    "oauth2DeviceVerificationAction": "/auth/realms/myrealm/device",
+    "oauthAction": "/auth/realms/myrealm/login-actions/consent?client_id=account&tab_id=HoAx28ja4xg"
 };
 
 export const kcContextMocks = [
@@ -346,6 +349,25 @@ export const kcContextMocks = [
         ...kcContextCommonMock,
         "pageId": "terms.ftl"
     }),
+    id<KcContext.LoginDeviceVerifyUserCode>({
+        ...kcContextCommonMock,
+        "pageId": "login-oauth2-device-verify-user-code.ftl",
+        url: loginUrl
+    }),
+    id<KcContext.LoginOauthGrant>({
+        ...kcContextCommonMock,
+        "pageId": "login-oauth-grant.ftl",
+        oauth: {
+            code: "5-1N4CIzfi1aprIQjmylI-9e3spLCWW9i5d-GDcs-Sw",
+            clientScopesRequested: [
+                { consentScreenText: "${profileScopeConsentText}" },
+                { consentScreenText: "${rolesScopeConsentText}" },
+                { consentScreenText: "${emailScopeConsentText}" }
+            ],
+            client: "account"
+        },
+        url: loginUrl
+    }),
     id<KcContext.LoginOtp>({
         ...kcContextCommonMock,
         "pageId": "login-otp.ftl",

package/src/login/lib/useGetClassName.ts

@@ -3,6 +3,7 @@ import type { ClassKey } from "keycloakify/login/TemplateProps";
 
 export const { useGetClassName } = createUseClassName<ClassKey>({
     "defaultClasses": {
+        "kcBodyClass": undefined,
         "kcHtmlClass": "login-pf",
         "kcLoginClass": "login-pf-page",
         "kcContentWrapperClass": "row",
@@ -44,6 +45,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         "kcInputClass": "form-control",
         "kcInputErrorMessageClass": "pf-c-form__helper-text pf-m-error required kc-feedback-text",
         "kcInputWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        "kcFormButtonsWrapperClass": undefined,
         "kcFormOptionsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
         "kcFormButtonsClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
         "kcFormSettingClass": "login-pf-settings",

package/src/login/pages/Info.tsx

@@ -8,7 +8,10 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
 
     const { msgStr, msg } = i18n;
 
-    assert(kcContext.message !== undefined);
+    assert(
+        kcContext.message !== undefined,
+        "No message in kcContext.message, there will always be a message in production context, add it in your mock"
+    );
 
     const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
 

package/src/login/pages/LoginConfigTotp.tsx

@@ -32,7 +32,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
                         <ul id="kc-totp-supported-apps">
                             {totp.supportedApplications.map(app => (
-                                <li>{msgStr(app as MessageKey, app)}</li>
+                                <li>{msg(app as MessageKey)}</li>
                             ))}
                         </ul>
                     </li>