Remove usage session ID cookie and use ephemeral Vuex data

package.json

@@ -92,6 +92,7 @@
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^5.8.2",
     "@types/jest": "^26.0.22",
+    "@types/uuid": "^8.3.4",
     "@vue/test-utils": "^1.1.3",
     "autoprefixer": "^10.4.0",
     "babel-jest": "^26.6.3",

src/store/user.js

@@ -1,6 +1,18 @@
-import SessionId from '~/utils/session-id'
+import { v4 as uuidv4 } from 'uuid'
 
+/**
+ * @typedef UserState
+ * @property {string | undefined} usageSessionId
+ */
+
+/**
+ * @returns {UserState}
+ */
 export const state = () => ({
-  abSessionId: SessionId('abSessionId', true),
-  usageSessionId: SessionId('usageSessionId'),
+  /**
+   * Default to `undefined` on the client and let client side
+   * SSR state hydration pull the SSR generated ID into the client.
+   * This way we avoid generating any spurious IDs on the client.
+   */
+  usageSessionId: process.server ? uuidv4() : undefined,
 })

test/unit/specs/store/user.spec.js

@@ -0,0 +1,28 @@
+import * as user from '~/store/user'
+import { v4 as uuidv4 } from 'uuid'
+
+jest.mock('uuid', () => ({ v4: jest.fn() }))
+
+describe('user store', () => {
+  beforeEach(() => {
+    process.server = false
+    process.client = false
+  })
+
+  afterAll(() => {
+    // avoid polluting other tests that might be affected by these flags
+    delete process.server
+    delete process.client
+  })
+
+  it('should generate a new usageSessionId when on server', () => {
+    uuidv4.mockReturnValue('abcd-1234')
+    process.server = true
+    expect(user.state().usageSessionId).toEqual('abcd-1234')
+  })
+
+  it('should not generate a new usageSessionId when on client', () => {
+    process.client = true
+    expect(user.state().usageSessionId).toBeUndefined()
+  })
+})

tsconfig.json

@@ -37,6 +37,7 @@
     "src/composables/use-active-audio.js",
     "src/data/api-service.js",
     "src/data/usage-data-service.js",
+    "src/store/user.js",
     "src/utils/warn.js"
   ]
 }