@sbc-connect/nuxt-auth 0.1.7 → 0.1.9

package/.env.example

@@ -22,4 +22,10 @@ NUXT_PUBLIC_LD_CLIENT_ID=""
 NUXT_PUBLIC_IDP_URL="https://dev.loginproxy.gov.bc.ca/auth"
 NUXT_PUBLIC_IDP_REALM="bcregistry"
 NUXT_PUBLIC_IDP_CLIENTID="connect-web"
-NUXT_PUBLIC_SITEMINDER_LOGOUT_URL="https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi"
+NUXT_PUBLIC_SITEMINDER_LOGOUT_URL="https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi"
+
+# Session Timeout
+NUXT_PUBLIC_TOKEN_REFRESH_INTERVAL=30000
+NUXT_PUBLIC_TOKEN_MIN_VALIDITY=120000
+NUXT_PUBLIC_SESSION_INACTIVITY_TIMEOUT=1800000
+NUXT_PUBLIC_SESSION_MODAL_TIMEOUT=120000

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @sbc-connect/nuxt-auth
 
+## 0.1.9
+
+### Patch Changes
+
+- [#40](https://github.com/bcgov/connect-nuxt/pull/40) [`f4b62e1`](https://github.com/bcgov/connect-nuxt/commit/f4b62e19570ed062399ce7d23ce07abcf682285f) Thanks [@deetz99](https://github.com/deetz99)! - Add login page and auth middleware issue: bcgov/entity#29335
+
+- [#38](https://github.com/bcgov/connect-nuxt/pull/38) [`8b8f067`](https://github.com/bcgov/connect-nuxt/commit/8b8f067aba4cda2cd2cd8de5c6f74ccc24eaf822) Thanks [@deetz99](https://github.com/deetz99)! - Add LaunchDarkly composable with user context. issue: bcgov/entity#29335
+
+## 0.1.8
+
+### Patch Changes
+
+- [#34](https://github.com/bcgov/connect-nuxt/pull/34) [`b2a0458`](https://github.com/bcgov/connect-nuxt/commit/b2a04587d5408d213d463ef6161b701ca597ef86) Thanks [@deetz99](https://github.com/deetz99)! - - handle user session expiry in auth plugin
+
+  - onBeforeSessionExpiry route meta
+  - onAccountChange route meta
+  - resetPiniaStores util and reset on logout
+  - add account id to layouts/ConnectAuth breadcrumb slot
+
+  issue: bcgov/entity#29335
+
+- [#32](https://github.com/bcgov/connect-nuxt/pull/32) [`66d83d1`](https://github.com/bcgov/connect-nuxt/commit/66d83d14b2ec7950057dd39a4d876a8c4096923f) Thanks [@kialj876](https://github.com/kialj876)! - Pay layer cleanup bcgov/entity#29337
+
+- Updated dependencies [[`66d83d1`](https://github.com/bcgov/connect-nuxt/commit/66d83d14b2ec7950057dd39a4d876a8c4096923f)]:
+  - @sbc-connect/nuxt-base@0.1.8
+
 ## 0.1.7
 
 ### Patch Changes

package/README.md

@@ -16,7 +16,7 @@ This package provides the necessary composables, plugins, and logic to integrate
 - login() and logout() helper functions.
 - Automatic token refreshing and session validation.
 
-For detailed usage and documentation, please see the [Auth Layer Docs](../../../docs/packages/layers/auth/intro.md).
+For detailed usage and documentation, please see the [Auth Layer Docs](../../../docs/packages/layers/auth/overview.md).
 
 ## Usage
 
@@ -46,14 +46,7 @@ Create a file named .env in the root of the project.
 Copy the contents of the .env.example file into your new .env file.
 
 ### Local Development
-For local development, you will need credentials for the development instance of the authentication provider.
-
-```
-# .env
-NUXT_PUBLIC_AUTH_PROVIDER_URL="https://dev.oidc.gov.bc.ca/auth"
-NUXT_PUBLIC_AUTH_PROVIDER_REALM="your-realm-name"
-NUXT_PUBLIC_AUTH_PROVIDER_CLIENT_ID="your-client-id"
-```
+Copy the contents of the **.env.example** file into your new .env file.
 
 ### Production Environments
 > [!IMPORTANT]

package/app/app.config.ts

@@ -1,9 +1,12 @@
 export default defineAppConfig({
   connect: {
     login: {
-      redirectPath: '',
+      redirect: '',
       idps: ['bcsc', 'bceid', 'idir']
     },
+    logout: {
+      redirect: ''
+    },
     header: {
       loginMenu: true,
       createAccount: true,

package/app/components/Connect/Header/AccountLabel.vue

@@ -26,7 +26,7 @@ defineProps({
       </span>
       <span
         class="line-clamp-1 overflow-hidden text-ellipsis text-xs opacity-75"
-        :class="{ 'text-line': theme === 'header', 'text-neutral': theme === 'dropdown' }"
+        :class="{ 'text-line-muted': theme === 'header', 'text-neutral': theme === 'dropdown' }"
       >
         {{ accountName }}
       </span>

package/app/components/Connect/Modal/SessionExpired.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const isSmallScreen = useMediaQuery('(max-width: 640px)')
+const rtc = useRuntimeConfig().public
+const modalTimeout = rtc.sessionModalTimeout ? Number(rtc.sessionModalTimeout) : 120000
+const { t } = useI18n()
+const route = useRoute()
+
+const emit = defineEmits<{ close: [] }>()
+
+const timeRemaining = ref(toValue((modalTimeout) / 1000))
+
+const intervalId = setInterval(async () => {
+  const value = timeRemaining.value - 1
+  timeRemaining.value = value < 0 ? 0 : value
+
+  if (value === 0) {
+    if (route.meta.onBeforeSessionExpired) {
+      await route.meta.onBeforeSessionExpired()
+    }
+    sessionStorage.setItem(ConnectAuthStorageKey.CONNECT_SESSION_EXPIRED, 'true')
+    await useConnectAuth().logout()
+  }
+}, 1000)
+
+const ariaCountdownText = computed(() => {
+  if (timeRemaining.value === 30) { // trigger aria alert when 30 seconds remain
+    return t('connect.sessionExpiry.content', { count: timeRemaining.value })
+  } else if (timeRemaining.value === 2) { // trigger aria alert when session expires
+    return t('connect.sessionExpiry.sessionExpired')
+  } else {
+    return ''
+  }
+})
+
+function closeModal() {
+  clearInterval(intervalId)
+  emit('close')
+}
+
+onMounted(() => {
+  // allow any keypress to close the modal
+  window.addEventListener('keydown', closeModal)
+})
+
+onUnmounted(() => {
+  // cleanup
+  window.removeEventListener('keydown', closeModal)
+})
+</script>
+
+<template>
+  <UModal
+    id="session-expired-dialog"
+    overlay
+    :title="$t('connect.sessionExpiry.title')"
+    :description="$t('connect.sessionExpiry.content', { count: timeRemaining })"
+    @after:leave="closeModal"
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <div role="alert">
+          <h2
+            id="session-expired-dialog-title"
+            class="text-xl font-bold text-neutral-highlighted"
+          >
+            {{ $t('connect.sessionExpiry.title') }}
+          </h2>
+        </div>
+        <div>
+          <ConnectI18nHelper
+            id="session-expired-dialog-description"
+            translation-path="connect.sessionExpiry.content"
+            :count="timeRemaining"
+          />
+
+          <div role="alert">
+            <span class="sr-only">{{ ariaCountdownText }}</span>
+          </div>
+        </div>
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <UButton
+            :block="isSmallScreen"
+            :label="$t('connect.sessionExpiry.continueBtn.main')"
+            :aria-label="$t('connect.sessionExpiry.continueBtn.aria')"
+            size="xl"
+            class="font-bold"
+            @click="closeModal"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/composables/useConnectAuth.ts

@@ -9,8 +9,7 @@ export const useConnectAuth = () => {
    * @returns A promise that resolves when login is complete.
    */
   function login(idpHint: ConnectIdpHint, redirect?: string): Promise<void> {
-    const loginRedirectUrl = sessionStorage.getItem(ConnectAuthStorageKeys.LOGIN_REDIRECT_URL)
-    const redirectUri = redirect ?? loginRedirectUrl ?? window.location.href
+    const redirectUri = redirect ?? window.location.href
 
     return $connectAuth.login(
       {
@@ -27,14 +26,13 @@ export const useConnectAuth = () => {
    */
   function logout(redirect?: string): Promise<void> {
     const siteminderUrl = rtc.siteminderLogoutUrl
-    const logoutRedirectUrl = sessionStorage.getItem(ConnectAuthStorageKeys.LOGOUT_REDIRECT_URL)
-    let redirectUri = redirect ?? logoutRedirectUrl ?? window.location.href
+    let redirectUri = redirect ?? window.location.href
 
     if (siteminderUrl) {
       redirectUri = `${siteminderUrl}?returl=${redirectUri.replace(/(https?:\/\/)|(\/)+/g, '$1$2')}&retnow=1`
     }
 
-    // resetPiniaStores()
+    resetPiniaStores()
     return $connectAuth.logout({
       redirectUri
     })
@@ -81,30 +79,10 @@ export const useConnectAuth = () => {
       })
   }
 
-  function setLoginRedirectUrl(url: string) {
-    sessionStorage.setItem(ConnectAuthStorageKeys.LOGIN_REDIRECT_URL, url)
-  }
-
-  function setLogoutRedirectUrl(url: string) {
-    sessionStorage.setItem(ConnectAuthStorageKeys.LOGOUT_REDIRECT_URL, url)
-  }
-
-  function clearLoginRedirectUrl() {
-    sessionStorage.removeItem(ConnectAuthStorageKeys.LOGIN_REDIRECT_URL)
-  }
-
-  function clearLogoutRedirectUrl() {
-    sessionStorage.removeItem(ConnectAuthStorageKeys.LOGOUT_REDIRECT_URL)
-  }
-
   return {
     login,
     logout,
     getToken,
-    clearLoginRedirectUrl,
-    clearLogoutRedirectUrl,
-    setLoginRedirectUrl,
-    setLogoutRedirectUrl,
     isAuthenticated,
     authUser
   }

package/app/composables/useConnectHeaderOptions.ts

@@ -11,8 +11,9 @@ export function useConnectHeaderOptions() {
   const route = useRoute()
   const overlay = useOverlay()
   const { t, locale: { value: locale } } = useNuxtApp().$i18n
-  const { login, logout, isAuthenticated, authUser } = useConnectAuth()
+  const { login, isAuthenticated, authUser } = useConnectAuth()
   const accountStore = useConnectAccountStore()
+  const localePath = useLocalePath()
 
   const whatsNew = useStorage<ConnectWhatsNewState>('connect-whats-new', { viewed: false, items: [] })
   const slideover = overlay.create(ConnectSlideoverWhatsNew)
@@ -38,7 +39,7 @@ export function useConnectHeaderOptions() {
     options.push({
       label: t('connect.label.logout'),
       icon: 'i-mdi-logout-variant',
-      onSelect: () => logout()
+      onSelect: () => navigateTo(localePath('/auth/logout'))
     })
     return options
   })
@@ -87,9 +88,7 @@ export function useConnectHeaderOptions() {
           onSelect: () => {
             if (!isActive && account.id) {
               if (route.meta.onAccountChange) {
-                // TODO: add route meta option
-                const allowAccountChange = true
-                // const allowAccountChange = route.meta.onAccountChange(accountStore.currentAccount, account)
+                const allowAccountChange = route.meta.onAccountChange(accountStore.currentAccount, account)
                 if (allowAccountChange) {
                   accountStore.switchCurrentAccount(account.id)
                 }
@@ -136,8 +135,8 @@ export function useConnectHeaderOptions() {
     return options
   })
 
-  const loginRedirectUrl = ac.login.redirectPath
-    ? appBaseUrl + locale + ac.login.redirectPath
+  const loginRedirectUrl = ac.login.redirect
+    ? appBaseUrl + locale + ac.login.redirect
     : undefined
 
   const loginOptionsMap: Record<'bcsc' | 'bceid' | 'idir',

package/app/composables/useConnectLaunchDarkly.ts

@@ -0,0 +1,245 @@
+import { initialize } from 'launchdarkly-js-client-sdk'
+import type { LDClient, LDFlagSet, LDOptions, LDMultiKindContext } from 'launchdarkly-js-client-sdk'
+import { isEqual } from 'es-toolkit'
+
+// default anon context
+const anonymousContext: LDMultiKindContext = {
+  kind: 'multi',
+  org: { key: 'anonymous' },
+  user: { key: 'anonymous' }
+}
+
+// state
+// Defined outside of composable, so they are created only once and shared
+const ldClient = shallowRef<LDClient | null>(null)
+const ldFlagSet = shallowRef<LDFlagSet>({})
+const ldContext = shallowRef<LDMultiKindContext>(anonymousContext)
+const ldInitialized = ref(false)
+const isInitializing = ref(false)
+
+function _createLdContext(): LDMultiKindContext {
+  const appName = useRuntimeConfig().public.appName
+  const { authUser, isAuthenticated } = useConnectAuth()
+  const account = useConnectAccountStore().currentAccount
+
+  if (!isAuthenticated.value) {
+    return anonymousContext
+  }
+
+  // Create user context
+  const user = {
+    key: authUser.value.keycloakGuid,
+    firstName: authUser.value.firstName,
+    lastName: authUser.value.lastName,
+    email: authUser.value.email,
+    roles: authUser.value.roles,
+    loginSource: authUser.value.loginSource,
+    appSource: appName
+  }
+
+  // Default org to user key if no account
+  let org: Partial<ConnectAccount & { key: string, appSource: string }> = { key: user.key, appSource: appName }
+
+  // Use account info if available
+  if (account.id) {
+    org = {
+      key: String(account.id),
+      accountType: account.accountType,
+      accountStatus: account.accountStatus,
+      type: account.type,
+      label: account.label,
+      appSource: appName
+    }
+  }
+
+  return { kind: 'multi', org, user }
+}
+
+function _updateLdContext() {
+  if (!ldClient.value) {
+    return
+  }
+
+  const newContext = _createLdContext()
+  if (isEqual(ldContext.value, newContext)) {
+    return
+  }
+
+  ldContext.value = newContext
+  ldClient.value.identify(newContext).then(() => {
+    ldFlagSet.value = ldClient.value?.allFlags() || {}
+  }).catch((error) => {
+    console.error('LaunchDarkly: Failed to update context.', error)
+  })
+}
+
+/**
+ * Initializes the LaunchDarkly client.
+*/
+function _init(): void {
+  const rtc = useRuntimeConfig().public
+
+  // Prevent re-initialization
+  if (ldInitialized.value || isInitializing.value) {
+    return
+  }
+  // Prevent initialization if missing client ID
+  if (!rtc.ldClientId) {
+    console.error('LaunchDarkly: ldClientId is not configured.')
+    return
+  }
+
+  isInitializing.value = true
+
+  ldContext.value = _createLdContext()
+
+  const options: LDOptions = {
+    streaming: false,
+    useReport: false,
+    diagnosticOptOut: true
+  }
+
+  try {
+    ldClient.value = initialize(rtc.ldClientId, ldContext.value, options)
+
+    ldClient.value.on('initialized', () => {
+      ldInitialized.value = true
+      isInitializing.value = false
+      ldFlagSet.value = ldClient.value?.allFlags() || {}
+      console.info('LaunchDarkly: Anonymous initialization complete.')
+    })
+
+    ldClient.value.on('error', (error) => {
+      console.error('LaunchDarkly: Initialization error.', error)
+      isInitializing.value = false
+    })
+  } catch (error) {
+    console.error('LaunchDarkly: Failed to initialize.', error)
+    isInitializing.value = false
+  }
+}
+
+/**
+ * Composable for the LaunchDarkly service.
+*/
+export const useConnectLaunchDarkly = () => {
+  // initialize only once
+  if (!ldInitialized.value && !isInitializing.value && import.meta.client) {
+    _init()
+  }
+
+  const { isAuthenticated } = useConnectAuth()
+  const accountStore = useConnectAccountStore()
+
+  watch(
+    [isAuthenticated, () => accountStore.currentAccount],
+    () => {
+      _updateLdContext()
+    },
+    { immediate: true }
+  )
+
+  /**
+   * Returns a flag's value. Can operate in two modes.
+   * @param name The name of the feature flag.
+   * @param defaultValue The value to use until the flag is loaded.
+   * @param mode - 'reactive' (default) returns a ref that updates automatically.
+   * 'await' returns a promise that resolves when the client is ready.
+   * @returns A readonly ref or a promise resolving to the flag's value.
+   */
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'await'
+  ): Promise<T>
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode?: 'reactive'
+  ): Readonly<Ref<T>>
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue?: T,
+    mode?: 'reactive'
+  ): Readonly<Ref<T | undefined>>
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue?: T,
+    mode: 'reactive' | 'await' = 'reactive'
+  ): Readonly<Ref<T | undefined>> | Promise<T | undefined> {
+    if (mode === 'await') {
+      if (!ldClient.value) {
+        return Promise.resolve(defaultValue)
+      }
+      return ldClient.value.waitUntilReady()
+        .then(() => ldClient.value ? ldClient.value.variation(name, defaultValue) : defaultValue)
+        .catch((error) => {
+          console.error(`LaunchDarkly: Error waiting for client while getting flag "${name}".`, error)
+          return defaultValue
+        })
+    }
+
+    return readonly(computed(() => {
+      if (!ldClient.value || !ldInitialized.value || !ldFlagSet.value) {
+        return defaultValue
+      }
+      return ldClient.value.variation(name, defaultValue)
+    }))
+  }
+
+  /**
+   * Returns a flag's value from the locally stored flag set. Can operate in two modes.
+   * @param name The name of the feature flag.
+   * @param defaultValue The value to use until the flag is loaded.
+   * @param mode - 'reactive' (default) returns a ref that updates automatically.
+   * 'await' returns a promise that resolves when the client is ready.
+   * @returns A readonly ref or a promise resolving to the flag's value.
+   */
+  async function getStoredFlag<T>(name: string, defaultValue: T, mode: 'await'): Promise<T>
+  function getStoredFlag<T>(name: string, defaultValue?: T, mode?: 'reactive'): Readonly<Ref<T>>
+  function getStoredFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'reactive' | 'await' = 'reactive'
+  ): Readonly<Ref<T>> | Promise<T> {
+    if (mode === 'await') {
+      if (!ldClient.value) {
+        return Promise.resolve(defaultValue)
+      }
+      return ldClient.value.waitUntilReady()
+        .then(() => ldFlagSet.value[name] ?? defaultValue)
+        .catch((error) => {
+          console.error(`LaunchDarkly: Error waiting for client while getting stored flag "${name}".`, error)
+          return defaultValue
+        })
+    }
+
+    // reactive mode
+    return readonly(computed(() => {
+      if (!ldInitialized.value || !ldFlagSet.value) {
+        return defaultValue
+      }
+      return ldFlagSet.value[name] ?? defaultValue
+    }))
+  }
+
+  /**
+   * Resets the LaunchDarkly state and closes the client connection.
+   */
+  const $reset = () => {
+    ldInitialized.value = false
+    isInitializing.value = false
+    ldClient.value?.close()
+    ldClient.value = null
+    ldFlagSet.value = {}
+  }
+
+  return {
+    getFeatureFlag,
+    getStoredFlag,
+    ldInitialized: readonly(ldInitialized),
+    ldFlagSet: readonly(ldFlagSet),
+    ldClient: readonly(ldClient),
+    $reset
+  }
+}

package/app/enums/connect-auth-storage-key.ts

@@ -0,0 +1,3 @@
+export enum ConnectAuthStorageKey {
+  CONNECT_SESSION_EXPIRED = 'connect-session-expired'
+}

package/app/layouts/ConnectAuth.vue

@@ -1,8 +1,19 @@
+<script setup lang="ts">
+const accountStore = useConnectAccountStore()
+</script>
+
 <template>
   <ConnectLayout>
     <template #header>
       <ConnectHeaderAuth />
     </template>
+    <template #breadcrumb>
+      <ConnectBreadcrumb
+        :account-id="accountStore.currentAccount.id
+          ? String(accountStore.currentAccount.id)
+          : undefined"
+      />
+    </template>
     <slot />
   </ConnectLayout>
 </template>

package/app/middleware/connect-auth.ts

@@ -0,0 +1,9 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { isAuthenticated } = useConnectAuth()
+  const rtc = useRuntimeConfig().public
+  const localePath = useLocalePath()
+
+  if (!isAuthenticated.value) {
+    return navigateTo(localePath(`/auth/login?return=${rtc.baseUrl}${to.fullPath.slice(1)}`))
+  }
+})

package/app/pages/auth/login.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import loginImage from '#auth/public/img/BCReg_Generic_Login_image.jpg'
+
+const { t, locale } = useI18n()
+const { login } = useConnectAuth()
+const rtc = useRuntimeConfig().public
+const ac = useAppConfig().connect
+const route = useRoute()
+
+useHead({
+  title: t('connect.page.login.title')
+})
+
+definePageMeta({
+  layout: 'connect-auth',
+  hideBreadcrumbs: true,
+  middleware: async (to) => {
+    const { $connectAuth, $router, _appConfig } = useNuxtApp()
+    if ($connectAuth.authenticated) {
+      if (to.query.return) {
+        window.location.replace(to.query.return as string)
+        return
+      }
+      await $router.push(_appConfig.connect.login.redirect || '/')
+    }
+  }
+})
+
+const isSessionExpired = sessionStorage.getItem(ConnectAuthStorageKey.CONNECT_SESSION_EXPIRED)
+
+const loginOptions = computed(() => {
+  const urlReturn = route.query.return
+  const redirectUrl = urlReturn !== undefined
+    ? urlReturn as string
+    : `${rtc.baseUrl}${locale.value}${ac.login.redirect}`
+
+  const loginOptionsMap: Record<
+    'bcsc' | 'bceid' | 'idir',
+    { label: string, icon: string, onClick: () => Promise<void> }
+  > = {
+    bcsc: {
+      label: t('connect.page.login.loginBCSC'),
+      icon: 'i-mdi-account-card-details-outline',
+      onClick: () => login(ConnectIdpHint.BCSC, redirectUrl)
+    },
+    bceid: {
+      label: t('connect.page.login.loginBCEID'),
+      icon: 'i-mdi-two-factor-authentication',
+      onClick: () => login(ConnectIdpHint.BCEID, redirectUrl)
+    },
+    idir: {
+      label: t('connect.page.login.loginIDIR'),
+      icon: 'i-mdi-account-group-outline',
+      onClick: () => login(ConnectIdpHint.IDIR, redirectUrl)
+    }
+  }
+
+  return ac.login.idps.map(key => loginOptionsMap[key as keyof typeof loginOptionsMap])
+})
+</script>
+
+<template>
+  <div class="flex grow flex-col items-center justify-center py-10">
+    <div class="flex flex-col items-center gap-10">
+      <h1>
+        {{ $t('connect.page.login.h1') }}
+      </h1>
+      <UAlert
+        v-if="isSessionExpired"
+        color="warning"
+        variant="subtle"
+        :title="$t('connect.page.login.sessionExpiredAlert.title')"
+        :description="$t('connect.page.login.sessionExpiredAlert.description')"
+        icon="i-mdi-alert"
+      />
+      <UCard class="my-auto max-w-md">
+        <img
+          :src="loginImage"
+          class="pb-4"
+          :alt="$t('connect.text.imageAltGenericLogin')"
+        >
+        <div class="space-y-4 pt-2.5">
+          <div
+            v-for="(option, i) in loginOptions"
+            :key="option.label"
+            class="flex flex-col items-center gap-1"
+          >
+            <UButton
+              :variant="i === 0 ? 'solid' : 'outline'"
+              block
+              class="py-2.5"
+              v-bind="option"
+            />
+          </div>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>

package/app/pages/auth/logout.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const route = useRoute()
+const rtc = useRuntimeConfig().public
+const ac = useAppConfig().connect
+const { locale } = useI18n()
+const { logout } = useConnectAuth()
+
+const redirectUrl = computed(() => {
+  const urlReturn = route.query.return
+  const url = urlReturn !== undefined
+    ? urlReturn as string
+    : `${rtc.baseUrl}${locale.value}${ac.login.redirect}`
+  return url
+})
+
+onMounted(async () => {
+  await logout(redirectUrl.value)
+})
+</script>
+
+<template>
+  <ConnectSpinner fullscreen />
+</template>

package/app/plugins/connect-auth.client.ts

@@ -1,4 +1,5 @@
 import Keycloak from 'keycloak-js'
+import { ConnectModalSessionExpired } from '#components'
 
 export default defineNuxtPlugin(async () => {
   const rtc = useRuntimeConfig().public
@@ -10,6 +11,10 @@ export default defineNuxtPlugin(async () => {
     clientId: rtc.idpClientid
   })
 
+  const tokenRefreshInterval = rtc.tokenRefreshInterval ? Number(rtc.tokenRefreshInterval) : 30000
+  const tokenMinValidity = rtc.tokenMinValidity ? Number(rtc.tokenMinValidity) / 1000 : 120
+  const sessionInactivityTimeout = rtc.sessionInactivityTimeout ? Number(rtc.sessionInactivityTimeout) : 1800000
+
   try {
     // default behaviour when keycloak session expires
     // try to update token - log out if token update fails
@@ -18,7 +23,7 @@ export default defineNuxtPlugin(async () => {
     keycloak.onTokenExpired = async () => {
       try {
         console.info('[Auth] Token expired, refreshing token...')
-        await keycloak.updateToken(minValidity)
+        await keycloak.updateToken(tokenMinValidity)
         console.info('[Auth] Token refreshed.')
       } catch (error) {
         console.error('[Auth] Failed to refresh token on expiration; logging out.', error)
@@ -36,34 +41,24 @@ export default defineNuxtPlugin(async () => {
     console.error('[Auth] Failed to initialize Keycloak adapter: ', error)
   }
 
-  // TODO: add to env
-  const refreshIntervalTimeout = 30000 // rtc.tokenRefreshInterval as number
-  const minValidity = 120 // toValue((rtc.tokenMinValidity as number) / 1000) // convert to seconds
-  const idleTimeout = 1800000 // rtc.sessionIdleTimeout as number
-
-  // const route = useRoute()
-  const { idle } = useIdle(idleTimeout)
+  const { idle } = useIdle(sessionInactivityTimeout)
 
   // executed when user is authenticated and idle = true
-  // TODO: manage session expiry
   async function sessionExpired() {
-    // if (route.meta.sessionExpiredFn) { // if route meta provided, override default behaviour
-    //   await route.meta.sessionExpiredFn()
-    // } else { // open expiry modal
-    //   await useConnectModals().openSessionExpiringModal()
-    // }
-    console.info('TODO - MANAGE SESSION EXPIRY')
+    const overlay = useOverlay()
+    const modal = overlay.create(ConnectModalSessionExpired)
+    modal.open()
   }
 
-  // refresh token if expiring within <minValidity> - checks every <refreshIntervalTimeout>
+  // refresh token if expiring within <tokenMinValidity> - checks every <tokenRefreshInterval>
   function scheduleRefreshToken() {
     console.info('[Auth] Verifying token validity.')
 
     setTimeout(async () => {
-      if (keycloak.isTokenExpired(minValidity)) {
+      if (keycloak.isTokenExpired(tokenMinValidity)) {
         console.info('[Auth] Token set to expire soon. Refreshing token...')
         try {
-          await keycloak.updateToken(minValidity)
+          await keycloak.updateToken(tokenMinValidity)
           console.info('[Auth] Token refreshed.')
         } catch (error) {
           console.error('[Auth] Failed to refresh token; logging out.', error)
@@ -72,7 +67,7 @@ export default defineNuxtPlugin(async () => {
       }
 
       scheduleRefreshToken()
-    }, refreshIntervalTimeout)
+    }, tokenRefreshInterval)
   }
 
   // Watch for changes in authentication and idle state
@@ -82,8 +77,7 @@ export default defineNuxtPlugin(async () => {
     [() => keycloak.authenticated, () => idle.value],
     async ([isAuth, isIdle]) => {
       if (isAuth) {
-        // TODO: add storage keys
-        // sessionStorage.removeItem(ConnectStorageKeys.CONNECT_SESSION_EXPIRED)
+        sessionStorage.removeItem(ConnectAuthStorageKey.CONNECT_SESSION_EXPIRED)
         if (!isIdle) {
           console.info('[Auth] Starting token refresh schedule.')
           scheduleRefreshToken()

package/app/stores/connect-account.ts

@@ -11,7 +11,6 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
   const userFirstName = ref<string>(user.value?.firstName || '-')
   const userLastName = ref<string>(user.value?.lastName || '')
   const userFullName = computed(() => `${userFirstName.value} ${userLastName.value}`)
-  const errors = ref<ConnectApiError[]>([])
 
   /**
    * Checks if the current account or the Keycloak user has any of the specified roles.
@@ -42,35 +41,17 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
 
   /** Get user information from AUTH */
   async function getAuthUserProfile(identifier: string): Promise<{ firstname: string, lastname: string } | undefined> {
-    try {
-      return $authApi<{ firstname: string, lastname: string }>(`/users/${identifier}`, {
-        parseResponse: JSON.parse,
-        onResponseError({ response }) {
-          errors.value.push({
-            statusCode: response.status || 500,
-            message: response._data?.message || response._data?.description || 'Error fetching user info.',
-            detail: response._data.detail || '',
-            category: ConnectErrorCategory.USER_INFO
-          })
-        }
-      })
-    } catch (e) {
-      console.error('Error fetching user info.', e)
-      // logFetchError(e, 'Error fetching user info.')
-    }
+    return $authApi<{ firstname: string, lastname: string }>(`/users/${identifier}`, {
+      parseResponse: JSON.parse
+    })
   }
 
   /** Update user information in AUTH with current token info */
   async function updateAuthUserInfo(): Promise<void> {
-    try {
-      await $authApi('/users', {
-        method: 'POST',
-        body: { isLogin: true }
-      })
-    } catch (e) {
-      console.error('Error updating auth user info', e)
-      // logFetchError(e, 'Error updating auth user info')
-    }
+    await $authApi('/users', {
+      method: 'POST',
+      body: { isLogin: true }
+    })
   }
 
   /** Set user name information */
@@ -90,25 +71,9 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     if (!authUser.value?.keycloakGuid) {
       return undefined
     }
-    try {
-      // TODO: use orgs fetch instead to get branch name ? $authApi<UserSettings[]>('/users/orgs')
-      const response = await $authApi<ConnectUserSettings[]>(`/users/${authUser.value.keycloakGuid}/settings`, {
-        onResponseError({ response }) {
-          errors.value.push({
-            statusCode: response.status || 500,
-            message: response._data?.message || 'Error retrieving user accounts.',
-            detail: response._data.detail || '',
-            category: ConnectErrorCategory.ACCOUNT_LIST
-          })
-        }
-      })
-
-      return response?.filter(setting => setting.type === UserSettingsType.ACCOUNT) as ConnectAccount[]
-    } catch (e) {
-      console.error('Error retrieving user accounts', e)
-      // logFetchError(e, 'Error retrieving user accounts')
-      return undefined
-    }
+    // TODO: use orgs fetch instead to get branch name ? $authApi<UserSettings[]>('/users/orgs')
+    const response = await $authApi<ConnectUserSettings[]>(`/users/${authUser.value.keycloakGuid}/settings`)
+    return response?.filter(setting => setting.type === UserSettingsType.ACCOUNT) as ConnectAccount[]
   }
 
   /** Set the user account list and current account */
@@ -136,23 +101,8 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     if (!accountId || !keycloakGuid) {
       return
     }
-    try {
-      const response = await $authApi<{ count: number }>(`/users/${keycloakGuid}/org/${accountId}/notifications`, {
-        onResponseError({ response }) {
-          errors.value.push({
-            statusCode: response.status || 500,
-            message: response._data.message || 'Error retrieving pending approvals.',
-            detail: response._data.detail || '',
-            category: ConnectErrorCategory.PENDING_APPROVAL_COUNT
-          })
-        }
-      })
-
-      pendingApprovalCount.value = response?.count || 0
-    } catch (e) {
-      console.error('Error retrieving pending approvals', e)
-      // logFetchError(e, 'Error retrieving pending approvals')
-    }
+    const response = await $authApi<{ count: number }>(`/users/${keycloakGuid}/org/${accountId}/notifications`)
+    pendingApprovalCount.value = response?.count || 0
   }
 
   async function checkAccountStatus() {
@@ -188,17 +138,21 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
   }
 
   async function initAccountStore(): Promise<void> {
-    await Promise.all([
-      setAccountInfo(),
-      updateAuthUserInfo(),
-      setUserName()
-    ])
-
-    if (currentAccount.value.id) {
+    try {
       await Promise.all([
-        checkAccountStatus(),
-        getPendingApprovalCount()
+        setAccountInfo(),
+        updateAuthUserInfo(),
+        setUserName()
       ])
+
+      if (currentAccount.value.id) {
+        await Promise.all([
+          checkAccountStatus(),
+          getPendingApprovalCount()
+        ])
+      }
+    } catch (e) {
+      logFetchError(e, '[Account Store] - Error during initialization')
     }
   }
 
@@ -207,7 +161,6 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     currentAccount.value = {} as ConnectAccount
     userAccounts.value = []
     pendingApprovalCount.value = 0
-    errors.value = []
     userFirstName.value = user.value?.firstName || '-'
     userLastName.value = user.value?.lastName || ''
   }
@@ -217,7 +170,6 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     currentAccountName,
     userAccounts,
     pendingApprovalCount,
-    errors,
     userFullName,
     checkAccountStatus,
     setUserName,

package/app/types/auth-app-config.d.ts

@@ -2,9 +2,12 @@ declare module '@nuxt/schema' {
   interface AppConfigInput {
     connect?: {
       login?: {
-        redirectPath?: string
+        redirect?: string
         idps?: Array<'bcsc' | 'bceid' | 'idir'>
       }
+      logout?: {
+        redirect?: string
+      }
       header?: {
         loginMenu?: boolean
         createAccount?: boolean

package/app/types/auth-page-meta.d.ts

@@ -0,0 +1,8 @@
+declare module '#app' {
+  interface PageMeta {
+    onBeforeSessionExpired?: () => void | Promise<void>
+    onAccountChange?: (oldAccount: ConnectAccount, newAccount: ConnectAccount) => boolean
+  }
+}
+
+export {}

package/app/utils/resetPiniaStores.ts

@@ -0,0 +1,33 @@
+import type { Pinia, Store } from 'pinia'
+import { getActivePinia } from 'pinia'
+
+interface ExtendedPinia extends Pinia {
+  _s: Map<string, Store>
+}
+
+/**
+ * Resets specific Pinia stores if store IDs are specified.
+ * If no IDs are provided, resets all stores that have a `$reset` method.
+ * @param {string[]} storeIds - Array of store IDs to reset. If empty, all stores will be reset.
+ */
+export function resetPiniaStores(storeIds: string[] = []): void {
+  const pinia = getActivePinia() as ExtendedPinia
+
+  if (!pinia && import.meta.env.DEV === true) {
+    console.warn('No pinia stores found.')
+    return
+  }
+
+  // null check still fails so must catch error instead
+  pinia._s.forEach((store) => {
+    if (storeIds.length === 0 || storeIds.includes(store.$id)) {
+      try {
+        store.$reset()
+      } catch {
+        if (import.meta.env.DEV === true) {
+          console.warn(`Store "${store.$id}" does not implement $reset. Skipping reset.`)
+        }
+      }
+    }
+  })
+}

package/app/utils/setOnBeforeSessionExpired.ts

@@ -0,0 +1,23 @@
+// cant use await inside definePageMeta so must use separate util to set page meta if await required
+/**
+ * Sets the `onBeforeSessionExpired` callback for the current route.
+ *
+ * This function allows you to provide a callback (`cb`) that will be called before the session expires.
+ * The callback can either be synchronous (returning `void`) or asynchronous (returning a `Promise`).
+ *
+ * @param {() => T | Promise<T>} cb - The callback function to execute before session expiry.
+ *
+ * @example
+ * setOnBeforeSessionExpired(() => {
+ *   // Do something before session expiry
+ * });
+ *
+ * @example
+ * setOnBeforeSessionExpired(() => submitApplication());
+ */
+export function setOnBeforeSessionExpired<T>(cb: () => T | Promise<T>) {
+  const route = useRoute()
+  route.meta.onBeforeSessionExpired = async () => {
+    await cb()
+  }
+}

package/i18n/locales/en-CA.ts

@@ -21,7 +21,30 @@ export default {
       teamMembers: 'Team Members',
       transactions: 'Transactions'
     },
+    page: {
+      login: {
+        h1: 'SBC Connect Account Login',
+        title: 'Log in - SBC Connect',
+        loginBCSC: 'Login with BC Services Card',
+        loginBCEID: 'Login with BCeID',
+        loginIDIR: 'Login with IDIR',
+        sessionExpiredAlert: {
+          title: 'Session Expired',
+          description: 'Your session has expired. Please log in again to continue.'
+        }
+      }
+    },
+    sessionExpiry: {
+      title: 'Session Expiring Soon',
+      content: 'Your session is about to expire due to inactivity. You will be logged out in {boldStart}0{boldEnd} seconds. Press any key to continue your session. | Your session is about to expire due to inactivity. You will be logged out in {boldStart}1{boldEnd} second. Press any key to continue your session. | Your session is about to expire due to inactivity. You will be logged out in {boldStart}{count}{boldEnd} seconds. Press any key to continue your session.',
+      sessionExpired: 'Session Expired',
+      continueBtn: {
+        main: 'Continue Session',
+        aria: 'Your session is about to expire, press any key to continue your session.'
+      }
+    },
     text: {
+      imageAltGenericLogin: 'Generic Login Image',
       notifications: {
         none: 'No Notifications',
         teamMemberApproval: '{count} team member requires approval to access this account. | {count} team members require approval to access this account.'

package/nuxt.config.ts

@@ -71,7 +71,11 @@ export default defineNuxtConfig({
       authApiUrl: '',
       authApiVersion: '',
       xApiKey: '',
-      authWebUrl: ''
+      authWebUrl: '',
+      tokenRefreshInterval: '',
+      tokenMinValidity: '',
+      sessionInactivityTimeout: '',
+      sessionModalTimeout: ''
     }
   }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-auth",
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -12,8 +12,8 @@
     "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
     "vue-tsc": "^3.0.4",
+    "@sbc-connect/playwright-config": "0.0.6",
     "@sbc-connect/eslint-config": "0.0.6",
-    "@sbc-connect/playwright-config": "0.0.5",
     "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
@@ -21,7 +21,7 @@
     "keycloak-js": "^26.2.0",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
-    "@sbc-connect/nuxt-base": "0.1.7"
+    "@sbc-connect/nuxt-base": "0.1.8"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -33,7 +33,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "pnpm run test:unit; pnpm run test:e2e",
-    "test:unit": "vitest run",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:unit:watch": "vitest",
     "test:e2e": "npx playwright test",
     "typecheck": "npx nuxt typecheck"
   }

package/app/enums/connect-auth-storage-keys.ts

@@ -1,5 +0,0 @@
-export enum ConnectAuthStorageKeys {
-  LOGIN_REDIRECT_URL = 'sbc-connect-login-redirect-url',
-  LOGOUT_REDIRECT_URL = 'sbc-connect-logout-redirect-url',
-  CONNECT_SESSION_EXPIRED = 'connect-session-expired'
-}

package/app/enums/connect-error-category.ts

@@ -1,6 +0,0 @@
-export enum ConnectErrorCategory {
-  USER_ACCOUNTS = 'user-accounts',
-  ACCOUNT_LIST = 'account-list',
-  PENDING_APPROVAL_COUNT = 'pending-approval-count',
-  USER_INFO = 'user-info'
-}

package/app/interfaces/connect-api-error.ts

@@ -1,6 +0,0 @@
-export interface ConnectApiError {
-  category: ConnectErrorCategory
-  detail?: string | string[]
-  message: string
-  statusCode: number
-}