add: keycloak logout url redirect

apps/admin-ui/src/common/Error403.tsx

@@ -7,6 +7,7 @@ import { H1 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import { useSession } from "@/hooks/auth";
 import { PUBLIC_URL } from "./const";
+import { env } from "@/env.mjs";
 
 const Wrapper = styled.div`
   padding: var(--spacing-layout-s);
@@ -67,7 +68,7 @@ const LogoutSection = ({
       </Link>
       {isAuthenticated && (
         <ButtonContainer>
-          <Button onClick={() => signOut(apiBaseUrl)}>
+          <Button onClick={() => signOut(apiBaseUrl, env.NEXT_PUBLIC_BASE_URL)}>
             {t("Navigation.logout")}
           </Button>
         </ButtonContainer>

apps/admin-ui/src/component/Navigation.tsx

@@ -299,7 +299,7 @@ const Navigation = ({ apiBaseUrl }: Props) => {
                   <IconSignout />
                 </>
               }
-              onClick={() => signOut(apiBaseUrl)}
+              onClick={() => signOut(apiBaseUrl, env.NEXT_PUBLIC_BASE_URL)}
             />
           </Header.ActionBarItem>
         ) : (

apps/admin-ui/src/i18n/index.ts

@@ -42,14 +42,6 @@ i18n.addResourceBundle("en", "common", {
   month: "Month",
   today: "Today",
 });
-i18n.addResourceBundle("fi", "logout", {
-  message: "Olet kirjautunut ulos Varaamosta",
-  signOutFromOtherServices: "Kirjaudu ulos myös muista Helsingin palveluista",
-});
-i18n.addResourceBundle("en", "logout", {
-  message: "You have signed out from Varaamo",
-  signOutFromOtherServices: "Sign out from other Helsinki services also",
-});
 i18n.addResourceBundle("fi", "reservationCalendar", {
   showCurrentDay: "Näytä tämä päivä",
   showPrevious: "Naytä edellinen {{view}}",

apps/admin-ui/src/pages/auth/logout/index.tsx

@@ -1,72 +1,28 @@
-import React from "react";
-import styled from "styled-components";
-import { useTranslation } from "react-i18next";
-import ClientOnly from "common/src/ClientOnly";
-import KorosHeading, { Heading } from "@/component/KorosHeading";
-import { HERO_IMAGE_URL } from "@/common/const";
-import Navigation from "@/component/Navigation";
-import { env } from "@/env.mjs";
-import BaseLayout from "../../layout";
+import { useEffect } from "react";
 // NOTE not using App.tsx so need to import i18n here also
 import "@/i18n";
 import { getVersion } from "@/helpers/serverUtils";
+import { useRouter } from "next/router";
 
-// TODO move these to a common layout (PageWrapper, copies from)
-const Wrapper = styled.main`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
-
-const Ingress = styled.p`
-  font-size: 1.5rem;
-  line-height: 1.8125rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-grow: 1;
-`;
-
-function Layout(props: { children: React.ReactNode } & Pick<Props, "version">) {
-  const { children, version } = props;
-  return (
-    <BaseLayout version={version}>
-      <Wrapper>{children}</Wrapper>
-    </BaseLayout>
-  );
-}
-
-function LogoutPage({ apiBaseUrl, logoutUrl, version }: Props) {
-  const { t } = useTranslation(["common", "logout"]);
+type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 
-  // Can't use SSR because of translations
-  return (
-    <Layout version={version}>
-      <ClientOnly>
-        <Navigation apiBaseUrl={apiBaseUrl} />
-        <KorosHeading heroImage={HERO_IMAGE_URL}>
-          <Heading>{t("common:applicationName")}</Heading>
-          <p style={{ fontSize: "1.8rem" }}>{t("logout:message")}</p>
-        </KorosHeading>
-        <Ingress>
-          <a href={logoutUrl}>{t("logout:signOutFromOtherServices")}</a>
-        </Ingress>
-      </ClientOnly>
-    </Layout>
-  );
+/* Page to redirect to the front page after a succesful logout
+ * TODO might be able to replace this with middleware
+ * */
+function LogoutPage({ redirectUrl }: Props) {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace(redirectUrl);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
 }
 
-type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
-
 export async function getServerSideProps() {
-  const logoutUrl = env.TUNNISTAMO_URL ? `${env.TUNNISTAMO_URL}/logout/` : "";
-  const apiBaseUrl = env.TILAVARAUS_API_URL ?? "";
   return {
     props: {
-      logoutUrl,
-      apiBaseUrl,
+      redirectUrl: "/",
       version: getVersion(),
       // TODO can't use SSR translations because our translations aren't in public folder
       // ...(await serverSideTranslations(locale ?? "fi")),

apps/ui/pages/logout/index.tsx → apps/ui/pages/auth/logout/index.tsx

@@ -2,33 +2,33 @@ import type { GetServerSidePropsContext } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import { env } from "@/env.mjs";
 import { getCommonServerSideProps } from "@/modules/serverUtils";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 
-export const getServerSideProps = async ({
+/* Page to redirect to the front page after a succesful logout
+ * TODO might be able to replace this with middleware
+ * */
+function LogoutPage({ redirectUrl }: Props) {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace(redirectUrl);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+}
+
+export async function getServerSideProps({
   locale,
-}: GetServerSidePropsContext) => {
+}: GetServerSidePropsContext) {
   return {
     props: {
       ...getCommonServerSideProps(),
-      redirectUrl: env.NEXT_PUBLIC_BASE_URL || "/",
+      redirectUrl: "/",
       ...(await serverSideTranslations(locale ?? "fi")),
     },
   };
-};
-
-// TODO what is the purpose of this page?
-const LogoutPage = ({ redirectUrl }: Props) => {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.push(redirectUrl);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return null;
-};
+}
 
 export default LogoutPage;

packages/common/src/browserHelpers.ts

@@ -26,14 +26,25 @@ export function signIn(apiBaseUrl: string, returnUrl?: unknown) {
   window.location.href = url;
 }
 
-// Log the user out and redirect to route /logout
+function removeTrailingSlash(url: string): string {
+  return url.endsWith("/") ? url.slice(0, -1) : url;
+}
+
+/// Sign the user out and redirect to route /auth/logout/ after the session is destroyed
 /// Thows if called on the server
-export function signOut(apiBaseUrl: string) {
+/// @param apiBaseUrl - base url for api
+/// @param appUrlBasePath - base path for the app (only required if next app is not in host root)
+export function signOut(apiBaseUrl: string, appUrlBasePath = "") {
   if (!isBrowser) {
     throw new Error("signIn can only be called in the browser");
   }
+  const url = new URL(window.location.href);
   const logoutUrl = getSignOutUrl(apiBaseUrl);
   const csrfToken = getCookie("csrftoken");
+  const logoutPath = "/auth/logout/";
+  const origin = url.origin;
+  const returnUrlBase = `${removeTrailingSlash(origin)}${removeTrailingSlash(appUrlBasePath)}`;
+  const returnUrl = `${returnUrlBase}${logoutPath}`;
   if (!csrfToken) {
     throw new Error("csrf token not found");
   }
@@ -44,12 +55,17 @@ export function signOut(apiBaseUrl: string) {
   form.method = "POST";
   form.action = logoutUrl;
   form.style.display = "none";
-  const csrfTokenInput = document.createElement("input");
-  csrfTokenInput.type = "hidden";
-  csrfTokenInput.name = "csrfmiddlewaretoken";
-  csrfTokenInput.value = csrfToken;
-  form.appendChild(csrfTokenInput);
+  addFormParam(form, "csrfmiddlewaretoken", csrfToken);
+  addFormParam(form, "redirect_to", returnUrl);
   document.body.appendChild(form);
   form.submit();
   document.body.removeChild(form);
 }
+
+function addFormParam(form: HTMLFormElement, name: string, value: string) {
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = name;
+  input.value = value;
+  form.appendChild(input);
+}