Merge branch 'feat/trigger-oauth-logout' into 'main'

Dashboard logout should trigger OAuth logout endpoint

See merge request !32

.env.example

+REACT_APP_API_URL=http://127.0.0.1:5000/api/v1
+REACT_APP_HYDRA_PUBLIC_URL=https://sso.init.stackspin.net
\ No newline at end of file

deployment/helmchart/templates/configmaps.yaml

@@ -19,6 +19,8 @@ data:
   KRATOS_PUBLIC_URL: {{ .Values.backend.kratos.publicUrl }}
   KRATOS_ADMIN_URL: {{ .Values.backend.kratos.adminUrl }}
   HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
+  # React can only read this env variable if it's prepended with REACT_APP
+  REACT_APP_HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
   HYDRA_ADMIN_URL: {{ .Values.backend.hydra.adminUrl }}
   LOGIN_PANEL_URL: {{ .Values.backend.loginPanelUrl }}
   DATABASE_URL: {{ .Values.backend.databaseUrl }}

src/common/util/index.ts

-export { isTouched } from './is-touched';
-export { addParamsToLink } from './add-params-to-link';
+export * from './is-touched';
+export * from './add-params-to-link';

src/components/Header/Header.tsx

@@ -24,6 +24,8 @@ function filterNavigationByDashboardRole(isAdmin: boolean) {
   return navigation.filter((item) => !item.requiresAdmin);
 }
 
+const HYDRA_URL = process.env.REACT_APP_HYDRA_PUBLIC_URL;
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
 
@@ -40,6 +42,8 @@ const Header: React.FC<HeaderProps> = () => {
 
   const navigationItems = filterNavigationByDashboardRole(isAdmin);
 
+  const signOutUrl = `${HYDRA_URL}/oauth2/sessions/logout`;
+
   return (
     <>
       <Disclosure as="nav" className="bg-white shadow relative z-10">
@@ -120,6 +124,7 @@ const Header: React.FC<HeaderProps> = () => {
                           {({ active }) => (
                             <a
                               onClick={() => logOut()}
+                              href={signOutUrl}
                               className={classNames(
                                 active ? 'bg-gray-100 cursor-pointer' : '',
                                 'block px-4 py-2 text-sm text-gray-700 cursor-pointer',