add frontchannel-logout.ftl page

src/bin/keycloakify/generateFtl/pageId.ts

@@ -28,7 +28,8 @@ export const loginThemePageIds = [
     "saml-post-form.ftl",
     "delete-credential.ftl",
     "code.ftl",
-    "delete-account-confirm.ftl"
+    "delete-account-confirm.ftl",
+    "frontchannel-logout.ftl"
 ] as const;
 
 export const accountThemePageIds = ["password.ftl", "account.ftl", "sessions.ftl", "totp.ftl", "applications.ftl", "log.ftl"] as const;

src/login/Fallback.tsx

@@ -34,6 +34,7 @@ const SamlPostForm = lazy(() => import("keycloakify/login/pages/SamlPostForm"));
 const DeleteCredential = lazy(() => import("keycloakify/login/pages/DeleteCredential"));
 const Code = lazy(() => import("keycloakify/login/pages/Code"));
 const DeleteAccountConfirm = lazy(() => import("keycloakify/login/pages/DeleteAccountConfirm"));
+const FrontchannelLogout = lazy(() => import("keycloakify/login/pages/FrontchannelLogout"));
 
 type FallbackProps = PageProps<KcContext, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
@@ -104,6 +105,8 @@ export default function Fallback(props: FallbackProps) {
                         return <Code kcContext={kcContext} {...rest} />;
                     case "delete-account-confirm.ftl":
                         return <DeleteAccountConfirm kcContext={kcContext} {...rest} />;
+                    case "frontchannel-logout.ftl":
+                        return <FrontchannelLogout kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

src/login/Template.tsx

@@ -21,6 +21,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         showUsernameNode = null,
         socialProvidersNode = null,
         infoNode = null,
+        documentTitle,
         kcContext,
         i18n,
         doUseDefaultCss,
@@ -35,7 +36,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession, scripts } = kcContext;
 
     useEffect(() => {
-        document.title = msgStr("loginTitle", kcContext.realm.displayName);
+        document.title = documentTitle ?? msgStr("loginTitle", kcContext.realm.displayName);
     }, []);
 
     useSetClassName({

src/login/TemplateProps.ts

@@ -16,6 +16,7 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     showUsernameNode?: ReactNode;
     socialProvidersNode?: ReactNode;
     infoNode?: ReactNode;
+    documentTitle?: string;
 
     children: ReactNode;
 };

src/login/kcContext/KcContext.ts

@@ -38,7 +38,8 @@ export type KcContext =
     | KcContext.SamlPostForm
     | KcContext.DeleteCredential
     | KcContext.Code
-    | KcContext.DeleteAccountConfirm;
+    | KcContext.DeleteAccountConfirm
+    | KcContext.FrontchannelLogout;
 
 assert<KcContext["themeType"] extends ThemeType ? true : false>();
 
@@ -514,6 +515,17 @@ export declare namespace KcContext {
         pageId: "delete-account-confirm.ftl";
         triggered_from_aia: boolean;
     };
+
+    export type FrontchannelLogout = Common & {
+        pageId: "frontchannel-logout.ftl";
+        logout: {
+            clients: {
+                name: string;
+                frontChannelLogoutUrl: string;
+            }[];
+            logoutRedirectUri?: string;
+        };
+    };
 }
 
 export type UserProfile = {

src/login/kcContext/kcContextMocks.ts

@@ -678,6 +678,23 @@ export const kcContextMocks = [
     id<KcContext.LoginPageExpired>({
         ...kcContextCommonMock,
         pageId: "login-page-expired.ftl"
+    }),
+
+    id<KcContext.FrontchannelLogout>({
+        ...kcContextCommonMock,
+        pageId: "frontchannel-logout.ftl",
+        "logout": {
+            "clients": [
+                {
+                    "name": "myApp",
+                    "frontChannelLogoutUrl": "#"
+                },
+                {
+                    "name": "myApp2",
+                    "frontChannelLogoutUrl": "#"
+                }
+            ]
+        }
     })
 ];
 

src/login/pages/FrontchannelLogout.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+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 } = i18n;
+
+    useEffect(() => {
+        if (logout.logoutRedirectUri) {
+            window.location.replace(logout.logoutRedirectUri);
+        }
+    }, []);
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            documentTitle={msgStr("frontchannel-logout.title")}
+            headerNode={msg("frontchannel-logout.title")}
+        >
+            <p>{msg("frontchannel-logout.message")}</p>
+            <ul>
+                {logout.clients.map(client => (
+                    <li key={client.name}>
+                        {client.name}
+                        <iframe src={client.frontChannelLogoutUrl} style={{ "display": "none" }} />
+                    </li>
+                ))}
+            </ul>
+            {logout.logoutRedirectUri && (
+                <a id="continue" className="btn btn-primary" href={logout.logoutRedirectUri}>
+                    {msg("doContinue")}
+                </a>
+            )}
+        </Template>
+    );
+}