Frontend adjustements

src/frontend/src/features/auth/api/fetchUser.ts

@@ -3,7 +3,7 @@ import { fetchApi } from '@/api/fetchApi'
 import { type ApiUser } from './ApiUser'
 
 /**
- * fetch the logged in user from the api.
+ * fetch the logged-in user from the api.
  *
  * If the user is not logged in, the api returns a 401 error.
  * Here our wrapper just returns false in that case, without triggering an error:

src/frontend/src/features/auth/index.ts

@@ -1,2 +1,3 @@
 export { useUser } from './api/useUser'
 export { authUrl } from './utils/authUrl'
+export { logoutUrl } from './utils/logoutUrl'

src/frontend/src/features/auth/utils/logoutUrl.ts

@@ -0,0 +1,5 @@
+import { apiUrl } from '@/api/apiUrl'
+
+export const logoutUrl = () => {
+  return apiUrl('/logout')
+}

src/frontend/src/layout/Header.tsx

@@ -1,8 +1,7 @@
 import { css } from '@/styled-system/css'
 import { flex } from '@/styled-system/patterns'
-import { apiUrl } from '@/api/apiUrl'
 import { A, Badge, Text } from '@/primitives'
-import { useUser } from '@/features/auth/api/useUser'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 
 export const Header = () => {
   const { user, isLoggedIn } = useUser()
@@ -31,11 +30,11 @@ export const Header = () => {
           </Text>
         </div>
         <div>
-          {isLoggedIn === false && <A href={apiUrl('/authenticate')}>Login</A>}
+          {isLoggedIn === false && <A href={authUrl()}>Login</A>}
           {!!user && (
             <p className={flex({ gap: 1, align: 'center' })}>
               <Badge>{user.email}</Badge>
-              <A href={apiUrl('/logout')} size="small">
+              <A href={logoutUrl()} size="small">
                 Logout
               </A>
             </p>

src/frontend/src/routes/Home.tsx

@@ -1,6 +1,5 @@
 import { A, Button, Italic, P, Div, H, Box } from '@/primitives'
-import { useUser } from '@/features/auth'
-import { apiUrl } from '@/api/apiUrl'
+import { authUrl, useUser } from '@/features/auth'
 import { navigateToNewRoom } from '@/features/rooms'
 import { Screen } from '@/layout/Screen'
 
@@ -19,7 +18,7 @@ export const Home = () => {
               </Button>
             ) : (
               <p>
-                <A href={apiUrl('/authenticate')}>
+                <A href={authUrl()}>
                   Login to create a conference call
                 </A>
               </p>