Fix/cookie bug

package.json

@@ -27,6 +27,7 @@
     "bootstrap-icons": "^1.10.3",
     "geovisio": "2.2.1-develop-acb9989e",
     "moment": "^2.29.4",
+    "pako": "^2.1.0",
     "pinia": "^2.1.4",
     "vue": "^3.2.45",
     "vue-axios": "^3.5.2",

pako.d.ts

@@ -0,0 +1 @@
+declare module 'pako'

src/App.vue

@@ -5,6 +5,7 @@ import Footer from '@/components/Footer.vue'
 import { RouterView } from 'vue-router'
 import { useMeta } from 'vue-meta'
 import { useI18n } from 'vue-i18n'
+import { hasASessionCookieDecoded } from '@/utils/auth'
 import { useCookies } from 'vue3-cookies'
 import { title } from '@/utils/index'
 import authConfig from './composables/auth'
@@ -29,7 +30,10 @@ useMeta({
 function setFocusMap(value: string) {
   focusMap.value = value
 }
-const getUserId = computed<string>(() => cookies.get('user_id'))
+const isLogged = computed((): boolean => {
+  const cookie = hasASessionCookieDecoded()
+  return !!(cookie && cookie.account)
+})
 </script>
 
 <template>
@@ -51,7 +55,7 @@ const getUserId = computed<string>(() => cookies.get('user_id'))
         : ''
     "
   />
-  <RouterView @trigger="setFocusMap" :class="{ logged: getUserId }" />
-  <Footer v-if="!getUserId" />
+  <RouterView @trigger="setFocusMap" :class="{ logged: isLogged }" />
+  <Footer v-if="!isLogged" />
 </template>
 <style scoped></style>

src/components/Header.vue

@@ -107,16 +107,13 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { onClickOutside } from '@vueuse/core'
-import { useCookies } from 'vue3-cookies'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { getAuthRoute } from '@/utils/auth'
+import { getAuthRoute, hasASessionCookieDecoded } from '@/utils/auth'
 import Link from '@/components/Link.vue'
 import InstanceName from '@/components/InstanceName.vue'
 import HeaderOpen from '@/components/header/HeaderOpen.vue'
 import AccountButton from '@/components/header/AccountButton.vue'
-
-const { cookies } = useCookies()
 const { t } = useI18n()
 const route = useRoute()
 defineProps({
@@ -128,26 +125,32 @@ let menuIsClosed = ref<boolean>(true)
 
 onClickOutside(list, () => closeModal())
 
-function closeModal() {
+function closeModal(): void {
   menuIsClosed.value = true
 }
 
 function toggleMenu(): void {
   menuIsClosed.value = !menuIsClosed.value
 }
-const isLogged = computed((): boolean => !!cookies.get('user_id'))
+const isLogged = computed((): boolean => {
+  const cookie = hasASessionCookieDecoded()
+  return !!(cookie && cookie.account)
+})
 const ariaLabel = computed((): string =>
   menuIsClosed.value
     ? t('general.header.burger_menu_aria_label_open')
     : t('general.header.burger_menu_aria_label_closed')
 )
-const userName = computed((): string =>
-  cookies!
-    .get('user_name')
-    .match(/\b(\w)/g)!
-    .join('')
-    .toUpperCase()
-)
+const userName = computed((): string => {
+  const cookie = hasASessionCookieDecoded()
+  if (cookie && cookie.account) {
+    return cookie.account.name
+      .match(/\b(\w)/g)!
+      .join('')
+      .toUpperCase()
+  }
+  return ''
+})
 </script>
 
 <style lang="scss" scoped>

src/router/index.ts

@@ -6,7 +6,7 @@ import type {
   RouteLocationNormalized
 } from 'vue-router'
 import axios from 'axios'
-import { getAuthRoute } from '@/utils/auth'
+import { getAuthRoute, hasASessionCookieDecoded } from '@/utils/auth'
 import HomeView from '../views/HomeView.vue'
 import MyInformationView from '../views/MyInformationView.vue'
 import MySettingsView from '../views/MySettingsView.vue'
@@ -77,8 +77,9 @@ router.beforeResolve(
       to.name === 'upload-pictures'
 
     if (siteLoggedRoutes) {
-      if (!isSiteLogged()) goToLoginPage(to.path)
-      else return next()
+      if (!isSiteLogged()) {
+        goToLoginPage(to.path)
+      } else return next()
     }
     if (to.name === 'my-information') {
       try {
@@ -95,7 +96,8 @@ router.beforeResolve(
 )
 
 function isSiteLogged(): boolean {
-  return !!cookies.get('user_id')
+  const cookie = hasASessionCookieDecoded()
+  return !!(cookie && cookie.account)
 }
 
 async function isKeycloakLogout(): Promise<{ status: number }> {

src/tests/unit/components/Header.spec.js

@@ -96,7 +96,9 @@ describe('Template', () => {
   })
   describe('When the user is logged', () => {
     it('should render the component with good wording keys', async () => {
-      vi.spyOn(useCookies().cookies, 'get').mockReturnValue('user_id=id')
+      vi.spyOn(useCookies().cookies, 'get').mockReturnValue(
+        '.eJw9y0EKgzAQQNG7zLoDJpmYxMuUySRDra0pooUi3r3SRZcf_tuBRdo2rzDsMBYYgFxRytljkeyQrK0YVT16m6OhUlIihgvM_Kznfa88n9V4W2_XnzcuiqgmDBQMUtYec00WO3XqAndd7OUvXkt7j6Uup5vqRx6NJziOL8SPLNU.ZVy19Q.4DkVxu-LSF11uREkn6YIwHbn_0U'
+      )
 
       import.meta.env.VITE_API_URL = 'api-url/'
       const wrapper = shallowMount(Header, {
@@ -116,7 +118,7 @@ describe('Template', () => {
       expect(wrapper.html()).contains('general.header.upload_text')
       expect(wrapper.html()).contains('data-test="link-logged-upload"')
       expect(wrapper.html()).contains('<account-button')
-      expect(wrapper.html()).contains('username="UI"')
+      expect(wrapper.html()).contains('username="J"')
     })
   })
 })

src/tests/unit/utils.spec.js

@@ -1,4 +1,4 @@
-import { it, describe, expect } from 'vitest'
+import { it, describe, expect, vi, beforeEach } from 'vitest'
 import {
   imageStatus,
   photoToDeleteOrPatchSelected,
@@ -6,10 +6,26 @@ import {
   formatPaginationItems
 } from '../../views/utils/sequence/index'
 import { sortByName } from '../../views/utils/upload/index'
-import { getAuthRoute } from '../../utils/auth'
+import {
+  getAuthRoute,
+  decodingFlaskCookie,
+  hasASessionCookieDecoded
+} from '../../utils/auth'
 import { img } from '../../utils/image'
 import { title } from '../../utils/index'
-
+import { useCookies } from 'vue3-cookies'
+vi.mock('vue3-cookies', () => {
+  const mockCookies = {
+    get: vi.fn(),
+    remove: vi.fn(),
+    keys: vi.fn()
+  }
+  return {
+    useCookies: () => ({
+      cookies: mockCookies
+    })
+  }
+})
 describe('imageStatus', () => {
   it('should render the "status" value', () => {
     const sequenceStatus = 'hidden'
@@ -126,6 +142,42 @@ describe('getAuthRoute', () => {
   })
 })
 
+describe('decodingFlaskCookie', () => {
+  it('should return a decoded cookie', () => {
+    const cookie =
+      '.eJw9y0EKgzAQQNG7zLoDJpmYxMuUySRDra0pooUi3r3SRZcf_tuBRdo2rzDsMBYYgFxRytljkeyQrK0YVT16m6OhUlIihgvM_Kznfa88n9V4W2_XnzcuiqgmDBQMUtYec00WO3XqAndd7OUvXkt7j6Uup5vqRx6NJziOL8SPLNU.ZVy19Q.4DkVxu-LSF11uREkn6YIwHbn_0U'
+    expect(decodingFlaskCookie(cookie)).toEqual(
+      JSON.stringify({
+        account: {
+          id: '43df4bb5-dcb3-422e-8ff5-52b814dd994a',
+          name: 'jean',
+          oauth_id: '138ccff9-7471-4bf6-be92-0f3f37a0086c',
+          oauth_provider: 'keycloak'
+        }
+      })
+    )
+  })
+})
+describe('hasASessionCookieDecoded', () => {
+  it('should return a cookie parsed', () => {
+    vi.spyOn(useCookies().cookies, 'get').mockReturnValue(
+      '.eJw9y0EKgzAQQNG7zLoDJpmYxMuUySRDra0pooUi3r3SRZcf_tuBRdo2rzDsMBYYgFxRytljkeyQrK0YVT16m6OhUlIihgvM_Kznfa88n9V4W2_XnzcuiqgmDBQMUtYec00WO3XqAndd7OUvXkt7j6Uup5vqRx6NJziOL8SPLNU.ZVy19Q.4DkVxu-LSF11uREkn6YIwHbn_0U'
+    )
+    expect(hasASessionCookieDecoded()).toEqual({
+      account: {
+        id: '43df4bb5-dcb3-422e-8ff5-52b814dd994a',
+        name: 'jean',
+        oauth_id: '138ccff9-7471-4bf6-be92-0f3f37a0086c',
+        oauth_provider: 'keycloak'
+      }
+    })
+  })
+  it('should return null', () => {
+    vi.spyOn(useCookies().cookies, 'get').mockReturnValue(null)
+    expect(hasASessionCookieDecoded()).toBe(null)
+  })
+})
+
 describe('img', () => {
   it('should render the formated img path', () => {
     const name = 'my-img'

src/utils/auth.ts

@@ -1,3 +1,7 @@
+import pako from 'pako'
+import { useCookies } from 'vue3-cookies'
+const { cookies } = useCookies()
+
 function getAuthRoute(authRoute: string, nextRoute: string): string {
   const next = `${location.protocol}//${location.host}${nextRoute}`
   return `${
@@ -5,4 +9,24 @@ function getAuthRoute(authRoute: string, nextRoute: string): string {
   }api/${authRoute}?next_url=${encodeURIComponent(`${next}`)}`
 }
 
-export { getAuthRoute }
+function decodingFlaskCookie(cookie: string): string {
+  const cookieFormatted = cookie
+    .split('.')[1]
+    .replace(/_/g, '/')
+    .replace(/-/g, '+')
+  const binaryString = atob(cookieFormatted)
+  const bytes = new Uint8Array(binaryString.length)
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i)
+  }
+  return pako.inflate(bytes.buffer, { to: 'string' })
+}
+
+function hasASessionCookieDecoded(): { account: { name: string } } | null {
+  if (cookies.get('session')) {
+    return JSON.parse(decodingFlaskCookie(cookies.get('session')))
+  }
+  return null
+}
+
+export { getAuthRoute, hasASessionCookieDecoded, decodingFlaskCookie }

src/views/HomeView.vue

@@ -9,6 +9,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import Viewer from '@/components/Viewer.vue'
+
 const viewerRef = ref<unknown>(null)
 </script>
 <style scoped lang="scss">

src/views/MySequenceView.vue

@@ -227,7 +227,6 @@ import type {
   ResponseUserSequenceInterface
 } from './interfaces/MySequenceView'
 const { cookies } = useCookies()
-
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()

src/views/MySequencesView.vue

@@ -308,7 +308,8 @@ const getUserId = computed<string>(() => cookies.get('user_id'))
 onMounted(async () => {
   isLoading.value = true
   try {
-    const { data } = await axios.get('api/users/me/collection')
+    const { data } = await axios.get('api/users/me/collection?limit=1')
+    console.log(data)
     collectionBbox.value = data.extent.spatial.bbox[0]
     userSequences.value = getRelChild(data.links)
     isLoading.value = false

yarn.lock

@@ -5245,6 +5245,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+pako@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
+  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"