@sbc-connect/nuxt-auth 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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(ConnectAuthStorageKey.LOGIN_REDIRECT_URL)
-    const redirectUri = redirect ?? loginRedirectUrl ?? window.location.href
+    const redirectUri = redirect ?? window.location.href
 
     return $connectAuth.login(
       {
@@ -27,8 +26,7 @@ export const useConnectAuth = () => {
    */
   function logout(redirect?: string): Promise<void> {
     const siteminderUrl = rtc.siteminderLogoutUrl
-    const logoutRedirectUrl = sessionStorage.getItem(ConnectAuthStorageKey.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`
@@ -81,30 +79,10 @@ export const useConnectAuth = () => {
       })
   }
 
-  function setLoginRedirectUrl(url: string) {
-    sessionStorage.setItem(ConnectAuthStorageKey.LOGIN_REDIRECT_URL, url)
-  }
-
-  function setLogoutRedirectUrl(url: string) {
-    sessionStorage.setItem(ConnectAuthStorageKey.LOGOUT_REDIRECT_URL, url)
-  }
-
-  function clearLoginRedirectUrl() {
-    sessionStorage.removeItem(ConnectAuthStorageKey.LOGIN_REDIRECT_URL)
-  }
-
-  function clearLogoutRedirectUrl() {
-    sessionStorage.removeItem(ConnectAuthStorageKey.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
   })
@@ -134,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

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

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/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/i18n/locales/en-CA.ts

@@ -21,6 +21,19 @@ 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.',
@@ -31,6 +44,7 @@ export default {
       }
     },
     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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-auth",
   "type": "module",
-  "version": "0.1.8",
+  "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/eslint-config": "0.0.6",
     "@sbc-connect/playwright-config": "0.0.6",
+    "@sbc-connect/eslint-config": "0.0.6",
     "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
@@ -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"
   }