Add a new component for handling loggin out of a invite "session"

frontend/src/routes/components/header.tsx

@@ -48,6 +48,9 @@ const Header = () => {
   const { user } = useUserContext()
   const { t } = useTranslation('common')
 
+  const logoutLink =
+    user.auth_type === 'oidc' ? '/oidc/logout' : '/invite/logout'
+
   return (
     <StyledHeader>
       <MainContainer>
@@ -61,7 +64,7 @@ const Header = () => {
                 sx={{
                   color: 'white',
                 }}
-                href="/oidc/logout"
+                href={logoutLink}
               >
                 {t('button.logout')}
                 <LogoutIcon

frontend/src/routes/index.tsx

@@ -13,6 +13,7 @@ import Register from 'routes/sponsor/register'
 import FrontPage from 'routes/frontpage'
 import Invite from 'routes/invite'
 import InviteLink from 'routes/invitelink'
+import LogoutInviteSession from 'routes/invitelink/logout'
 import Footer from 'routes/components/footer'
 import Header from 'routes/components/header'
 import NotFound from 'routes/components/notFound'
@@ -77,6 +78,7 @@ export default function App() {
             <Register />
           </ProtectedRoute>
           <Route path="/invitelink/" component={InviteLink} />
+          <Route path="/invite/logout" component={LogoutInviteSession} />
           <Route path="/invite/" component={Invite} />
           <Route path="/guestregister" component={GuestRegister} />
           <Route>

frontend/src/routes/invitelink/logout.tsx

+import { useEffect, useState } from 'react'
+import { Redirect } from 'react-router-dom'
+import { useCookies } from 'react-cookie'
+
+import { Box, CircularProgress } from '@mui/material'
+
+import { useUserContext } from 'contexts'
+
+export default function LogoutInviteSession() {
+  // Fetch backend endpoint to preserve invite_id in backend session then redirect
+  const [, , removeCookie] = useCookies(['sessionid'])
+  const [loggedOut, setLoggedOut] = useState(false)
+  const { fetchUserInfo } = useUserContext()
+
+  useEffect(() => {
+    fetch('/api/ui/v1/invitecheck/', { method: 'DELETE' })
+      .then(() => removeCookie('sessionid'))
+      .then(() => fetchUserInfo())
+      .then(() => setLoggedOut(true))
+  }, [])
+
+  if (loggedOut) {
+    return <Redirect to="/" />
+  }
+
+  return (
+    <Box sx={{ margin: 'auto' }}>
+      <CircularProgress />
+    </Box>
+  )
+}