@sbc-connect/nuxt-auth 0.1.5 → 0.1.7

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

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

package/app/enums/connect-idp-hint.ts

@@ -0,0 +1,6 @@
+export enum ConnectIdpHint {
+  BCROS = 'bcros',
+  IDIR = 'idir',
+  BCSC = 'bcsc',
+  BCEID = 'bceid'
+}

package/app/enums/connect-login-source.ts

@@ -0,0 +1,6 @@
+export enum ConnectLoginSource {
+  BCROS = 'BCROS',
+  IDIR = 'IDIR',
+  BCSC = 'BCSC',
+  BCEID = 'BCEID'
+}

package/app/enums/user-settings-type.ts

@@ -0,0 +1,5 @@
+export enum UserSettingsType {
+  ACCOUNT = 'ACCOUNT',
+  CREATE_ACCOUNT = 'CREATE_ACCOUNT',
+  USER_PROFILE = 'USER_PROFILE'
+}

package/app/interfaces/connect-account.ts

@@ -0,0 +1,10 @@
+export interface ConnectAccount {
+  id: number
+  accountType: AccountType
+  accountStatus: AccountStatus
+  additionalLabel?: string
+  label: string
+  type: UserSettingsType.ACCOUNT
+  urlpath: string
+  urlorigin: string
+}

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

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

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

@@ -0,0 +1,10 @@
+export interface ConnectAuthUser {
+  firstName: string
+  lastName: string
+  fullName: string
+  userName: string
+  email: string
+  keycloakGuid: string // sub
+  loginSource: ConnectLoginSource
+  roles: string[]
+}

package/app/interfaces/connect-user-settings.ts

@@ -0,0 +1,10 @@
+export interface ConnectUserSettings {
+  id: number
+  type: UserSettingsType
+  urlpath: string
+  urlorigin: string
+  accountType?: AccountType
+  accountStatus?: AccountStatus
+  additionalLabel?: string
+  label?: string
+}

package/app/layouts/ConnectAuth.vue

@@ -0,0 +1,8 @@
+<template>
+  <ConnectLayout>
+    <template #header>
+      <ConnectHeaderAuth />
+    </template>
+    <slot />
+  </ConnectLayout>
+</template>

package/app/middleware/01.setup-accounts.global.ts

@@ -0,0 +1,13 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  if (import.meta.client) { // only run on client
+    const { isAuthenticated } = useConnectAuth()
+    if (isAuthenticated.value) {
+      const accountStore = useConnectAccountStore()
+      await accountStore.initAccountStore()
+
+      if (to.query.accountid) {
+        accountStore.switchCurrentAccount(parseInt(to.query.accountid as string))
+      }
+    }
+  }
+})

package/app/middleware/02.keycloak-params.global.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware((to) => {
+  if (import.meta.server) {
+    return
+  }
+  // remove query params in url added by keycloak
+  if (to.query) {
+    const params = new URLSearchParams(to.fullPath.split('?')[1])
+    params.delete('state')
+    params.delete('session_state')
+    params.delete('code')
+    params.delete('error')
+    params.delete('iss')
+    to.fullPath = to.path + (params.size > 0 ? `?${params}` : '') + to.hash
+  }
+})

package/app/plugins/auth-api.ts

@@ -0,0 +1,28 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const rtc = nuxtApp.$config.public
+  const authApiUrl = rtc.authApiUrl + rtc.authApiVersion
+  const appName = rtc.appName
+  const xApiKey = rtc.xApiKey
+
+  const api = $fetch.create({
+    baseURL: authApiUrl,
+    async onRequest({ options }) {
+      const auth = useConnectAuth()
+      const accountStore = useConnectAccountStore()
+
+      const token = await auth.getToken()
+      const accountId = accountStore.currentAccount.id
+
+      options.headers.set('Authorization', `Bearer ${token}`)
+      options.headers.set('App-Name', appName)
+      options.headers.set('X-Apikey', xApiKey)
+      options.headers.set('Account-Id', String(accountId))
+    }
+  })
+
+  return {
+    provide: {
+      authApi: api
+    }
+  }
+})

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

@@ -0,0 +1,105 @@
+import Keycloak from 'keycloak-js'
+
+export default defineNuxtPlugin(async () => {
+  const rtc = useRuntimeConfig().public
+
+  // define new keycloak
+  const keycloak = new Keycloak({
+    url: rtc.idpUrl,
+    realm: rtc.idpRealm,
+    clientId: rtc.idpClientid
+  })
+
+  try {
+    // default behaviour when keycloak session expires
+    // try to update token - log out if token update fails
+    // callbacks must be registered before 'init'
+    // https://www.keycloak.org/securing-apps/javascript-adapter#_callback_events
+    keycloak.onTokenExpired = async () => {
+      try {
+        console.info('[Auth] Token expired, refreshing token...')
+        await keycloak.updateToken(minValidity)
+        console.info('[Auth] Token refreshed.')
+      } catch (error) {
+        console.error('[Auth] Failed to refresh token on expiration; logging out.', error)
+        keycloak.logout()
+      }
+    }
+
+    // init keycloak instance
+    await keycloak.init({
+      onLoad: 'check-sso',
+      responseMode: 'query',
+      pkceMethod: 'S256'
+    })
+  } catch (error) {
+    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)
+
+  // 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')
+  }
+
+  // refresh token if expiring within <minValidity> - checks every <refreshIntervalTimeout>
+  function scheduleRefreshToken() {
+    console.info('[Auth] Verifying token validity.')
+
+    setTimeout(async () => {
+      if (keycloak.isTokenExpired(minValidity)) {
+        console.info('[Auth] Token set to expire soon. Refreshing token...')
+        try {
+          await keycloak.updateToken(minValidity)
+          console.info('[Auth] Token refreshed.')
+        } catch (error) {
+          console.error('[Auth] Failed to refresh token; logging out.', error)
+          keycloak.logout() // log user out if token update fails
+        }
+      }
+
+      scheduleRefreshToken()
+    }, refreshIntervalTimeout)
+  }
+
+  // Watch for changes in authentication and idle state
+  // When the user is authenticated and not idle, start the refresh schedule
+  // Execute session expiry handling if user authenticated and inactive
+  watch(
+    [() => keycloak.authenticated, () => idle.value],
+    async ([isAuth, isIdle]) => {
+      if (isAuth) {
+        // TODO: add storage keys
+        // sessionStorage.removeItem(ConnectStorageKeys.CONNECT_SESSION_EXPIRED)
+        if (!isIdle) {
+          console.info('[Auth] Starting token refresh schedule.')
+          scheduleRefreshToken()
+        } else {
+          console.warn('[Auth] User session expired due to inactivity. Starting session expiry process.')
+          await sessionExpired()
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    provide: {
+      // provide global auth instance
+      connectAuth: keycloak
+    }
+  }
+})

package/app/stores/connect-account.ts

@@ -0,0 +1,236 @@
+export const useConnectAccountStore = defineStore('connect-auth-account-store', () => {
+  const { $authApi } = useNuxtApp()
+  const rtc = useRuntimeConfig().public
+  const { authUser } = useConnectAuth()
+  // selected user account
+  const currentAccount = ref<ConnectAccount>({} as ConnectAccount)
+  const userAccounts = ref<ConnectAccount[]>([])
+  const currentAccountName = computed<string>(() => currentAccount.value?.label || '')
+  const pendingApprovalCount = ref<number>(0)
+  const user = computed(() => authUser.value)
+  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.
+   *
+   * @param roles - An array of roles to check against the current account or Keycloak user roles.
+   * @returns Returns `true` if the current account has one of the roles, or if the Keycloak user has one of the roles.
+   *
+   * @example
+   * // Assuming the current account has the type 'admin' and the authUser has the roles ['editor', 'viewer', 'admin']:
+   * const rolesToCheck = ['admin', 'superadmin'];
+   * const hasRequiredRole = hasRoles(rolesToCheck); // true
+  */
+  function hasRoles(roles: string[]): boolean {
+    const currentAccountHasRoles = roles.includes(currentAccount.value.accountType)
+    const authUserHasRoles = roles.some(role => authUser.value.roles.includes(role))
+    return currentAccountHasRoles || authUserHasRoles
+  }
+
+  /**
+   * Checks if the given account ID matches the ID of the current account in the store.
+   *
+   * @param accountId - The account ID to check.
+   * @returns True if the given account ID matches the current account ID, false otherwise.
+  */
+  function isCurrentAccount(accountId: number): boolean {
+    return accountId === currentAccount.value.id
+  }
+
+  /** 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.')
+    }
+  }
+
+  /** 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')
+    }
+  }
+
+  /** 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
+      return
+    }
+    userFirstName.value = user.value?.firstName || '-'
+    userLastName.value = user.value?.lastName || ''
+  }
+
+  /** Get the user's account list */
+  async function getUserAccounts(): Promise<ConnectAccount[] | undefined> {
+    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
+    }
+  }
+
+  /** Set the user account list and current account */
+  async function setAccountInfo(): Promise<void> {
+    const accounts = await getUserAccounts()
+    if (accounts && accounts[0]) {
+      userAccounts.value = accounts
+      if (!currentAccount.value.id || !userAccounts.value.some(account => account.id === currentAccount.value.id)) {
+        currentAccount.value = accounts[0]
+      }
+    }
+  }
+
+  /** Switch the current account to the given account ID if it exists in the user's account list */
+  function switchCurrentAccount(accountId: number) {
+    const account = userAccounts.value.find(account => account.id === accountId)
+    if (account) {
+      currentAccount.value = account
+    }
+  }
+
+  async function getPendingApprovalCount(): Promise<void> {
+    const accountId = currentAccount.value?.id
+    const keycloakGuid = authUser.value?.keycloakGuid
+    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')
+    }
+  }
+
+  async function checkAccountStatus() {
+    // redirect if account status is suspended or in review
+    if ([AccountStatus.NSF_SUSPENDED, AccountStatus.SUSPENDED].includes(currentAccount.value?.accountStatus)) {
+      // Avoid redirecting when navigating back from PAYBC for NSF or signout.
+      const endPath = useRoute().path.split('/').pop() as string
+      const isAllowedPath = ['return-cc-payment', 'signout'].includes(endPath)
+      if (!isAllowedPath) {
+        // URL not allowed so redirect
+        const redirectUrl = `${rtc.authWebURL}/account-freeze`
+        // TODO: should probably change this to check 'appName' when auth starts using the core layer
+        const external = rtc.authWebURL !== rtc.baseUrl
+        await navigateTo(redirectUrl, { external })
+      }
+    } else if (currentAccount.value?.accountStatus === AccountStatus.PENDING_STAFF_REVIEW) {
+      // check the path is allowed for pending approval account
+      const endPath = useRoute().path.split('/').pop() as string
+      const isAllowedPath = ['setup-non-bcsc-account', 'signout'].includes(endPath)
+      if (!isAllowedPath) {
+        // URL not allowed so redirect
+        // TODO: auth web pending approval page is not displaying the encoded name correctly.
+        // It would be better if we could pass the account id here and then the pending page could infer the name.
+        // const accountNameEncoded = encodeURIComponent(btoa(currentAccount.value?.id))
+        // Temporary: remove spaces and it shows something legible at least
+        const accountNameEncoded = currentAccount.value?.label?.replaceAll(' ', '')
+        const redirectUrl = `${rtc.authWebURL}/pendingapproval/${accountNameEncoded}/true`
+        // TODO: should probably change this to check 'appName' when auth starts using the core layer
+        const external = rtc.authWebURL !== rtc.baseUrl
+        await navigateTo(redirectUrl, { external })
+      }
+    }
+  }
+
+  async function initAccountStore(): Promise<void> {
+    await Promise.all([
+      setAccountInfo(),
+      updateAuthUserInfo(),
+      setUserName()
+    ])
+
+    if (currentAccount.value.id) {
+      await Promise.all([
+        checkAccountStatus(),
+        getPendingApprovalCount()
+      ])
+    }
+  }
+
+  function $reset() {
+    sessionStorage.removeItem('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 || ''
+  }
+
+  return {
+    currentAccount,
+    currentAccountName,
+    userAccounts,
+    pendingApprovalCount,
+    errors,
+    userFullName,
+    checkAccountStatus,
+    setUserName,
+    hasRoles,
+    isCurrentAccount,
+    getAuthUserProfile,
+    setAccountInfo,
+    getUserAccounts,
+    switchCurrentAccount,
+    getPendingApprovalCount,
+    initAccountStore,
+    $reset
+  }
+},
+{ persist: true } // persist in session storage
+)

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

@@ -0,0 +1,18 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    connect?: {
+      login?: {
+        redirectPath?: string
+        idps?: Array<'bcsc' | 'bceid' | 'idir'>
+      }
+      header?: {
+        loginMenu?: boolean
+        createAccount?: boolean
+        notifications?: boolean
+        accountOptionsMenu?: boolean
+      }
+    }
+  }
+}
+
+export {}

package/i18n/locales/en-CA.ts

@@ -0,0 +1,31 @@
+/* eslint-disable max-len */
+export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    label: {
+      accountInfo: 'Account Info',
+      accountOptionsMenu: 'Account Options Menu',
+      accountSettings: 'Account Settings',
+      bceid: 'BCeID',
+      bcsc: 'BC Services Card',
+      createAccount: 'Create Account',
+      editProfile: 'Edit Profile',
+      idir: 'IDIR',
+      logout: 'Log out',
+      login: 'Log in',
+      mainMenu: 'Main Menu',
+      notifications: 'Notifications',
+      notificationsAria: 'Notifications, {count} unread',
+      selectLoginMethod: 'Select log in method',
+      switchAccount: 'Switch Account',
+      teamMembers: 'Team Members',
+      transactions: 'Transactions'
+    },
+    text: {
+      notifications: {
+        none: 'No Notifications',
+        teamMemberApproval: '{count} team member requires approval to access this account. | {count} team members require approval to access this account.'
+      }
+    }
+  }
+}

package/i18n/locales/fr-CA.ts

@@ -0,0 +1 @@
+export default {}

package/modules/auth-assets/index.ts

@@ -0,0 +1,15 @@
+import { defineNuxtModule, createResolver } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'auth-assets',
+    configKey: 'authAssets'
+  },
+  defaults: {},
+  async setup(_options, _nuxt) {
+    console.info('Setting up **auth** assets module')
+    const resolver = createResolver(import.meta.url)
+
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-auth-tw.css'))
+  }
+})

package/modules/auth-assets/runtime/assets/connect-auth-tw.css

@@ -0,0 +1,2 @@
+@import "#connect-theme";
+@source "../../../../app";

package/nuxt.config.ts

@@ -12,19 +12,66 @@ export default defineNuxtConfig({
 
   extends: ['@sbc-connect/nuxt-base'],
 
+  imports: {
+    dirs: ['interfaces', 'types', 'enums', 'stores']
+  },
+
+  modules: [
+    '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt'
+  ],
+
   alias: {
     '#auth': resolve('./')
   },
 
-  css: [
-    resolve('./app/assets/css/tw-auth.css')
-  ],
+  icon: {
+    clientBundle: {
+      icons: [
+        'mdi:bell-outline',
+        'mdi:account-outline',
+        'mdi:logout-variant',
+        'mdi:account-group-outline',
+        'mdi:account-card-details-outline',
+        'mdi:two-factor-authentication',
+        'mdi:new-box'
+      ]
+    }
+  },
+
+  piniaPluginPersistedstate: {
+    storage: 'sessionStorage'
+  },
+
+  i18n: {
+    locales: [
+      {
+        name: 'English',
+        code: 'en-CA',
+        language: 'en-CA',
+        dir: 'ltr',
+        file: 'en-CA.ts'
+      },
+      {
+        name: 'Français',
+        code: 'fr-CA',
+        language: 'fr-CA',
+        dir: 'ltr',
+        file: 'fr-CA.ts'
+      }
+    ]
+  },
 
   runtimeConfig: {
     public: {
-      // Should in alphabetical order
-      appName: process.env.npm_package_name || '',
-      version: `Connect Auth Layer v${process.env.npm_package_version || ''}`
+      idpUrl: '',
+      idpRealm: '',
+      idpClientid: '',
+      siteminderLogoutUrl: '',
+      authApiUrl: '',
+      authApiVersion: '',
+      xApiKey: '',
+      authWebUrl: ''
     }
   }
 })

package/package.json

@@ -1,30 +1,34 @@
 {
   "name": "@sbc-connect/nuxt-auth",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
     "@vitest/coverage-v8": "^3.2.4",
-    "dotenv": "^17.2.0",
-    "nuxt": "^4.0.0",
+    "dotenv": "^17.2.1",
+    "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
-    "vue-tsc": "^3.0.3",
-    "@sbc-connect/eslint-config": "0.0.5",
-    "@sbc-connect/playwright-config": "0.0.4",
-    "@sbc-connect/vitest-config": "0.0.5"
+    "vue-tsc": "^3.0.4",
+    "@sbc-connect/eslint-config": "0.0.6",
+    "@sbc-connect/playwright-config": "0.0.5",
+    "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-base": "0.1.5"
+    "@pinia/nuxt": "^0.11.2",
+    "keycloak-js": "^26.2.0",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "@sbc-connect/nuxt-base": "0.1.7"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "nuxi dev .playground",
+    "dev": "nuxi dev .playground --dotenv ../.env",
     "build": "nuxt build .playground",
     "build:test": "pnpm generate && npx serve .playground/.output/public",
-    "generate": "nuxt generate .playground",
+    "generate": "nuxt generate .playground --dotenv ../.env",
     "preview": "nuxt preview .playground",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",