in account page, redirect to login theme pages

Author: JeromeBu

package.json

@@ -22,6 +22,7 @@
     "dependencies": {
         "@codegouvfr/react-dsfr": "^1.14.10",
         "keycloakify": "^11.3.32",
+        "oidc-spa": "^5.6.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

src/account/KcPage.tsx

@@ -6,37 +6,40 @@ const DefaultPage = lazy(() => import("keycloakify/account/DefaultPage"));
 const DefaultTemplate = lazy(() => import("keycloakify/account/Template"));
 const Template = lazy(() => import("./Template"));
 const Account = lazy(() => import("./pages/Account"));
+import { OidcProvider } from "./oidc";
 
 export default function KcPage(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
     const { i18n } = useI18n({ kcContext });
 
     return (
-        <Suspense>
-            {(() => {
-                switch (kcContext.pageId) {
-                    case "account.ftl":
-                        return (
-                            <Account
-                                {...{ kcContext, i18n, classes }}
-                                Template={Template}
-                                doUseDefaultCss={false}
-                            />
-                        );
-                    default:
-                        return (
-                            <DefaultPage
-                                kcContext={kcContext}
-                                i18n={i18n}
-                                classes={classes}
-                                Template={DefaultTemplate}
-                                doUseDefaultCss={true}
-                            />
-                        );
-                }
-            })()}
-        </Suspense>
+        <OidcProvider>
+            <Suspense>
+                {(() => {
+                    switch (kcContext.pageId) {
+                        case "account.ftl":
+                            return (
+                                <Account
+                                    {...{ kcContext, i18n, classes }}
+                                    Template={Template}
+                                    doUseDefaultCss={false}
+                                />
+                            );
+                        default:
+                            return (
+                                <DefaultPage
+                                    kcContext={kcContext}
+                                    i18n={i18n}
+                                    classes={classes}
+                                    Template={DefaultTemplate}
+                                    doUseDefaultCss={true}
+                                />
+                            );
+                    }
+                })()}
+            </Suspense>
+        </OidcProvider>
     );
 }
 

src/account/Template.tsx

@@ -100,9 +100,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                             burgerMenuButtonText={"Menu"}
                             items={[
                                 { text: msg("account"), linkProps: { href: url.accountUrl }, isActive: active === "account" },
-                                ...(features.passwordUpdateSupported
-                                    ? [{ text: msg("password"), linkProps: { href: url.passwordUrl }, isActive: active === "password" }]
-                                    : []),
+                                // ...(features.passwordUpdateSupported
+                                //     ? [{ text: msg("password"), linkProps: { href: url.passwordUrl }, isActive: active === "password" }]
+                                //     : []),
                                 { text: msg("authenticator"), linkProps: { href: url.totpUrl }, isActive: active === "totp" },
                                 ...(features.identityFederation
                                     ? [{ text: msg("federatedIdentity"), linkProps: { href: url.socialUrl }, isActive: active === "social" }]

src/account/i18n.ts

@@ -1,10 +1,17 @@
 import { i18nBuilder } from "keycloakify/account";
 import type { ThemeName } from "../kc.gen";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { useI18n, ofTypeI18n } = i18nBuilder
     .withThemeName<ThemeName>()
     .withExtraLanguages({})
-    .withCustomTranslations({})
+    .withCustomTranslations({
+        en: { updateProfile: "Update profile", deleteAccount: "Delete account" },
+        fr: {
+            updateProfile: "Mettre à jour le profil",
+            deleteAccount: "Supprimer le compte"
+        }
+    })
     .build();
 
 type I18n = typeof ofTypeI18n;

src/account/oidc.ts

@@ -0,0 +1,20 @@
+import { createReactOidc } from "oidc-spa/react";
+import { createMockReactOidc } from "oidc-spa/mock/react";
+
+const publicUrl = undefined;
+const isAuthGloballyRequired = true;
+
+export const realm = import.meta.env.DEV ? "" : window.location.pathname.split("/")[2];
+
+export const { OidcProvider, useOidc, getOidc } = import.meta.env.DEV
+    ? createMockReactOidc({
+          isUserInitiallyLoggedIn: true,
+          publicUrl,
+          isAuthGloballyRequired
+      })
+    : createReactOidc({
+          issuerUri: `${window.location.origin}/realms/${realm}`,
+          clientId: "account-console",
+          publicUrl,
+          isAuthGloballyRequired
+      });

src/account/pages/Account.tsx

@@ -4,6 +4,7 @@ import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { clsx } from "keycloakify/tools/clsx";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { useOidc } from "../oidc";
 
 export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template } = props;
@@ -13,38 +14,46 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
         kcBodyClass: clsx(props.classes?.kcBodyClass, "user")
     };
 
+    const { goToAuthServer } = useOidc();
     const { referrer } = kcContext;
 
     const { msg } = i18n;
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account">
             <h2 className={fr.cx("fr-h2")}>{msg("editAccountHtmlTitle")}</h2>
-            <ButtonsGroup 
+            <ButtonsGroup
                 buttons={[
                     {
-                        children: "Update profil",
-                        linkProps: {
-                            href: `/realms/myrealm/login-actions/required-action?execution=UPDATE_PROFILE&client_id=${referrer?.name}`,
-                        },
+                        children: msg("updateProfile"),
+                        onClick: () =>
+                            goToAuthServer({
+                                extraQueryParams: { kc_action: "UPDATE_PROFILE" }
+                            })
                     },
                     {
-                        children: "Update password",
-                        linkProps: {
-                            href: `/realms/myrealm/login-actions/required-action?execution=UPDATE_PASSWORD&client_id=${referrer?.name}`,
-                        },
+                        children: msg("updatePasswordTitle"),
+                        onClick: () =>
+                            goToAuthServer({
+                                extraQueryParams: { kc_action: "UPDATE_PASSWORD" }
+                            })
                     },
                     {
-                        children: "Delete account",
-                        linkProps: {
-                            href: `/realms/myrealm/login-actions/required-action?execution=delete_account&client_id=${referrer?.name}`,
-                        },
+                        children: msg("deleteAccount"),
+                        onClick: () =>
+                            goToAuthServer({
+                                extraQueryParams: { kc_action: "delete_account" }
+                            }),
                         priority: "secondary"
                     }
                 ]}
             />
 
-            {referrer && <a className={fr.cx("fr-link")} href={referrer?.url} >{msg("backTo", referrer.name)}</a>}
+            {referrer && (
+                <a className={fr.cx("fr-link")} href={referrer?.url}>
+                    {msg("backTo", referrer.name)}
+                </a>
+            )}
         </Template>
     );
 }

yarn.lock

@@ -4875,6 +4875,11 @@ ohash@^1.1.3:
   resolved "https://registry.yarnpkg.com/ohash/-/ohash-1.1.3.tgz#f12c3c50bfe7271ce3fd1097d42568122ccdcf07"
   integrity sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==
 
+oidc-spa@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/oidc-spa/-/oidc-spa-5.6.1.tgz#bd4953bad6671d10088f86540cbc8e2f6c85701f"
+  integrity sha512-ZC9AA+rnsy9xX76znf3qppbtUliedl1B2WLWSkD3xx2svOWdPlm7sy7yHzbU8pBsBas0HEcccJrJpeBD6MGdKw==
+
 [email protected]:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"