From 971d220483684d747eda56b6d6102820b0185819 Mon Sep 17 00:00:00 2001
From: bolyachevets <andriy.bolyachevets@gov.bc.ca>
Date: Sun, 21 Jan 2024 01:38:11 -0800
Subject: [PATCH 1/5] firebase auth

---
 .gitignore                           |  1 +
 app.vue                              |  7 +++
 components/StatusBox.vue             | 18 ++++++--
 components/app_header/Container.vue  | 69 ++++++++++++++++++++--------
 components/search/ResultsBox.vue     | 64 +++++++++++++++-----------
 components/search/ResultsControl.vue | 17 ++++---
 nuxt.config.ts                       |  5 +-
 package-lock.json                    | 41 +++++++++++------
 package.json                         |  3 +-
 pages/Search.vue                     | 17 ++++++-
 pages/index.vue                      | 39 ++++++++++++----
 plugins/firebase.client.ts           |  8 ++++
 plugins/keycloak.client.ts           | 28 -----------
 pnpm-lock.yaml                       | 10 ----
 store/user-cache.ts                  | 33 +++++++++++++
 util/firebase-auth.ts                | 38 +++++++++++++++
 util/namex-api.ts                    | 34 +++++++-------
 17 files changed, 291 insertions(+), 141 deletions(-)
 delete mode 100644 plugins/keycloak.client.ts
 create mode 100644 store/user-cache.ts
 create mode 100644 util/firebase-auth.ts

diff --git a/.gitignore b/.gitignore
index b66a020e..163580ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]
diff --git a/app.vue b/app.vue
index f8eacfa7..7ee30c27 100644
--- a/app.vue
+++ b/app.vue
@@ -3,3 +3,10 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
+<script setup lang="ts">
+import { useUserStore } from '~/store/user-cache'
+
+const userStore = useUserStore()
+await userStore.setUser()
+
+</script>
diff --git a/components/StatusBox.vue b/components/StatusBox.vue
index b78c57e9..6d08c8bb 100644
--- a/components/StatusBox.vue
+++ b/components/StatusBox.vue
@@ -6,12 +6,16 @@
     </div>
     <div class="my-6 ml-2">
       Not Examined:
-      <span id="notExamined" class="font-bold">{{
-        status.notExaminedNum
-      }}</span>
+      <span
+        id="notExamined"
+        class="font-bold"
+      >{{ notExaminedNum }}</span>
     </div>
     <div class="mb-2 ml-2 mt-6">
-      Hold: <span id="hold" class="font-bold">{{ status.holdNum }}</span>
+      Hold: <span
+        id="hold"
+        class="font-bold"
+      >{{ holdNum }}</span>
     </div>
   </div>
 </template>
@@ -20,6 +24,10 @@
 import { useStatusStore } from '~/store/status'
 
 const status = useStatusStore()
+status.update()
 
-onMounted(async () => await status.update())
+const notExaminedNum = computed(() => status.notExaminedNum)
+const holdNum = computed(() => status.holdNum)
+
+// onMounted(async () => await status.update())
 </script>
diff --git a/components/app_header/Container.vue b/components/app_header/Container.vue
index d3d00318..ae70dcd8 100644
--- a/components/app_header/Container.vue
+++ b/components/app_header/Container.vue
@@ -7,49 +7,79 @@
             src="/images/top-nav.png"
             class="min-w-8 h-full"
             alt="Name Examination"
-          />
+          >
         </nuxt-link>
       </div>
 
-      <div v-if="authenticated" class="ml-3 flex gap-10 text-bcgov-blue5">
-        <AppHeaderNavLink text="Admin" :route="Route.Admin" />
-        <AppHeaderNavLink text="Examine Names" :route="Route.Examine" />
-        <AppHeaderNavLink text="Search" :route="Route.Search" />
+      <div
+        v-if="isAuthenticated"
+        class="ml-3 flex gap-10 text-bcgov-blue5"
+      >
+        <AppHeaderNavLink
+          text="Admin"
+          :route="Route.Admin"
+        />
+        <AppHeaderNavLink
+          text="Examine Names"
+          :route="Route.Examine"
+        />
+        <AppHeaderNavLink
+          text="Search"
+          :route="Route.Search"
+        />
       </div>
 
-      <div v-if="authenticated" class="ml-auto flex items-center">
+      <div
+        v-if="isAuthenticated"
+        class="ml-auto flex items-center"
+      >
         <SearchInput
           :value="ref('')"
           class="mx-3"
           placeholder="NR Number Lookup"
         />
 
-        <nuxt-link to="/stats" class="mx-3 text-sm text-blue-800 underline">
+        <nuxt-link
+          to="/stats"
+          class="mx-3 text-sm text-blue-800 underline"
+        >
           <a>Stats</a>
         </nuxt-link>
 
         <div class="flex space-x-2 px-3">
           <ToggleSwitch
-            label="Classify Words"
             v-model="examineOptions.classifyWords"
+            label="Classify Words"
           />
           <ToggleSwitch
-            label="Priority Queue"
             v-model="examineOptions.priorityQueue"
+            label="Priority Queue"
           />
         </div>
 
         <div class="flex flex-col border-l-2 border-gray-300 px-3">
-          <span class="text-sm">{{ $userProfile.username }}</span>
-          <a class="text-sm text-blue-800" href="#" @click="$auth.logout()">
+          <span class="text-sm">{{ userName }}</span>
+          <a
+            class="text-sm text-blue-800"
+            href="#"
+            @click="logout"
+          >
             Log Out
           </a>
         </div>
       </div>
 
-      <div v-else class="mx-5">
-        <IconButton class="font-medium">
-          <ArrowRightOnRectangleIcon class="h-6" />
+      <div
+        v-else
+        class="mx-5"
+      >
+        <IconButton
+          class="font-medium"
+          @click="login"
+        >
+          <ArrowRightOnRectangleIcon
+            class="h-6"
+          />
           Login
         </IconButton>
       </div>
@@ -60,11 +90,14 @@
 <script setup lang="ts">
 import { ArrowRightOnRectangleIcon } from '@heroicons/vue/24/solid'
 import { useExamineOptionsStore } from '~/store/examine-options'
+import { useUserStore } from '~/store/user-cache'
 import { Route } from '~/enums/routes'
-
-const { $auth, $userProfile } = useNuxtApp()
-
-const authenticated = computed(() => $auth.authenticated)
+import { logout, login } from '~/util/firebase-auth'
+import { computed } from 'vue'
 
 const examineOptions = useExamineOptionsStore()
+const userStore = useUserStore()
+const isAuthenticated = computed(() => userStore.authenticated)
+const userName = computed(() => userStore.userName)
+
 </script>
diff --git a/components/search/ResultsBox.vue b/components/search/ResultsBox.vue
index 464eaa2a..2282128c 100644
--- a/components/search/ResultsBox.vue
+++ b/components/search/ResultsBox.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="h-full overflow-x-auto rounded-md border">
+  <div
+    class="h-full overflow-x-auto rounded-md border"
+  >
     <table class="min-h-fit min-w-full table-auto">
       <thead class="sticky top-0">
         <tr class="h-12 bg-bcgov-blue5 text-left text-sm text-white">
@@ -11,8 +13,8 @@
             <a
               v-if="layout[column].clickable"
               href="#"
-              @click="layout[column].clickable.onClick"
               class="flex items-center"
+              @click="layout[column].clickable.onClick"
             >
               {{ column }}
               <component
@@ -36,13 +38,13 @@
           >
             <input
               v-if="'text_input' in layout[column]"
-              type="text"
               :id="column"
+              type="text"
               :placeholder="layout[column].text_input"
               class="w-full rounded-md border p-1.5"
               :value="search.filters[column as FilterKey]"
               @keyup.enter="updateTextInputFilters()"
-            />
+            >
 
             <ListSelect
               v-else-if="'dropdown' in layout[column]"
@@ -66,13 +68,20 @@
         :class="{ 'opacity-10': search.isLoading }"
       >
         <tr>
-          <td colspan="13" class="border-b border-gray-200 py-4 text-center">
+          <td
+            colspan="13"
+            class="border-b border-gray-200 py-4 text-center"
+          >
             {{ NO_DATA_STRING }}
           </td>
         </tr>
       </tbody>
 
-      <tbody v-else class="text-sm" :class="{ 'opacity-10': search.isLoading }">
+      <tbody
+        v-else
+        class="text-sm"
+        :class="{ 'opacity-10': search.isLoading }"
+      >
         <tr
           v-for="row in search.rows"
           :key="row[SearchColumns.NameRequestNumber]"
@@ -92,7 +101,10 @@
       <LoadingSpinner v-if="search.isLoading" />
     </table>
 
-    <PopupDialog title="Choose a Date Range" :show="showDateDialog">
+    <PopupDialog
+      title="Choose a Date Range"
+      :show="showDateDialog"
+    >
       <SearchDateForm
         :initialStart="search.customSubmittedStartDate"
         :initialEnd="search.customSubmittedEndDate"
@@ -115,7 +127,7 @@ import {
   Priority,
   ClientNotification,
   Submitted,
-  LastUpdate,
+  LastUpdate
 } from '~/enums/filter-dropdowns'
 import { SearchColumns } from '~/enums/search-columns'
 import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/vue/24/outline'
@@ -144,34 +156,34 @@ type ILayout = {
 }
 const layout: ILayout = {
   [SearchColumns.Status]: {
-    dropdown: Object.values(Status),
+    dropdown: Object.values(Status)
   },
   [SearchColumns.LastModifiedBy]: {
-    text_input: 'Username',
+    text_input: 'Username'
   },
   [SearchColumns.NameRequestNumber]: {
     text_input: 'NR Number',
-    width: 'w-28',
+    width: 'w-28'
   },
   [SearchColumns.Names]: {
     text_input: 'Name',
-    width: 'w-80',
+    width: 'w-80'
   },
   [SearchColumns.ApplicantFirstName]: {
-    text_input: 'First Name',
+    text_input: 'First Name'
   },
   [SearchColumns.ApplicantLastName]: {
-    text_input: 'Last Name',
+    text_input: 'Last Name'
   },
   [SearchColumns.NatureOfBusiness]: {},
   [SearchColumns.ConsentRequired]: {
-    dropdown: Object.values(ConsentRequired),
+    dropdown: Object.values(ConsentRequired)
   },
   [SearchColumns.Priority]: {
-    dropdown: Object.values(Priority),
+    dropdown: Object.values(Priority)
   },
   [SearchColumns.ClientNotification]: {
-    dropdown: Object.values(ClientNotification),
+    dropdown: Object.values(ClientNotification)
   },
   [SearchColumns.Submitted]: {
     dropdown: Object.values(Submitted),
@@ -179,13 +191,13 @@ const layout: ILayout = {
       icon: computed(() =>
         search.submittedDateOrder === 'asc' ? ArrowDownIcon : ArrowUpIcon
       ),
-      onClick: search.toggleSubmittedDateOrder,
-    },
+      onClick: search.toggleSubmittedDateOrder
+    }
   },
   [SearchColumns.LastUpdate]: {
-    dropdown: Object.values(LastUpdate),
+    dropdown: Object.values(LastUpdate)
   },
-  [SearchColumns.LastComment]: {},
+  [SearchColumns.LastComment]: {}
 }
 
 /**
@@ -193,11 +205,11 @@ const layout: ILayout = {
  * This is useful if you edit multiple text inputs and press enter on only one,
  * but want the model values of all the other inputs updated as well.
  */
-function updateTextInputFilters() {
+function updateTextInputFilters () {
   const headCells = filter_inputs.value?.children
   if (headCells == null) return
 
-  for (let headCell of headCells) {
+  for (const headCell of headCells) {
     const filterElement = headCell.children[0]
     if (filterElement?.tagName.toLowerCase() == 'input') {
       search.filters[filterElement.id as FilterKey] = (
@@ -211,19 +223,19 @@ function updateTextInputFilters() {
  * Check if the `Custom` option in the submitted date filter was chosen.
  * If it is, then the date dialog should pop up.
  */
-function checkIfCustomSubmitDateChosen(option: any) {
+function checkIfCustomSubmitDateChosen (option: any) {
   if (option == Submitted.Custom) {
     showDateDialog.value = true
   }
 }
 
-function onDateDialogSubmit(startDate: string, endDate: string) {
+function onDateDialogSubmit (startDate: string, endDate: string) {
   search.customSubmittedStartDate = startDate
   search.customSubmittedEndDate = endDate
   showDateDialog.value = false
 }
 
-function onDateDialogCancel() {
+function onDateDialogCancel () {
   search.filters.Submitted = search.lastSubmittedDateOption
   showDateDialog.value = false
 }
diff --git a/components/search/ResultsControl.vue b/components/search/ResultsControl.vue
index 77baac5a..424a4c44 100644
--- a/components/search/ResultsControl.vue
+++ b/components/search/ResultsControl.vue
@@ -4,12 +4,11 @@
       href="#"
       class="mr-4 font-semibold text-blue-800 transition duration-150 hover:text-blue-900"
       @click="reset"
-      >{{ CLEAR_FILTERS_TEXT }}</a
-    >
+    >{{ CLEAR_FILTERS_TEXT }}</a>
 
     <ListSelect
-      class="z-10 w-48"
       v-model="search.selectedColumns"
+      class="z-10 w-48"
       :options="search.fixedColumns"
       multiple
     >
@@ -20,7 +19,10 @@
       <span class="mr-4 font-semibold">Results: {{ search.resultNum }}</span>
 
       <span>Display: </span>
-      <ListSelect v-model="search.selectedDisplay" :options="DISPLAY_OPTIONS">
+      <ListSelect
+        v-model="search.selectedDisplay"
+        :options="DISPLAY_OPTIONS"
+      >
         {{ search.selectedDisplay }}
       </ListSelect>
 
@@ -40,7 +42,10 @@
       >
         <ChevronLeftIcon class="h-6 stroke-2" />
       </IconButton>
-      <IconButton class="!py-[0.3125rem] px-5" @click="search.goToNextPage()">
+      <IconButton
+        class="!py-[0.3125rem] px-5"
+        @click="search.goToNextPage()"
+      >
         <ChevronRightIcon class="h-6 stroke-2" />
       </IconButton>
     </div>
@@ -66,7 +71,7 @@ const pageOptions = computed(() =>
   Array.from({ length: search.lastPageNumber }, (_, key) => key + 1)
 )
 
-function reset() {
+function reset () {
   search.resetFilters()
   search.resetDisplayAndPage()
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 91d65835..b88b0fc9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -51,10 +51,7 @@ export default defineNuxtConfig({
       firebaseProjectId: process.env.NUXT_PROJECT_ID,
       firebaseAppId: process.env.NUXT_APP_ID,
       namexAPIURL: process.env.NUXT_NAMEX_API_URL,
-      namexAPIVersion: process.env.NUXT_NAMEX_API_VERSION,
-      keycloakAuthUrl: process.env.NUXT_KEYCLOAK_AUTH_URL,
-      keycloakRealm: process.env.NUXT_KEYCLOAK_REALM,
-      keycloakClientId: process.env.NUXT_KEYCLOAK_CLIENTID,
+      namexAPIVersion: process.env.NUXT_NAMEX_API_VERSION
     },
   },
 })
diff --git a/package-lock.json b/package-lock.json
index 6dad1cc0..50bf825e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,8 @@
         "@pinia/nuxt": "^0.4.11",
         "dotenv": "^16.3.1",
         "firebase": "^9.22.2",
+        "firebaseui": "^6.1.0",
         "flush-promises": "^1.0.2",
-        "keycloak-js": "^21.1.2",
         "launchdarkly-js-client-sdk": "^3.1.3",
         "luxon": "^3.3.0",
         "pinia": "^2.1.3",
@@ -8752,6 +8752,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/dialog-polyfill": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+      "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -10355,6 +10360,18 @@
         "@firebase/util": "1.9.3"
       }
     },
+    "node_modules/firebaseui": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.1.0.tgz",
+      "integrity": "sha512-5WiVYVxPGMANuZKxg6KLyU1tyqIsbqf/59Zm4HrdFYwPtM5lxxB0THvgaIk4ix+hCgF0qmY89sKiktcifKzGIA==",
+      "dependencies": {
+        "dialog-polyfill": "^0.4.7",
+        "material-design-lite": "^1.2.0"
+      },
+      "peerDependencies": {
+        "firebase": "^9.1.3 || ^10.0.0"
+      }
+    },
     "node_modules/flat": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
@@ -12857,11 +12874,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/js-sha256": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
-      "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13066,15 +13078,6 @@
         "verror": "1.10.0"
       }
     },
-    "node_modules/keycloak-js": {
-      "version": "21.1.2",
-      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-21.1.2.tgz",
-      "integrity": "sha512-+6r1BvmutWGJBtibo7bcFbHWIlA7XoXRCwcA4vopeJh59Nv2Js0ju2u+t8AYth+C6Cg7/BNfO3eCTbsl/dTBHw==",
-      "dependencies": {
-        "base64-js": "^1.5.1",
-        "js-sha256": "^0.9.0"
-      }
-    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -13819,6 +13822,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/material-design-lite": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+      "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/mdast-util-definitions": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz",
diff --git a/package.json b/package.json
index 341d1ab1..40a4129c 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "build": "nuxt generate",
+    "clean": "nuxt cleanup",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
@@ -63,8 +64,8 @@
     "@pinia/nuxt": "^0.4.11",
     "dotenv": "^16.3.1",
     "firebase": "^9.22.2",
+    "firebaseui": "^6.1.0",
     "flush-promises": "^1.0.2",
-    "keycloak-js": "^21.1.2",
     "launchdarkly-js-client-sdk": "^3.1.3",
     "luxon": "^3.3.0",
     "pinia": "^2.1.3",
diff --git a/pages/Search.vue b/pages/Search.vue
index 2b29b436..da2b4ad6 100644
--- a/pages/Search.vue
+++ b/pages/Search.vue
@@ -1,7 +1,20 @@
 <template>
-  <div class="mx-4 mt-4 flex h-[91vh] flex-col">
-    <h1 class="text-2xl font-bold text-gray-700">Search</h1>
+  <div
+    v-if="isAuthenticated"
+    class="mx-4 mt-4 flex h-[91vh] flex-col"
+  >
+    <h1 class="text-2xl font-bold text-gray-700">
+      Search
+    </h1>
     <SearchResultsControl />
     <SearchResultsBox class="my-4" />
   </div>
 </template>
+<script setup lang="ts">
+
+import { useUserStore } from '~/store/user-cache'
+
+const userStore = useUserStore()
+const isAuthenticated = computed(() => userStore.authenticated)
+
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 7cbfbb7a..cfd6857f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,15 +1,20 @@
 <template>
-  <div class="container mx-auto mt-5 px-6 lg:px-48">
+  <div
+    v-if="isAuthenticated"
+    class="container mx-auto mt-5 px-6 lg:px-48"
+  >
     <div class="text-gray-800">
-      <header class="mb-3 text-3xl font-bold">Welcome to Name X!</header>
-      <span
-        >Canada's most modern, semi-automated way to examine business name
-        requests. Automated indicators show you:</span
-      >
+      <header class="mb-3 text-3xl font-bold">
+        Welcome to Name X!
+      </header>
+      <span>Canada's most modern, semi-automated way to examine business name
+        requests. Automated indicators show you:</span>
 
       <div class="mb-5 ml-10 space-y-1">
         <div>
-          <header class="text-xl font-semibold">Conflicts</header>
+          <header class="text-xl font-semibold">
+            Conflicts
+          </header>
           <p class="ml-6">
             Searches the name against related industry categories, synonyms,
             word substitutions (eg. 9 and nine), and more. The conflict search
@@ -21,7 +26,9 @@
         </div>
 
         <div>
-          <header class="text-xl font-semibold">Condition</header>
+          <header class="text-xl font-semibold">
+            Condition
+          </header>
           <p class="ml-6">
             This gives you the messages to clients and internal information
             based on condition of words or phrases, eg. 'Doctor', 'BC', and
@@ -30,7 +37,9 @@
         </div>
 
         <div>
-          <header class="text-xl font-semibold">Trademarks</header>
+          <header class="text-xl font-semibold">
+            Trademarks
+          </header>
           <p class="ml-6">
             Searches the Canadian Trademarks database and shows you active
             trademarks related to the name request
@@ -38,7 +47,9 @@
         </div>
 
         <div>
-          <header class="text-xl font-semibold">History</header>
+          <header class="text-xl font-semibold">
+            History
+          </header>
           <p class="ml-6">
             If a similar name has been approved or rejected previously (use this
             to tell you if they are holding a name too long).
@@ -50,3 +61,11 @@
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { useUserStore } from '~/store/user-cache'
+import { computed } from 'vue'
+
+const userStore = useUserStore()
+const isAuthenticated = computed(() => userStore.authenticated)
+
+</script>
diff --git a/plugins/firebase.client.ts b/plugins/firebase.client.ts
index 1a110d43..828387c3 100644
--- a/plugins/firebase.client.ts
+++ b/plugins/firebase.client.ts
@@ -1,6 +1,7 @@
 import { initializeApp } from 'firebase/app'
 import { getRemoteConfig, fetchAndActivate } from 'firebase/remote-config'
 import { getAnalytics } from 'firebase/analytics'
+import { getAuth, type Auth } from 'firebase/auth'
 import { FeatureFlags } from '@/util/constants'
 
 export default defineNuxtPlugin(async (nuxtApp) => {
@@ -17,6 +18,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
 
   const analytics = getAnalytics(app)
   const remoteConfig = getRemoteConfig(app)
+  const auth: Auth = getAuth(app)
 
   remoteConfig.settings.fetchTimeoutMillis = 60000
   remoteConfig.settings.minimumFetchIntervalMillis = 60000
@@ -34,4 +36,10 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   nuxtApp.provide('remoteConfig', remoteConfig)
 
   console.info(remoteConfig)
+
+  return {
+    provide: {
+      auth: auth
+    }
+  }
 })
diff --git a/plugins/keycloak.client.ts b/plugins/keycloak.client.ts
deleted file mode 100644
index cd271bc8..00000000
--- a/plugins/keycloak.client.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import Keycloak from 'keycloak-js'
-
-export default defineNuxtPlugin(async (_nuxtApp) => {
-  const config = useRuntimeConfig()
-  const keycloak = new Keycloak({
-    url: config.public.keycloakAuthUrl,
-    realm: config.public.keycloakRealm,
-    clientId: config.public.keycloakClientId,
-  })
-
-  try {
-    const authenticated = await keycloak.init({
-      onLoad: 'login-required',
-      responseMode: 'query',
-      pkceMethod: 'S256',
-    })
-    console.log(`[Keycloak] User authenticated?: ${authenticated}`)
-  } catch (error) {
-    console.error('Failed to initialize Keycloak adapter: ', error)
-  }
-
-  return {
-    provide: {
-      auth: keycloak,
-      userProfile: await keycloak.loadUserProfile(),
-    },
-  }
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 60bf4e7f..57e2a97f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,9 +38,6 @@ dependencies:
   flush-promises:
     specifier: ^1.0.2
     version: 1.0.2
-  keycloak-js:
-    specifier: ^21.1.1
-    version: 21.1.2
   launchdarkly-js-client-sdk:
     specifier: ^3.1.3
     version: 3.1.3
@@ -6756,13 +6753,6 @@ packages:
       verror: 1.10.0
     dev: true
 
-  /keycloak-js@21.1.2:
-    resolution: {integrity: sha512-+6r1BvmutWGJBtibo7bcFbHWIlA7XoXRCwcA4vopeJh59Nv2Js0ju2u+t8AYth+C6Cg7/BNfO3eCTbsl/dTBHw==}
-    dependencies:
-      base64-js: 1.5.1
-      js-sha256: 0.9.0
-    dev: false
-
   /keygrip@1.1.0:
     resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
     engines: {node: '>= 0.6'}
diff --git a/store/user-cache.ts b/store/user-cache.ts
new file mode 100644
index 00000000..09c7d36f
--- /dev/null
+++ b/store/user-cache.ts
@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia'
+import { useNuxtApp } from '#app'
+import { OAuthProvider, getRedirectResult, onAuthStateChanged } from 'firebase/auth'
+
+export const useUserStore = defineStore('user-cache', () => {
+  const authenticated = ref(false)
+  const userName = ref('')
+  const token = ref('')
+  // eslint-disable-next-line require-jsdoc
+  async function setUser () {
+    const { $auth } = useNuxtApp()
+    $auth.onAuthStateChanged(async function (user) {
+      if (user) {
+        userName.value = user.displayName ? user.displayName : ''
+        authenticated.value = true
+        const { $auth } = useNuxtApp()
+        const userCredential = await getRedirectResult($auth)
+        if (userCredential) {
+          const credentials = OAuthProvider.credentialFromResult(userCredential)
+          token.value = credentials?.accessToken ? credentials.accessToken : ''
+        }
+        // examine()
+      } else {
+        userName.value = ''
+        authenticated.value = false
+        token.value = ''
+      }
+    })
+  }
+  return { authenticated, userName, token, setUser }
+}
+// , { persist: true }
+)
diff --git a/util/firebase-auth.ts b/util/firebase-auth.ts
new file mode 100644
index 00000000..283d9a57
--- /dev/null
+++ b/util/firebase-auth.ts
@@ -0,0 +1,38 @@
+import { signOut, OAuthProvider, signInWithRedirect, getRedirectResult } from 'firebase/auth'
+import { useUserStore } from '~/store/user-cache'
+
+/**
+ * perform user log out
+ */
+export async function logout () {
+  const { $auth } = useNuxtApp()
+  signOut($auth)
+  const userStore = useUserStore()
+  await userStore.setUser()
+  // reloadNuxtApp()
+}
+
+/**
+ * perform user log in
+ */
+export async function login () {
+  // TODO use env var for provider
+  const provider = new OAuthProvider('oidc.namex')
+  const { $auth } = useNuxtApp()
+  signInWithRedirect($auth, provider)
+  // const userStore = useUserStore()
+  // await userStore.setUser()
+}
+
+/**
+ * check login token
+ */
+export async function examine () {
+  const { $auth } = useNuxtApp()
+  const userCredential = await getRedirectResult($auth)
+  if (userCredential) {
+    const credentials = OAuthProvider.credentialFromResult(userCredential)
+    console.log(credentials)
+    console.log(userCredential)
+  }
+}
diff --git a/util/namex-api.ts b/util/namex-api.ts
index c3512b74..8a2d9bb7 100644
--- a/util/namex-api.ts
+++ b/util/namex-api.ts
@@ -1,8 +1,10 @@
+import { useUserStore } from '~/store/user-cache'
+
 /**
  * Returns the full NameX API url given an endpoint
  * @param endpoint The API endpoint (including the starting slash '/')
  */
-export function getNamexApiUrl(endpoint: string): URL {
+export function getNamexApiUrl (endpoint: string): URL {
   const config = useRuntimeConfig().public
   return new URL(
     config.namexAPIVersion + endpoint,
@@ -13,22 +15,22 @@ export function getNamexApiUrl(endpoint: string): URL {
 /**
  * Make a call to the NameX API and return the response json
  * @param url The url to fetch
- * @returns The json response object
+ * @return The json response object
  */
-export async function callNamexApi(url: URL): Promise<any> {
-  const { $auth } = useNuxtApp()
-  const response = await $auth
-    .updateToken(30)
-    .then(async (_refreshed) => {
-      return await fetch(url, {
-        headers: {
-          Authorization: `Bearer ${$auth.token}`,
-        },
-      })
-    })
-    .catch(async (error) => {
-      console.error(`Failed to update Keycloak token: ${error}`)
+export async function callNamexApi (url: URL): Promise<any> {
+  const userStore = useUserStore()
+  let response: Response = new Response()
+  const token = userStore.token
+
+  if (token.length > 0) {
+    const token = userStore.token
+
+    response = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
     })
+  }
 
-  return await response?.json()
+  return response?.json()
 }

From 3c67739ae68b79dbf7f31b9d80e504b5af1c0b59 Mon Sep 17 00:00:00 2001
From: bolyachevets <andriy.bolyachevets@gov.bc.ca>
Date: Sun, 21 Jan 2024 23:59:36 -0800
Subject: [PATCH 2/5] clean up

---
 .env.example                     |  8 ++------
 app.vue                          |  2 +-
 components/StatusBox.vue         |  5 +++--
 components/search/ResultsBox.vue |  8 ++++++++
 devops/cloudbuild-pr.yaml        |  1 +
 devops/vaults.env                |  8 ++------
 nuxt.config.ts                   | 27 ++++++++++++++-------------
 store/user-cache.ts              |  2 --
 util/firebase-auth.ts            | 25 +++----------------------
 9 files changed, 34 insertions(+), 52 deletions(-)

diff --git a/.env.example b/.env.example
index 5f02ba4a..cb3bcf81 100644
--- a/.env.example
+++ b/.env.example
@@ -7,13 +7,9 @@ NUXT_SITEMINDER_LOGOUT_URL="https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi"
 NUXT_NAMEX_API_URL="https://namex-dev.apps.silver.devops.gov.bc.ca"
 NUXT_NAMEX_API_VERSION="/api/v1"
 
-#vaults keycloak
-NUXT_KEYCLOAK_AUTH_URL="https://dev.loginproxy.gov.bc.ca/auth"
-NUXT_KEYCLOAK_REALM="bcregistry"
-NUXT_KEYCLOAK_CLIENTID="NameX-Dev"
-
 #vaults firebase
 NUXT_API_KEY=
 NUXT_AUTH_DOMAIN=
 NUXT_PROJECT_ID=
-NUXT_APP_ID=
\ No newline at end of file
+NUXT_APP_ID=
+GCP_IDP=
\ No newline at end of file
diff --git a/app.vue b/app.vue
index 7ee30c27..2e6330e9 100644
--- a/app.vue
+++ b/app.vue
@@ -7,6 +7,6 @@
 import { useUserStore } from '~/store/user-cache'
 
 const userStore = useUserStore()
-await userStore.setUser()
+userStore.setUser()
 
 </script>
diff --git a/components/StatusBox.vue b/components/StatusBox.vue
index 6d08c8bb..e9e55c98 100644
--- a/components/StatusBox.vue
+++ b/components/StatusBox.vue
@@ -22,12 +22,13 @@
 
 <script setup lang="ts">
 import { useStatusStore } from '~/store/status'
+import { useUserStore } from '~/store/user-cache'
 
+const userStore = useUserStore()
 const status = useStatusStore()
-status.update()
 
 const notExaminedNum = computed(() => status.notExaminedNum)
 const holdNum = computed(() => status.holdNum)
 
-// onMounted(async () => await status.update())
+watch(userStore, async () => await status.update())
 </script>
diff --git a/components/search/ResultsBox.vue b/components/search/ResultsBox.vue
index 2282128c..e0847e03 100644
--- a/components/search/ResultsBox.vue
+++ b/components/search/ResultsBox.vue
@@ -131,6 +131,7 @@ import {
 } from '~/enums/filter-dropdowns'
 import { SearchColumns } from '~/enums/search-columns'
 import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/vue/24/outline'
+import { useUserStore } from '~/store/user-cache'
 
 const NO_DATA_STRING = 'No Data Available'
 
@@ -246,4 +247,11 @@ onMounted(async () => {
   search.resetDisplayAndPage()
   await search.updateRows()
 })
+
+const userStore = useUserStore()
+
+watch(userStore, async () => {
+  await search.updateRows()
+})
+
 </script>
diff --git a/devops/cloudbuild-pr.yaml b/devops/cloudbuild-pr.yaml
index 4b038a61..8e3f4af7 100644
--- a/devops/cloudbuild-pr.yaml
+++ b/devops/cloudbuild-pr.yaml
@@ -20,6 +20,7 @@ steps:
       - 'NUXT_AUTH_DOMAIN=$_NUXT_AUTH_DOMAIN'
       - 'NUXT_PROJECT_ID=$_NUXT_PROJECT_ID'
       - 'NUXT_APP_ID=$_NUXT_APP_ID'
+      - 'GCP_IDP=$_GCP_IDP'
     args: ['run', 'build']
 
   #
diff --git a/devops/vaults.env b/devops/vaults.env
index cf651a32..cab1487d 100644
--- a/devops/vaults.env
+++ b/devops/vaults.env
@@ -7,13 +7,9 @@ NUXT_SITEMINDER_LOGOUT_URL="op://web-url/$APP_ENV/siteminder/SITEMINDER_LOGOUT_U
 NUXT_NAMEX_API_URL="op://API/$APP_ENV/namex-api/NAMEX_API_URL"
 NUXT_NAMEX_API_VERSION="op://API/$APP_ENV/namex-api/NAMEX_API_VERSION"
 
-#vaults keycloak
-NUXT_KEYCLOAK_AUTH_URL="op://keycloak/$APP_ENV/base/KEYCLOAK_AUTH_BASE_URL"
-NUXT_KEYCLOAK_REALM="op://keycloak/$APP_ENV/base/KEYCLOAK_REALMNAME"
-NUXT_KEYCLOAK_CLIENTID="op://keycloak/$APP_ENV/namex-examination/UI_KEYCLOAK_RESOURCE_NAME"
-
 #vaults firebase
 NUXT_API_KEY="op://firebase/$APP_ENV/base/API_KEY"
 NUXT_AUTH_DOMAIN="op://firebase/$APP_ENV/base/AUTH_DOMAIN"
 NUXT_PROJECT_ID="op://firebase/$APP_ENV/base/PROJECT_ID"
-NUXT_APP_ID="op://firebase/$APP_ENV/namex/APP_ID"
\ No newline at end of file
+NUXT_APP_ID="op://firebase/$APP_ENV/namex/APP_ID"
+GCP_IDP="op://firebase/$APP_ENV/namex/GCP_IDP"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b88b0fc9..c531f498 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,41 +4,41 @@ import path from 'path'
 export default defineNuxtConfig({
   ssr: false,
   devServer: {
-    port: 8080,
+    port: 8080
   },
   app: {
     head: {
       charset: 'utf-8',
       viewport: 'width=device-width, initial-scale=1',
-      title: 'BC Registry: Name Examination',
+      title: 'BC Registry: Name Examination'
     },
-    baseURL: '/',
+    baseURL: '/'
   },
   modules: [
     '@nuxt/content',
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',
-    'nuxt-vitest',
+    'nuxt-vitest'
   ],
   css: ['@/assets/css/main.scss'],
   typescript: {
-    typeCheck: true,
+    typeCheck: true
   },
   pinia: {
     autoImports: [
       // automatically imports `defineStore`
       'defineStore', // import { defineStore } from 'pinia'
       ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
-      'acceptHMRUpdate', // import `acceptHMRUpdate` from 'pinia
-    ],
+      'acceptHMRUpdate' // import `acceptHMRUpdate` from 'pinia
+    ]
   },
   vite: {
-    mode: 'spa',
+    mode: 'spa'
   },
   nitro: {
     output: {
-      publicDir: path.join(__dirname, 'dist'),
-    },
+      publicDir: path.join(__dirname, 'dist')
+    }
   },
   runtimeConfig: {
     // Private keys are only available on the server
@@ -51,7 +51,8 @@ export default defineNuxtConfig({
       firebaseProjectId: process.env.NUXT_PROJECT_ID,
       firebaseAppId: process.env.NUXT_APP_ID,
       namexAPIURL: process.env.NUXT_NAMEX_API_URL,
-      namexAPIVersion: process.env.NUXT_NAMEX_API_VERSION
-    },
-  },
+      namexAPIVersion: process.env.NUXT_NAMEX_API_VERSION,
+      gcpIDP: process.env.GCP_IDP
+    }
+  }
 })
diff --git a/store/user-cache.ts b/store/user-cache.ts
index 09c7d36f..cee571bc 100644
--- a/store/user-cache.ts
+++ b/store/user-cache.ts
@@ -19,7 +19,6 @@ export const useUserStore = defineStore('user-cache', () => {
           const credentials = OAuthProvider.credentialFromResult(userCredential)
           token.value = credentials?.accessToken ? credentials.accessToken : ''
         }
-        // examine()
       } else {
         userName.value = ''
         authenticated.value = false
@@ -29,5 +28,4 @@ export const useUserStore = defineStore('user-cache', () => {
   }
   return { authenticated, userName, token, setUser }
 }
-// , { persist: true }
 )
diff --git a/util/firebase-auth.ts b/util/firebase-auth.ts
index 283d9a57..1ddb726d 100644
--- a/util/firebase-auth.ts
+++ b/util/firebase-auth.ts
@@ -1,5 +1,4 @@
-import { signOut, OAuthProvider, signInWithRedirect, getRedirectResult } from 'firebase/auth'
-import { useUserStore } from '~/store/user-cache'
+import { signOut, OAuthProvider, signInWithRedirect } from 'firebase/auth'
 
 /**
  * perform user log out
@@ -7,32 +6,14 @@ import { useUserStore } from '~/store/user-cache'
 export async function logout () {
   const { $auth } = useNuxtApp()
   signOut($auth)
-  const userStore = useUserStore()
-  await userStore.setUser()
-  // reloadNuxtApp()
 }
 
 /**
  * perform user log in
  */
 export async function login () {
-  // TODO use env var for provider
-  const provider = new OAuthProvider('oidc.namex')
+  const config = useRuntimeConfig().public
+  const provider = new OAuthProvider(config.gcpIDP)
   const { $auth } = useNuxtApp()
   signInWithRedirect($auth, provider)
-  // const userStore = useUserStore()
-  // await userStore.setUser()
-}
-
-/**
- * check login token
- */
-export async function examine () {
-  const { $auth } = useNuxtApp()
-  const userCredential = await getRedirectResult($auth)
-  if (userCredential) {
-    const credentials = OAuthProvider.credentialFromResult(userCredential)
-    console.log(credentials)
-    console.log(userCredential)
-  }
 }

From 3135dcfd5748ef628be39d674c0395c1b4162065 Mon Sep 17 00:00:00 2001
From: bolyachevets <andriy.bolyachevets@gov.bc.ca>
Date: Mon, 22 Jan 2024 11:03:57 -0800
Subject: [PATCH 3/5] redirect at logout

---
 util/firebase-auth.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/util/firebase-auth.ts b/util/firebase-auth.ts
index 1ddb726d..15b2474b 100644
--- a/util/firebase-auth.ts
+++ b/util/firebase-auth.ts
@@ -6,6 +6,7 @@ import { signOut, OAuthProvider, signInWithRedirect } from 'firebase/auth'
 export async function logout () {
   const { $auth } = useNuxtApp()
   signOut($auth)
+  window.location.assign('/')
 }
 
 /**

From d5a83ac6121fe94445d2464649d3c7c4c8eb6042 Mon Sep 17 00:00:00 2001
From: bolyachevets <andriy.bolyachevets@gov.bc.ca>
Date: Thu, 1 Feb 2024 12:52:45 -0800
Subject: [PATCH 4/5] fix merge

---
 package-lock.json |  8 ++++++++
 util/namex-api.ts | 52 ++++++++++++++++++++++++-----------------------
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 90595f1d..09522611 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11970,6 +11970,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/material-design-lite": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+      "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/mdast-util-find-and-replace": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz",
diff --git a/util/namex-api.ts b/util/namex-api.ts
index 289c7e48..cf906b56 100644
--- a/util/namex-api.ts
+++ b/util/namex-api.ts
@@ -1,24 +1,13 @@
 import { useUserStore } from '~/store/user-cache'
-
-
-/**
- * Returns the full NameX API url given an endpoint
- * @param endpoint The API endpoint (including the starting slash '/')
- */
-export function getNamexApiUrl (endpoint: string): URL {
-  const config = useRuntimeConfig().public
-  return new URL(
-    config.namexAPIVersion + endpoint,
-    config.namexAPIURL as string
-  )
-}
+import type { Transaction } from '~/types'
 
 /**
  * Make a call to the NameX API and return the response json
  * @param url The url to fetch
+ * @param options call options
  * @return The json response object
  */
-export async function callNamexApi (url: URL): Promise<any> {
+export async function callNamexApi (url: URL, options?: object): Promise<any> {
   const userStore = useUserStore()
   let response: Response = new Response()
   const token = userStore.token
@@ -29,49 +18,62 @@ export async function callNamexApi (url: URL): Promise<any> {
     response = await fetch(url, {
       headers: {
         Authorization: `Bearer ${token}`
-      }
+      },
+      ...(options || {})
     })
   }
-
   return response?.json()
-  
+}
+
+/**
+ * Returns the full NameX API url given an endpoint
+ * @param endpoint The API endpoint (including the starting slash '/')
+ */
+export function getNamexApiUrl (endpoint: string): URL {
+  const config = useRuntimeConfig().public
+  return new URL(
+    config.namexAPIVersion + endpoint,
+    config.namexAPIURL as string
+  )
+}
+
 /**
  * Make a GET request to the given NameX API URL and return the response json.
  * @param url the url to fetch
- * @returns the json response object
+ * @return the json response object
  */
-export async function getNamexObject(url: URL): Promise<any> {
+export async function getNamexObject (url: URL): Promise<any> {
   return (await callNamexApi(url)).json()
 }
 
 /**
  * Get a name request object given its NR number.
  */
-export async function getNameRequest(nrNumber: string) {
+export async function getNameRequest (nrNumber: string) {
   return callNamexApi(getNamexApiUrl(`/requests/${nrNumber}`))
 }
 
 /**
  * Patch the name request with the given NR number with a patch object.
  */
-export async function patchNameRequest(nrNumber: string, patch: object) {
+export async function patchNameRequest (nrNumber: string, patch: object) {
   const url = getNamexApiUrl(`/requests/${nrNumber}`)
   return await callNamexApi(url, {
     method: 'PATCH',
-    body: JSON.stringify(patch),
+    body: JSON.stringify(patch)
   })
 }
 
-export async function getTransactions(
+export async function getTransactions (
   nrNumber: string
 ): Promise<Array<Transaction>> {
   return getNamexObject(getNamexApiUrl(`/events/${nrNumber}`))
 }
 
-export async function getBusiness(corpNum: string) {
+export async function getBusiness (corpNum: string) {
   return callNamexApi(getNamexApiUrl(`/businesses/${corpNum}`))
 }
 
-export async function getCorporation(corpNum: string) {
+export async function getCorporation (corpNum: string) {
   return callNamexApi(getNamexApiUrl(`/corporations/${corpNum}`))
 }

From 9dc7ee2d75dc54c69a2e9ee1d96d147f42718f64 Mon Sep 17 00:00:00 2001
From: bolyachevets <andriy.bolyachevets@gov.bc.ca>
Date: Thu, 1 Feb 2024 13:46:56 -0800
Subject: [PATCH 5/5] fix typo

---
 util/namex-api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/util/namex-api.ts b/util/namex-api.ts
index cf906b56..bacbe250 100644
--- a/util/namex-api.ts
+++ b/util/namex-api.ts
@@ -22,7 +22,7 @@ export async function callNamexApi (url: URL, options?: object): Promise<any> {
       ...(options || {})
     })
   }
-  return response?.json()
+  return response
 }
 
 /**