Use hydroserver-ts built-in vars for auth state

Author: daniel-slaugh

apps/data-management/src/bootstrap/__tests__/appInitialization.spec.ts

@@ -19,7 +19,8 @@ const {
   onMock: vi.fn(),
   sessionState: {
     isAuthenticated: false,
-    getBrowserSessionAccount: vi.fn(),
+    hasAccessToken: false,
+    account: null as Record<string, unknown> | null,
   },
   testPinia: { value: null as Pinia | null },
 }))
@@ -63,7 +64,8 @@ describe('app initialization bootstrap', () => {
     testPinia.value = pinia
     localStorage.clear()
     sessionState.isAuthenticated = false
-    sessionState.getBrowserSessionAccount.mockReset()
+    sessionState.hasAccessToken = false
+    sessionState.account = null
     createHydroServerMock.mockReset()
     fetchAllVocabulariesMock.mockReset()
     userGetMock.mockReset()
@@ -109,11 +111,9 @@ describe('app initialization bootstrap', () => {
   it('does not mark workspace bootstrap complete when initialized while logged out', async () => {
     createHydroServerMock.mockResolvedValue(undefined)
     fetchAllVocabulariesMock.mockResolvedValue(undefined)
-    sessionState.getBrowserSessionAccount.mockResolvedValue(null)
 
     const {
       hasBootstrappedWorkspaces,
-      isHydroServerAuthenticated,
       startAppInitialization,
       isAppInitializing,
     } = await import('../appInitialization')
@@ -128,24 +128,22 @@ describe('app initialization bootstrap', () => {
   it('hydrates authenticated ui state from the browser session when no oidc user is cached', async () => {
     createHydroServerMock.mockResolvedValue(undefined)
     fetchAllVocabulariesMock.mockResolvedValue(undefined)
-    sessionState.getBrowserSessionAccount.mockResolvedValue({
+    sessionState.isAuthenticated = true
+    sessionState.account = {
       email: 'browser@example.com',
       firstName: 'Browser',
       lastName: 'Session',
-    })
+    }
 
     const {
       hasBootstrappedWorkspaces,
-      isHydroServerAuthenticated,
       startAppInitialization,
     } = await import('../appInitialization')
 
     await startAppInitialization()
 
     const userStore = useUserStore()
 
-    expect(sessionState.getBrowserSessionAccount).toHaveBeenCalledTimes(1)
-    expect(isHydroServerAuthenticated.value).toBe(true)
     expect(userStore.user.email).toBe('browser@example.com')
     expect(userStore.user.firstName).toBe('Browser')
     expect(hasBootstrappedWorkspaces.value).toBe(false)
@@ -155,9 +153,9 @@ describe('app initialization bootstrap', () => {
 
   it('loads vocabularies, user, and workspaces after first session initialization', async () => {
     sessionState.isAuthenticated = true
+    sessionState.hasAccessToken = true
     createHydroServerMock.mockResolvedValue(undefined)
     fetchAllVocabulariesMock.mockResolvedValue(undefined)
-    sessionState.getBrowserSessionAccount.mockResolvedValue(null)
     userGetMock.mockResolvedValue({
       status: 200,
       data: { email: 'user@example.com' },
@@ -169,7 +167,6 @@ describe('app initialization bootstrap', () => {
 
     const {
       hasBootstrappedWorkspaces,
-      isHydroServerAuthenticated,
       startAppInitialization,
       isAppInitializing,
     } = await import('../appInitialization')
@@ -195,7 +192,6 @@ describe('app initialization bootstrap', () => {
       'workspace-2',
     ])
     expect(workspaceStore.selectedWorkspace?.id).toBe('workspace-1')
-    expect(isHydroServerAuthenticated.value).toBe(true)
     expect(hasBootstrappedWorkspaces.value).toBe(true)
     expect(isAppInitializing.value).toBe(false)
   })

apps/data-management/src/bootstrap/appInitialization.ts

@@ -12,7 +12,6 @@ const hydroServerHost =
 
 const isHydroServerInitializing = ref(false)
 export const isHydroServerReady = ref(false)
-export const isHydroServerAuthenticated = ref(false)
 export const isAppInitializing = ref(false)
 export const hasBootstrappedWorkspaces = ref(false)
 export const initializationError = ref<unknown>(null)
@@ -35,20 +34,11 @@ export async function initializeAuthenticatedState() {
   user.value = new User()
   setWorkspaces([])
   hasBootstrappedWorkspaces.value = false
-  isHydroServerAuthenticated.value = hs.session.isAuthenticated
 
-  if (!hs.session.isAuthenticated) {
-    let browserSessionAccount: User | null = null
-    try {
-      browserSessionAccount = await hs.session.getBrowserSessionAccount()
-    } catch (error) {
-      recordInitializationError('Error fetching browser session', error)
-    }
+  if (!hs.session.isAuthenticated) return
 
-    if (!browserSessionAccount) return
-
-    user.value = browserSessionAccount
-    isHydroServerAuthenticated.value = true
+  if (!hs.session.hasAccessToken) {
+    user.value = hs.session.account ?? new User()
     return
   }
 
@@ -85,8 +75,8 @@ export async function initializeAuthenticatedState() {
 function attachSessionListeners() {
   if (sessionListenersAttached) return
 
-  hs.on('session:changed', (authenticated: boolean) => {
-    isHydroServerAuthenticated.value = authenticated
+  hs.on('session:changed', () => {
+    void initializeAuthenticatedState()
   })
   hs.on('session:expired', () => {
     void initializeAuthenticatedState()
@@ -119,7 +109,6 @@ export function startAppInitialization() {
   })
     .then(() => {
       isHydroServerReady.value = true
-      isHydroServerAuthenticated.value = hs.session.isAuthenticated
       attachSessionListeners()
     })
     .catch((error) => {

apps/data-management/src/components/base/Navbar.vue

@@ -69,7 +69,7 @@
 
       <v-spacer />
 
-      <template v-if="isHydroServerAuthenticated">
+      <template v-if="hs.session.isAuthenticated">
         <v-btn data-testid="account-menu-button" elevation="2" rounded>
           <v-icon :icon="mdiAccountCircle" />
           <v-icon :icon="mdiMenuDown" />
@@ -139,7 +139,7 @@
     <v-divider />
 
     <v-list density="compact" nav>
-      <template v-if="isHydroServerAuthenticated">
+      <template v-if="hs.session.isAuthenticated">
         <v-list-item
           to="/profile"
           :prepend-icon="mdiAccountCircle"
@@ -171,7 +171,6 @@
 
 <script setup lang="ts">
 import { useDisplay } from 'vuetify/lib/framework.mjs'
-import { isHydroServerAuthenticated } from '@/bootstrap/appInitialization'
 import { Snackbar } from '@/utils/notifications'
 import { ref } from 'vue'
 import { useDataVisStore } from '@/store/dataVisualization'

apps/data-management/src/config/Home.vue

@@ -14,7 +14,7 @@
         </h4>
       </div>
 
-      <div v-if="isHydroServerAuthenticated">
+      <div v-if="hs.session.isAuthenticated">
         <h5 class="text-h5 mb-8 has-text-shadow">
           Logged in as {{ user?.firstName }}
           {{ user?.lastName }}
@@ -212,7 +212,6 @@ import ogcLogo from '@/assets/ogc-min.png'
 import cirohLogo from '@/assets/CIROH_logo_transparent-min.png'
 import sensorThingsLogo from '@/assets/sensorThings-min.png'
 import hydroWhiteImg from '@/assets/hydroserver-white-min.png'
-import { isHydroServerAuthenticated } from '@/bootstrap/appInitialization'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '@/store/user'
 import hs from '@hydroserver/client'

apps/data-management/src/main.ts

@@ -9,19 +9,27 @@ import vuetify from '@/plugins/vuetify'
 import pinia from '@/plugins/pinia'
 import { injectClarity } from '@/plugins/clarity'
 import { settings } from '@/config/settings'
-import { startAppInitialization } from '@/bootstrap/appInitialization'
+import {
+  startAppInitialization,
+  waitForHydroServerInitialization,
+} from '@/bootstrap/appInitialization'
 
 const app = createApp(App)
 
 app.use(pinia)
 
-// Kick off session initialization before router navigation starts, but do not
-// block first paint on the rest of the app bootstrap work.
-void startAppInitialization()
+async function bootstrap() {
+  // Kick off session initialization before router navigation starts, but do not
+  // block first paint on the rest of the app bootstrap work.
+  void startAppInitialization()
+  await waitForHydroServerInitialization()
 
-app.use(router)
-app.use(vuetify)
-settings.analyticsConfiguration.enableClarityAnalytics &&
-  settings.analyticsConfiguration.clarityProjectId &&
-  injectClarity(settings.analyticsConfiguration.clarityProjectId)
-app.mount('#app')
+  app.use(router)
+  app.use(vuetify)
+  settings.analyticsConfiguration.enableClarityAnalytics &&
+    settings.analyticsConfiguration.clarityProjectId &&
+    injectClarity(settings.analyticsConfiguration.clarityProjectId)
+  app.mount('#app')
+}
+
+void bootstrap()

apps/data-management/src/router/router.ts

@@ -37,9 +37,8 @@ router.beforeEach(
     await waitForHydroServerInitialization()
     if (!isHydroServerReady.value) return false
 
-    if (!hs.session.isAuthenticated && to.meta.requiresAuth) {
-      await hs.session.login(to.fullPath)
-      return false
+    if (to.meta.requiresAuth) {
+      return await hs.session.ensureAuthorized(to.fullPath)
     }
   }
 )

apps/data-management/src/router/routes.ts

@@ -112,7 +112,7 @@ export const routes: RouteRecordRaw[] = [
       window.location.assign(hs.session.accountProfileUrl)
       return false
     },
-    meta: { requiresAuth: true, title: 'Profile' },
+    meta: { title: 'Profile' },
   },
   {
     path: '/metadata',

packages/hydroserver-ts/src/api/__tests__/session.service.spec.ts

@@ -157,6 +157,7 @@ describe('SessionService', () => {
 
   it('does not block initialization on a silent bootstrap when no cached user exists', async () => {
     managerState.getUser.mockResolvedValue(null)
+    apiFetchMock.mockResolvedValue({ ok: false, data: null })
     const client = new HydroServer({ host: 'https://hydro.example.com' })
     const emitSpy = vi.spyOn(client, 'emit')
     const session = new SessionService(client)
@@ -195,4 +196,52 @@ describe('SessionService', () => {
       { credentials: 'include' }
     )
   })
+
+  it('treats the browser session as authenticated after initialization', async () => {
+    managerState.getUser.mockResolvedValue(null)
+    apiFetchMock.mockResolvedValue({
+      ok: true,
+      data: {
+        account: {
+          email: 'user@example.com',
+          firstName: 'Signed',
+        },
+      },
+    })
+
+    const session = new SessionService(
+      new HydroServer({ host: 'https://hydro.example.com' })
+    )
+
+    await session.initialize()
+
+    expect(session.isAuthenticated).toBe(true)
+    expect(session.hasAccessToken).toBe(false)
+    expect(session.account).toMatchObject({
+      email: 'user@example.com',
+      firstName: 'Signed',
+    })
+  })
+
+  it('redirects through login when a protected route needs an access token', async () => {
+    managerState.getUser.mockResolvedValue(null)
+    apiFetchMock.mockResolvedValue({
+      ok: true,
+      data: {
+        account: {
+          email: 'user@example.com',
+        },
+      },
+    })
+
+    const session = new SessionService(
+      new HydroServer({ host: 'https://hydro.example.com' })
+    )
+    await session.initialize()
+
+    await expect(session.ensureAuthorized('/sites')).resolves.toBe(false)
+    expect(managerState.signinRedirect).toHaveBeenCalledWith({
+      state: { returnTo: '/sites' },
+    })
+  })
 })