Merge branch 'main' into issues/716-Replace_margin_physical_propertie…

…s_with_logical

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+## [0.19.3] - 2023-10-25
+
 ### Added
 
 - `stepChanged` custom event for the web component (#709)
@@ -24,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - Clipped icon in "Save your work" toast (#707)
+- Hydra logout flow to delete session (#714)
 
 ## [0.19.2] - 2023-10-12
 
@@ -548,7 +551,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Events in Web Component indicating whether Mission Zero criteria have been met (#113)
 
-[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.19.2...HEAD
+[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.19.3...HEAD
+[0.19.3]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.19.3
 [0.19.2]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.19.2
 [0.19.1]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.19.1
 [0.19.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.19.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/editor-ui",
-  "version": "0.19.2",
+  "version": "0.19.3",
   "private": true,
   "dependencies": {
     "@RaspberryPiFoundation/design-system-react": "^0.1.2",

src/components/Login/LoginMenu.jsx

@@ -27,7 +27,10 @@ const LoginMenu = () => {
           >
             {t("globalNav.accountMenu.projects")}
           </Link>
-          <LogoutButton className="btn--tertiary dropdown-container--list__item" />
+          <LogoutButton
+            user={user}
+            className="btn--tertiary dropdown-container--list__item"
+          />
         </>
       ) : (
         <LoginButton

src/components/Login/LogoutButton.jsx

@@ -2,18 +2,16 @@ import React from "react";
 import userManager from "../../utils/userManager";
 import { useTranslation } from "react-i18next";
 import Button from "../Button/Button";
-import { useNavigate } from "react-router-dom";
+import PropTypes from "prop-types";
 
-const LogoutButton = (props) => {
-  const { className } = props;
+const LogoutButton = ({ className, user }) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
 
   const onLogoutButtonClick = async (event) => {
     event.preventDefault();
+    userManager.signoutRedirect({ id_token_hint: user?.id_token });
     await userManager.removeUser();
     localStorage.clear();
-    navigate("/");
   };
 
   return (
@@ -25,4 +23,11 @@ const LogoutButton = (props) => {
   );
 };
 
+LogoutButton.propTypes = {
+  className: PropTypes.string,
+  user: PropTypes.shape({
+    id_token: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
 export default LogoutButton;

src/components/Login/LogoutButton.test.js

@@ -7,27 +7,25 @@ import userManager from "../../utils/userManager";
 import LogoutButton from "./LogoutButton";
 
 jest.mock("../../utils/userManager", () => ({
+  signoutRedirect: jest.fn(),
   removeUser: jest.fn(),
 }));
 
 let logoutButton;
 
+const user = {
+  id_token: "1234",
+};
+
 beforeEach(() => {
   const middlewares = [];
   const mockStore = configureStore(middlewares);
-  const initialState = {
-    editor: {
-      project: {},
-    },
-    auth: {
-      user: {},
-    },
-  };
+  const initialState = {};
   const store = mockStore(initialState);
   render(
     <MemoryRouter initialEntries={["/"]}>
       <Provider store={store}>
-        <LogoutButton />
+        <LogoutButton user={user} />
       </Provider>
     </MemoryRouter>,
   );
@@ -40,5 +38,8 @@ test("Log out button shown", () => {
 
 test("Clicking log out button signs the user out", () => {
   fireEvent.click(logoutButton);
+  expect(userManager.signoutRedirect).toBeCalledWith({
+    id_token_hint: user.id_token,
+  });
   expect(userManager.removeUser).toHaveBeenCalled();
 });

src/utils/userManager.js

@@ -8,6 +8,7 @@ const host = `${window.location.protocol}//${window.location.hostname}${
 const userManagerConfig = {
   client_id: process.env.REACT_APP_AUTHENTICATION_CLIENT_ID,
   redirect_uri: `${host}/auth/callback`,
+  post_logout_redirect_uri: host,
   response_type: "code",
   scope: "openid email profile force-consent allow-u13-login",
   authority: process.env.REACT_APP_AUTHENTICATION_URL,