@sbc-connect/nuxt-auth 0.1.32 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @sbc-connect/nuxt-auth
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies [[`f5d34df`](https://github.com/bcgov/connect-nuxt/commit/f5d34df0bbb2b37cbeda8a9dd39c6bce098c564f)]:
+  - @sbc-connect/nuxt-base@0.4.0
+
+## 0.2.0
+
+### Minor Changes
+
+- [#104](https://github.com/bcgov/connect-nuxt/pull/104) [`5f1b383`](https://github.com/bcgov/connect-nuxt/commit/5f1b3839ed993654a7f20fe161047ba38ab86274) Thanks [@deetz99](https://github.com/deetz99)! - - Terms of Use page
+
+  - check user terms of use in auth middleware
+  - useAuthApi composable using pinia-colada for api methods
+  - terms of use error/decline modals
+  - auth contact, auth profile and terms of use interfaces
+  - update account store to use pinia-colada query for setUserName method
+  - related i18n translations
+  - add '@pinia/colada-nuxt' nuxt module
+
+- [#102](https://github.com/bcgov/connect-nuxt/pull/102) [`d714785`](https://github.com/bcgov/connect-nuxt/commit/d71478573f1fe11be34d5d588d68fb75eb5fd159) Thanks [@deetz99](https://github.com/deetz99)! - - allowed-idps middleware
+  - login-page middleware
+  - add explicit typing for allowed idps in app config
+  - util getValidIdps constant
+  - Choose existing account page (WIP)
+
+### Patch Changes
+
+- Updated dependencies [[`d714785`](https://github.com/bcgov/connect-nuxt/commit/d71478573f1fe11be34d5d588d68fb75eb5fd159), [`5f1b383`](https://github.com/bcgov/connect-nuxt/commit/5f1b3839ed993654a7f20fe161047ba38ab86274)]:
+  - @sbc-connect/nuxt-base@0.3.0
+
 ## 0.1.32
 
 ### Patch Changes

package/app/app.config.ts

@@ -1,8 +1,12 @@
+import { ConnectIdpHint } from '#auth/app/enums/connect-idp-hint'
+
 export default defineAppConfig({
   connect: {
     login: {
-      redirect: '',
-      idps: ['bcsc', 'bceid', 'idir']
+      redirect: '/',
+      idps: [ConnectIdpHint.BCSC, ConnectIdpHint.BCEID, ConnectIdpHint.IDIR],
+      skipAccountRedirect: false
+      // idpEnforcement: 'strict' - future potentially
     },
     logout: {
       redirect: ''

package/app/components/Connect/Account/Existing/Alert.vue

@@ -0,0 +1,10 @@
+<template>
+  <UAlert
+    color="warning"
+    variant="subtle"
+  >
+    <template #description>
+      <ConnectI18nHelper translation-path="connect.text.alertExistingAccountFound" />
+    </template>
+  </UAlert>
+</template>

package/app/components/Connect/Account/Existing/List/Item.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+defineProps<{
+  account: ConnectAccount
+}>()
+
+defineEmits<{
+  select: [id: number]
+}>()
+</script>
+
+<template>
+  <li class="flex flex-col items-start justify-between gap-4 py-8 first:pt-0 last:pb-0 sm:flex-row sm:items-center">
+    <div
+      class="flex flex-row items-center gap-4 sm:gap-6"
+      :class="{
+        'opacity-50': account.accountStatus !== AccountStatus.ACTIVE,
+      }"
+    >
+      <UAvatar
+        :alt="account.label[0]"
+        :ui="{
+          root: 'bg-blue-300 rounded-sm',
+          fallback: 'text-white font-bold text-xl',
+        }"
+      />
+      <div class="flex w-full flex-col text-left">
+        <span class="text-lg font-bold text-neutral-highlighted">
+          {{ account.label }}
+        </span>
+      </div>
+    </div>
+    <div class="flex w-full flex-col gap-4 sm:w-fit sm:flex-row">
+      <div class="my-auto flex gap-2">
+        <UBadge
+          v-if="account.accountStatus !== AccountStatus.ACTIVE"
+          :label="$t('badge.inactiveAccount')"
+          class="bg-[#fff7e3] px-3 text-center font-bold text-neutral"
+        />
+      </div>
+
+      <UButton
+        :label="$t('connect.label.useThisAccount')"
+        :aria-label="$t('connect.label.useThisAccountAria', { name: account.label })"
+        :icon="'i-mdi-chevron-right'"
+        trailing
+        :disabled="account.accountStatus !== AccountStatus.ACTIVE"
+        size="xl"
+        data-testid="choose-existing-account-button"
+        class="w-full justify-center sm:w-min sm:justify-normal"
+        @click="$emit('select', account.id)"
+      />
+    </div>
+  </li>
+</template>

package/app/components/Connect/Account/Existing/List/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  accounts: ConnectAccount[]
+}>()
+
+defineEmits<{
+  select: [id: number]
+}>()
+</script>
+
+<template>
+  <section class="space-y-4">
+    <ConnectI18nHelper
+      as="h2"
+      class="font-normal"
+      translation-path="connect.label.yourExistingAccounts"
+      :count="accounts.length"
+    />
+    <ul
+      class="bg-white flex flex-col divide-y divide-line-muted rounded p-8 max-h-[50dvh] overflow-y-auto"
+    >
+      <ConnectAccountExistingListItem
+        v-for="account in accounts"
+        :key="account.id"
+        :account
+        @select="$emit('select', $event)"
+      />
+    </ul>
+  </section>
+</template>

package/app/components/Connect/TermsOfUse/Content.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  content?: string
+}>()
+</script>
+
+<template>
+  <div
+    v-sanitize="content"
+    class="tos-content max-w-full wrap-break-word space-y-6 *:space-y-4"
+  />
+</template>
+
+<style scoped>
+@reference "#connect-theme";
+
+.tos-content :deep(header) {
+  @apply font-bold text-neutral-highlighted;
+}
+
+.tos-content :deep(ul) {
+  @apply space-y-1;
+}
+
+.tos-content :deep(ul li span:first-child) {
+  @apply mr-1;
+}
+</style>

package/app/components/Connect/TermsOfUse/Form.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormErrorEvent, Form } from '@nuxt/ui'
+
+const { t } = useI18n()
+const { openDeclineTosModal } = useConnectTosModals()
+
+const props = defineProps<{
+  hasReachedBottom: boolean
+  disableButtons: boolean
+  loading: boolean
+}>()
+
+const state = reactive({
+  agreeToTerms: false
+})
+
+const formRef = useTemplateRef<Form<unknown>>('form-ref')
+
+const schema = z.object({
+  agreeToTerms: z.boolean()
+}).superRefine((val, ctx) => {
+  if (!val.agreeToTerms) {
+    ctx.addIssue({
+      code: 'custom',
+      message: t('connect.validation.acceptTermsOfUse'),
+      path: ['agreeToTerms']
+    })
+  } else if (!props.hasReachedBottom) {
+    ctx.addIssue({
+      code: 'custom',
+      message: t('connect.validation.termsOfUseScrollToBottom'),
+      path: ['agreeToTerms']
+    })
+  }
+})
+
+function onFormSubmitError(event: FormErrorEvent) {
+  if (event?.errors?.[0]?.id) {
+    const element = document.getElementById(event.errors[0].id)
+    if (element) {
+      setTimeout(() => {
+        element.focus({ preventScroll: true })
+      }, 0)
+    }
+  }
+}
+
+// reset form errors if user reaches bottom of page
+watch(() => props.hasReachedBottom, (newVal) => {
+  if (newVal) {
+    formRef.value?.clear()
+  }
+})
+</script>
+
+<template>
+  <UForm
+    ref="form-ref"
+    class="sticky bottom-0 flex w-full flex-col items-start justify-between
+        gap-4 border-t border-line bg-shade py-4 sm:flex-row sm:items-center sm:gap-0 sm:pb-8"
+    :state
+    :schema
+    @error="onFormSubmitError"
+  >
+    <UFormField
+      v-slot="{ error }"
+      name="agreeToTerms"
+      :ui="{
+        error: 'text-base',
+      }"
+    >
+      <UCheckbox
+        ref="checkboxRef"
+        v-model="state.agreeToTerms"
+        :label="$t('connect.text.iHaveReadAndAcceptTermsOfUse')"
+        :ui="{
+          label: error ? 'text-lg text-error' : 'text-lg',
+        }"
+      />
+    </UFormField>
+    <div class="flex w-full gap-4 sm:w-fit">
+      <UButton
+        class="flex-1 sm:flex-none"
+        :ui="{ base: 'flex justify-center items-center' }"
+        :label="$t('connect.label.accept')"
+        :disabled="disableButtons"
+        :loading
+        type="submit"
+      />
+      <UButton
+        class="flex-1 sm:flex-none"
+        :ui="{ base: 'flex justify-center items-center' }"
+        :label="$t('connect.label.decline')"
+        variant="outline"
+        :disabled="disableButtons"
+        @click="openDeclineTosModal"
+      />
+    </div>
+  </UForm>
+</template>

package/app/composables/useAuthApi.ts

@@ -0,0 +1,60 @@
+export const useAuthApi = () => {
+  const { $authApi } = useNuxtApp()
+  const queryCache = useQueryCache()
+
+  async function getAuthUserProfile() {
+    const query = defineQuery({
+      key: ['auth-user-profile'],
+      query: () => $authApi<ConnectAuthProfile>('/users/@me', {
+        parseResponse: JSON.parse
+      }),
+      staleTime: 300000
+    })
+    return query()
+  }
+
+  async function getTermsOfUse() {
+    const query = defineQuery({
+      key: ['auth-terms-of-use'],
+      query: () => $authApi<ConnectTermsOfUse>('/documents/termsofuse'),
+      staleTime: 300000
+    })
+    return query()
+  }
+
+  const usePatchTermsOfUse = defineMutation(() => {
+    const { mutateAsync, ...mutation } = useMutation({
+      mutation: (vars: { accepted: boolean, version: string, successCb?: () => Promise<unknown> }) => {
+        return $authApi<ConnectAuthProfile>('/users/@me', {
+          method: 'PATCH',
+          body: {
+            istermsaccepted: vars.accepted,
+            termsversion: vars.version
+          }
+        })
+      },
+      onError: (error) => {
+        // TODO: FUTURE - add api error message to modal content - remove console.error
+        console.error('ERROR: ', error)
+        useConnectTosModals().openPatchTosErrorModal()
+      },
+      onSuccess: async (_, _vars) => {
+        await queryCache.invalidateQueries({ key: ['auth-user-profile'], exact: true })
+        if (_vars.successCb) {
+          await _vars.successCb()
+        }
+      }
+    })
+
+    return {
+      ...mutation,
+      patchTermsOfUse: mutateAsync
+    }
+  })
+
+  return {
+    getAuthUserProfile,
+    getTermsOfUse,
+    usePatchTermsOfUse
+  }
+}

package/app/composables/useConnectAccountFlowRedirect.ts

@@ -0,0 +1,39 @@
+import type { RouteLocationNormalizedGeneric } from '#vue-router'
+
+export const useConnectAccountFlowRedirect = () => {
+  function finalRedirect(route: RouteLocationNormalizedGeneric) {
+    const localePath = useLocalePath()
+    const ac = useAppConfig().connect.login
+    const externalRedirectUrl = route.query.return as string | undefined
+    const internalRedirectUrl = ac.redirect
+
+    const query = { ...route.query }
+
+    if (query.return) {
+      delete query.return
+    }
+
+    if (query.allowedIdps) {
+      delete query.allowedIdps
+    }
+
+    if (externalRedirectUrl) {
+      return navigateTo(
+        {
+          path: appendUrlParam(externalRedirectUrl, 'accountid', useConnectAccountStore().currentAccount.id),
+          query
+        },
+        { external: true }
+      )
+    } else {
+      return navigateTo({
+        path: localePath(internalRedirectUrl),
+        query
+      })
+    }
+  }
+
+  return {
+    finalRedirect
+  }
+}

package/app/composables/useConnectTosModals.ts

@@ -0,0 +1,46 @@
+export const useConnectTosModals = () => {
+  const { baseModal } = useConnectModal()
+  const { logout } = useConnectAuth()
+  const t = useNuxtApp().$i18n.t
+
+  function openDeclineTosModal() {
+    baseModal.open({
+      title: `${t('connect.label.declineTermsOfUse')}?`,
+      description: t('connect.text.declineTOSCantAccessService'),
+      dismissible: true,
+      buttons: [
+        {
+          label: t('connect.label.declineTermsOfUse'),
+          onClick: async () => await logout()
+        },
+        {
+          label: t('connect.label.cancel'),
+          shouldClose: true,
+          variant: 'outline'
+        }
+      ]
+    })
+  }
+
+  // TODO: better error text
+  function openPatchTosErrorModal() {
+    baseModal.open({
+      title: "Can't update TOS at this time",
+      description: 'Please try again later',
+      dismissible: true,
+      buttons: [
+        {
+          label: t('connect.label.close'),
+          shouldClose: true
+        }
+      ]
+      // contact info ???
+      // include api error message?
+    })
+  }
+
+  return {
+    openDeclineTosModal,
+    openPatchTosErrorModal
+  }
+}

package/app/interfaces/connect-auth-contact.ts

@@ -0,0 +1,15 @@
+export interface ConnectAuthContact {
+  email: string
+  phone: string
+  phoneExtension: string
+  city?: string
+  country?: string
+  street?: string
+  streetAdditional?: string
+  postalCode?: string
+  region?: string
+}
+
+export interface ConnectAuthContacts {
+  contacts: ConnectAuthContact[]
+}

package/app/interfaces/connect-auth-profile.ts

@@ -0,0 +1,24 @@
+export interface ConnectAuthProfile {
+  contacts: ConnectAuthContact[]
+  created: ApiDateTimeUtc
+  id: number
+  idpUserid: string
+  keycloakGuid: string
+  lastname: string
+  firstname?: string
+  loginSource: ConnectLoginSource
+  loginTime: ApiDateTimeUtc
+  modified: ApiDateTimeUtc
+  modifiedBy: string
+  userStatus: number
+  type: string // PUBLIC_USER - // TODO: get enum?
+  userTerms: ConnectUserTerms
+  username: string
+  verified: boolean
+  version: number
+}
+
+export interface ConnectUserTerms {
+  isTermsOfUseAccepted: boolean
+  termsOfUseAcceptedVersion: string
+}

package/app/interfaces/connect-terms-of-use.ts

@@ -0,0 +1,6 @@
+export interface ConnectTermsOfUse {
+  content: string // html
+  contentType: 'text/html'
+  type: 'termsofuse'
+  versionId: string
+}

package/app/middleware/03.allowed-idps.global.ts

@@ -0,0 +1,20 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const ac = useAppConfig().connect.login
+  const validIdps = getValidIdps()
+  const allowedIdps = to.query.allowedIdps as string | undefined
+
+  if (allowedIdps) {
+    const idpArray = allowedIdps
+      .split(',')
+      .filter(idp =>
+        validIdps.includes(idp as ConnectValidIdpOption)
+      ) as ConnectValidIdps
+
+    if (idpArray.length) {
+      // updateAppConfig util doesn't seem to be updating correctly
+      // https://nuxt.com/docs/4.x/api/utils/update-app-config
+      // assign directly
+      ac.idps = idpArray
+    }
+  }
+})

package/app/middleware/connect-auth.ts

@@ -1,12 +1,27 @@
-export default defineNuxtRouteMiddleware((to) => {
+export default defineNuxtRouteMiddleware(async (to) => {
   const { isAuthenticated } = useConnectAuth()
   const rtc = useRuntimeConfig().public
   const localePath = useLocalePath()
+  const authApi = useAuthApi()
+  const { finalRedirect } = useConnectAccountFlowRedirect()
 
   if (!isAuthenticated.value && !rtc.playwright) {
     return navigateTo(localePath(`/auth/login?return=${rtc.baseUrl}${to.fullPath.slice(1)}`))
   }
 
+  if (isAuthenticated.value) {
+    const { data, refresh } = await authApi.getAuthUserProfile()
+    await refresh()
+    const hasAccepted = data.value?.userTerms.isTermsOfUseAccepted
+    const isTosPage = to.meta.connectTosPage === true
+    if (!hasAccepted && !isTosPage) {
+      const query = { ...to.query }
+      return navigateTo({ path: localePath('/auth/terms-of-use'), query })
+    } else if (hasAccepted && isTosPage) {
+      return finalRedirect(to)
+    }
+  }
+
   if (rtc.playwright) {
     const { $connectAuth } = useNuxtApp()
     const { currentAccount } = storeToRefs(useConnectAccountStore())

package/app/middleware/connect-login-page.ts

@@ -0,0 +1,26 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const { isAuthenticated, authUser } = useConnectAuth()
+  const accountStore = useConnectAccountStore()
+  const localePath = useLocalePath()
+  const { finalRedirect } = useConnectAccountFlowRedirect()
+
+  const numAccounts = accountStore.userAccounts.length
+
+  if (isAuthenticated.value) {
+    if (numAccounts === 1) {
+      return finalRedirect(to)
+    }
+
+    if (numAccounts === 0 && authUser.value.loginSource === ConnectLoginSource.BCSC) {
+      return navigateTo({
+        path: localePath('/auth/account/create'),
+        query: to.query
+      })
+    }
+
+    return navigateTo({
+      path: localePath('/auth/account/select'),
+      query: to.query
+    })
+  }
+})

package/app/pages/auth/account/select.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'connect-auth',
+  alias: ['/auth/account/create'],
+  middleware: 'connect-auth'
+})
+
+const rtc = useRuntimeConfig().public
+const accountStore = useConnectAccountStore()
+const { authUser } = useConnectAuth()
+const { finalRedirect } = useConnectAccountFlowRedirect()
+
+const addNew = ref(false)
+
+function selectAndRedirect(id: number) {
+  accountStore.switchCurrentAccount(id)
+  finalRedirect(useRoute())
+}
+
+onBeforeMount(() => {
+  if (accountStore.userAccounts.length === 0 && authUser.value.loginSource === ConnectLoginSource.BCSC) {
+    addNew.value = true
+  }
+})
+</script>
+
+<template>
+  <UContainer class="max-w-6xl">
+    <ConnectTransitionFade>
+      <div class="space-y-6 sm:space-y-10">
+        <h1>{{ !addNew ? $t('connect.label.existingAccountFound') : $t('connect.label.sbcAccountCreation') }}</h1>
+        <ConnectAccountExistingAlert v-if="!addNew" />
+      </div>
+    </ConnectTransitionFade>
+
+    <ConnectTransitionFade>
+      <ConnectAccountExistingList
+        v-if="addNew === false"
+        :accounts="accountStore.userAccounts"
+        @select="selectAndRedirect"
+      />
+
+      <div v-else class="h-[66dvh] bg-white rounded border-2 border-black flex items-center justify-center text-3xl">
+        Create Account Form Here
+      </div>
+    </ConnectTransitionFade>
+
+    <div class="flex justify-center">
+      <UButton
+        v-if="authUser.loginSource === ConnectLoginSource.BCSC"
+        variant="outline"
+        :label="$t('connect.label.createNewAccount')"
+        icon="i-mdi-chevron-right"
+        trailing
+        size="xl"
+        class="w-full justify-center sm:w-min sm:justify-normal"
+        @click="addNew = !addNew"
+      />
+      <UButton
+        v-else
+        variant="outline"
+        :label="$t('connect.label.createNewAccount')"
+        icon="i-mdi-chevron-right"
+        trailing
+        size="xl"
+        class="w-full justify-center sm:w-min sm:justify-normal"
+        external
+        :to="rtc.authWebUrl + 'setup-account'"
+      />
+    </div>
+  </UContainer>
+</template>

package/app/pages/auth/login.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import loginImage from '#auth/public/img/BCReg_Generic_Login_image.jpg'
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
 const { login } = useConnectAuth()
-const rtc = useRuntimeConfig().public
-const ac = useAppConfig().connect
-const route = useRoute()
+const ac = useAppConfig().connect.login
 
 useHead({
   title: t('connect.page.login.title')
@@ -14,48 +12,34 @@ useHead({
 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 || '/')
-    }
-  }
+  middleware: 'connect-login-page'
 })
 
 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',
+    ConnectValidIdpOption,
     { 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)
+      onClick: () => login(ConnectIdpHint.BCSC)
     },
     bceid: {
       label: t('connect.page.login.loginBCEID'),
       icon: 'i-mdi-two-factor-authentication',
-      onClick: () => login(ConnectIdpHint.BCEID, redirectUrl)
+      onClick: () => login(ConnectIdpHint.BCEID)
     },
     idir: {
       label: t('connect.page.login.loginIDIR'),
       icon: 'i-mdi-account-group-outline',
-      onClick: () => login(ConnectIdpHint.IDIR, redirectUrl)
+      onClick: () => login(ConnectIdpHint.IDIR)
     }
   }
 
-  return ac.login.idps.map(key => loginOptionsMap[key as keyof typeof loginOptionsMap])
+  return ac.idps.map(key => loginOptionsMap[key as keyof typeof loginOptionsMap])
 })
 </script>
 

package/app/pages/auth/terms-of-use.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ConnectTermsOfUseContent, ConnectTermsOfUseForm } from '#components'
+
+const { t } = useI18n()
+const authApi = useAuthApi()
+const { finalRedirect } = useConnectAccountFlowRedirect()
+
+definePageMeta({
+  layout: 'connect-auth',
+  hideBreadcrumbs: true,
+  middleware: 'connect-auth',
+  connectTosPage: true
+})
+
+useHead({
+  title: t('connect.page.termsOfUse.title')
+})
+
+const { data, status } = await authApi.getTermsOfUse()
+const { patchTermsOfUse, isLoading } = authApi.usePatchTermsOfUse()
+
+const formRef = useTemplateRef<InstanceType<typeof ConnectTermsOfUseForm>>('form-ref')
+const contentRef = useTemplateRef<InstanceType<typeof ConnectTermsOfUseContent>>('content-ref')
+
+// track if user has scrolled to bottom of page
+const { bottom: tosBottom } = useElementBounding(contentRef)
+const { top: formTop } = useElementBounding(formRef)
+const hasReachedBottom = computed(() => formTop.value >= tosBottom.value)
+
+const disableButtons = computed<boolean>(() => {
+  return isLoading.value || status.value === 'pending' || status.value === 'error' || !data.value?.content
+})
+
+// TODO: - FUTURE - add help/contact info to alert?
+</script>
+
+<template>
+  <UContainer
+    class="max-w-6xl relative grow flex flex-col"
+  >
+    <h1 class="sticky top-0 w-full border-b border-line bg-shade pb-2 pt-4 text-center z-10 inset-x-0">
+      {{ $t('connect.page.termsOfUse.h1') }}
+    </h1>
+
+    <div class="relative grow flex flex-col justify-center">
+      <ConnectSpinner v-if="status === 'pending'" />
+
+      <UAlert
+        v-else-if="status === 'error'"
+        icon="i-mdi-alert"
+        :title="$t('connect.text.alertUnableToLoadTermsOfUse')"
+        color="error"
+        variant="subtle"
+        :close-button="null"
+        :ui="{ title: 'text-base' }"
+      />
+
+      <ConnectTermsOfUseContent
+        v-else
+        ref="content-ref"
+        :content="data?.content"
+      />
+    </div>
+
+    <ConnectTermsOfUseForm
+      ref="form-ref"
+      :disable-buttons="disableButtons"
+      :has-reached-bottom="hasReachedBottom"
+      :loading="isLoading"
+      @submit="patchTermsOfUse({
+        accepted: true,
+        version: data!.versionId,
+        successCb: async () => await finalRedirect(useRoute()),
+      })"
+    />
+  </UContainer>
+</template>

package/app/stores/connect-account.ts

@@ -1,5 +1,6 @@
 export const useConnectAccountStore = defineStore('connect-auth-account-store', () => {
   const { $authApi } = useNuxtApp()
+  const authApi = useAuthApi()
   const rtc = useRuntimeConfig().public
   const { authUser } = useConnectAuth()
   // selected user account
@@ -39,13 +40,6 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     return accountId === currentAccount.value.id
   }
 
-  /** Get user information from AUTH */
-  async function getAuthUserProfile(identifier: string): Promise<{ firstname: string, lastname: string } | undefined> {
-    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> {
     await $authApi('/users', {
@@ -56,10 +50,11 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
 
   /** Set user name information */
   async function setUserName() {
-    const authUserInfo = await getAuthUserProfile('@me')
-    if (authUserInfo?.firstname && authUserInfo?.lastname) {
-      userFirstName.value = authUserInfo.firstname
-      userLastName.value = authUserInfo.lastname
+    const { data, refresh } = await authApi.getAuthUserProfile()
+    await refresh()
+    if (data.value?.firstname && data.value?.lastname) {
+      userFirstName.value = data.value.firstname
+      userLastName.value = data.value.lastname
       return
     }
     userFirstName.value = user.value?.firstName || '-'
@@ -175,7 +170,6 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     setUserName,
     hasRoles,
     isCurrentAccount,
-    getAuthUserProfile,
     setAccountInfo,
     getUserAccounts,
     switchCurrentAccount,

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

@@ -3,7 +3,9 @@ declare module '@nuxt/schema' {
     connect?: {
       login?: {
         redirect?: string
-        idps?: Array<'bcsc' | 'bceid' | 'idir'>
+        idps?: ConnectValidIdps
+        skipAccountRedirect?: boolean
+        // idpEnforcement: 'strict' | 'none' - future potentially
       }
       logout?: {
         redirect?: string

package/app/types/connect-valid-idps.ts

@@ -0,0 +1,5 @@
+export type ConnectValidIdpOption = ConnectIdpHint.BCSC
+  | ConnectIdpHint.BCEID
+  | ConnectIdpHint.IDIR
+
+export type ConnectValidIdps = ConnectValidIdpOption[]

package/app/utils/constants/index.ts

@@ -0,0 +1 @@
+export * from './valid-idps'

package/app/utils/constants/valid-idps.ts

@@ -0,0 +1,7 @@
+export function getValidIdps(): ConnectValidIdps {
+  return [
+    ConnectIdpHint.BCSC,
+    ConnectIdpHint.BCEID,
+    ConnectIdpHint.IDIR
+  ]
+}

package/app/utils/index.ts

@@ -0,0 +1 @@
+export * from './constants'

package/i18n/locales/en-CA.ts

@@ -3,23 +3,32 @@ export default {
   /* Ordering should be alphabetical unless otherwise specified */
   connect: {
     label: {
+      accept: 'Accept',
       accountInfo: 'Account Info',
       accountOptionsMenu: 'Account Options Menu',
       accountSettings: 'Account Settings',
       bceid: 'BCeID',
       bcsc: 'BC Services Card',
       createAccount: 'Create Account',
+      createNewAccount: 'Create New Account',
+      decline: 'Decline',
+      declineTermsOfUse: 'Decline Terms of Use',
       editProfile: 'Edit Profile',
+      existingAccountFound: 'Existing Account Found',
       idir: 'IDIR',
       logout: 'Log out',
       login: 'Log in',
       mainMenu: 'Main Menu',
       notifications: 'Notifications',
       notificationsAria: 'Notifications, {count} unread',
+      sbcAccountCreation: 'Service BC Account Creation',
       selectLoginMethod: 'Select log in method',
       switchAccount: 'Switch Account',
       teamMembers: 'Team Members',
-      transactions: 'Transactions'
+      transactions: 'Transactions',
+      useThisAccount: 'Use this Account',
+      useThisAccountAria: 'Use this Account, {name}',
+      yourExistingAccounts: '{boldStart}Your Existing Accounts{boldEnd} ({count})'
     },
     page: {
       login: {
@@ -32,6 +41,10 @@ export default {
           title: 'Session Expired',
           description: 'Your session has expired. Please log in again to continue.'
         }
+      },
+      termsOfUse: {
+        h1: 'Terms of Use',
+        title: 'Terms of Use - Service BC Connect'
       }
     },
     sessionExpiry: {
@@ -44,11 +57,19 @@ export default {
       }
     },
     text: {
+      alertExistingAccountFound: '{boldStart}Note:{boldEnd} It looks like you already have an account with Service BC Connect. You can use an existing account to proceed or create a new one.',
+      alertUnableToLoadTermsOfUse: 'Unable to load Terms of Use, please try again later.',
+      declineTOSCantAccessService: 'By declining the Terms of Use, you won’t be able to access this service. Do you wish to proceed?',
+      iHaveReadAndAcceptTermsOfUse: 'I have read and accept the Terms of Use',
       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.'
       }
+    },
+    validation: {
+      acceptTermsOfUse: 'Please accept the Terms of Use.',
+      termsOfUseScrollToBottom: 'Please scroll to the bottom of the page to accept the Terms of Use.'
     }
   }
 }

package/nuxt.config.ts

@@ -18,7 +18,8 @@ export default defineNuxtConfig({
 
   modules: [
     '@pinia/nuxt',
-    'pinia-plugin-persistedstate/nuxt'
+    'pinia-plugin-persistedstate/nuxt',
+    '@pinia/colada-nuxt'
   ],
 
   alias: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-auth",
   "type": "module",
-  "version": "0.1.32",
+  "version": "0.2.1",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -17,11 +17,13 @@
     "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
+    "@pinia/colada": "^0.17.9",
+    "@pinia/colada-nuxt": "^0.2.4",
     "@pinia/nuxt": "^0.11.2",
     "keycloak-js": "^26.2.1",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.5.0",
-    "@sbc-connect/nuxt-base": "0.2.0"
+    "@sbc-connect/nuxt-base": "0.4.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",