Refactor Panoptes authentication in all packages

packages/app-content-pages/package.json

@@ -19,7 +19,7 @@
     "@sentry/nextjs": "~7.57.0",
     "@zooniverse/async-states": "~0.0.1",
     "@zooniverse/grommet-theme": "~3.1.0",
-    "@zooniverse/panoptes-js": "~0.3.0",
+    "@zooniverse/panoptes-js": "~0.4.0",
     "@zooniverse/react-components": "~1.5.0",
     "contentful": "~10.3.0",
     "dotenv": "~16.3.0",

packages/app-content-pages/src/shared/stores/User/User.js

@@ -1,3 +1,4 @@
+import * as panoptesJS from '@zooniverse/panoptes-js'
 import asyncStates from '@zooniverse/async-states'
 import { applySnapshot, flow, types } from 'mobx-state-tree'
 import auth from 'panoptes-client/lib/auth'
@@ -6,6 +7,25 @@ import numberString from '../types/numberString'
 
 import UserPersonalization from './UserPersonalization'
 
+async function fetchPanoptesUser() {
+  try {
+    const token = await auth.checkBearerToken()
+    if (token) {
+      const { user, error } = await panoptesJS.auth.decodeJWT(token)
+      if (user) {
+        return user
+      }
+      if (error) {
+        throw error
+      }
+    }
+    return await auth.checkCurrent()
+  } catch (error) {
+    console.log(error)
+    return null
+  }
+}
+
 const User = types
   .model('User', {
     avatar_src: types.maybeNull(types.string),
@@ -31,7 +51,7 @@ const User = types
     checkCurrent: flow(function * checkCurrent () {
       self.loadingState = asyncStates.loading
       try {
-        const userResource = yield auth.checkCurrent()
+        const userResource = yield fetchPanoptesUser()
         self.loadingState = asyncStates.success
         if (userResource) {
           self.set(userResource)

packages/app-project/package.json

@@ -28,7 +28,7 @@
     "@zooniverse/async-states": "~0.0.1",
     "@zooniverse/classifier": "^0.0.1",
     "@zooniverse/grommet-theme": "~3.1.0",
-    "@zooniverse/panoptes-js": "~0.3.0",
+    "@zooniverse/panoptes-js": "~0.4.0",
     "@zooniverse/react-components": "~1.5.0",
     "cookie": "~0.5.0",
     "d3": "~6.7.0",

packages/app-project/src/hooks/usePanoptesUser.js

@@ -1,3 +1,4 @@
+import * as panoptesJS from '@zooniverse/panoptes-js'
 import auth from 'panoptes-client/lib/auth'
 import useSWR from 'swr'
 
@@ -11,14 +12,24 @@ const SWRoptions = {
 
 async function fetchPanoptesUser() {
   try {
+    const token = await auth.checkBearerToken()
+    if (token) {
+      const { user, error } = await panoptesJS.auth.decodeJWT(token)
+      if (user) {
+        return user
+      }
+      if (error) {
+        throw error
+      }
+    }
     return await auth.checkCurrent()
   } catch (error) {
     console.log(error)
     return null
   }
 }
 
-export default function usePanoptesUser(key) {
+export default function usePanoptesUser(key = 'no-user') {
   const { data } = useSWR(key, fetchPanoptesUser, SWRoptions)
   return data
 }

packages/app-project/stores/User/User.js

@@ -1,5 +1,5 @@
 import asyncStates from '@zooniverse/async-states'
-import { applySnapshot, flow, types } from 'mobx-state-tree'
+import { applySnapshot, flow, getSnapshot, types } from 'mobx-state-tree'
 import auth from 'panoptes-client/lib/auth'
 
 import Collections from './Collections'
@@ -53,7 +53,10 @@ const User = types
     },
 
     set(user) {
+      const newUser = self.id !== user?.id
+      const { personalization } = getSnapshot(self)
       const userSnapshot = {
+        personalization,
         ...user,
         loadingState: asyncStates.success
       }
@@ -64,7 +67,7 @@ const User = types
         current_user_roles: 'owner,collaborator,contributor'
       })
       if (self.id) {
-        self.personalization.load()
+        self.personalization.load(newUser)
       }
     }
   }))

packages/app-project/stores/User/User.spec.js

@@ -1,21 +1,80 @@
 import asyncStates from '@zooniverse/async-states'
+import * as client from '@zooniverse/panoptes-js'
 import { expect } from 'chai'
+import { when } from 'mobx'
 import { getSnapshot } from 'mobx-state-tree'
+import nock from 'nock'
 import sinon from 'sinon'
 
 import Store from '@stores/Store'
 import initStore from '@stores/initStore'
-import placeholderEnv from '@stores/helpers/placeholderEnv'
-
-const user = {
-  display_name: 'Jean-Luc Picard',
-  id: '1',
-  login: 'zootester1'
-}
 
 describe('stores > User', function () {
-  let rootStore = Store.create({}, placeholderEnv)
-  let userStore = rootStore.user
+  const user = {
+    display_name: 'Jean-Luc Picard',
+    id: '1',
+    login: 'zootester1'
+  }
+  let rootStore
+  let userStore
+
+  beforeEach(function () {
+    nock('https://panoptes-staging.zooniverse.org/api')
+    .persist()
+    .get('/users/1/recents')
+    .query(true)
+    .reply(200, { recents: [] })
+    .get('/users/2/recents')
+    .query(true)
+    .reply(200, { recents: [] })
+    .get('/collections')
+    .query(true)
+    .reply(200, { collections: [] })
+
+    nock('https://panoptes-staging.zooniverse.org/api')
+    .get('/project_preferences?project_id=1&user_id=1&http_cache=true')
+    .reply(200, {
+      project_preferences: [
+        { activity_count: 23 }
+      ]
+    })
+    .get('/project_preferences?project_id=1&user_id=1&http_cache=true')
+    .reply(200, {
+      project_preferences: [
+        { activity_count: 25 }
+      ]
+    })
+    .get('/project_preferences?project_id=1&user_id=2&http_cache=true')
+    .reply(200, {
+      project_preferences: [
+        { activity_count: 27 }
+      ]
+    })
+
+    nock('https://talk-staging.zooniverse.org')
+    .persist()
+    .get('/conversations')
+    .query(true)
+    .reply(200, { conversations: [] })
+    .get('/notifications')
+    .query(true)
+    .reply(200, { notifications: [] })
+
+    nock('https://graphql-stats.zooniverse.org')
+    .persist()
+    .post('/graphql')
+    .reply(200, { data: { statsCount: [] }})
+
+    rootStore = Store.create({ project: {
+      id: '1',
+      loadingState: asyncStates.success
+    }}, { client })
+    userStore = rootStore.user
+  })
+
+  afterEach(function () {
+    nock.cleanAll()
+  })
 
   it('should exist', function () {
     expect(userStore).to.be.ok()
@@ -33,15 +92,48 @@ describe('stores > User', function () {
     expect(userStore.display_name).to.equal(user.display_name)
   })
 
-  it('should clear the user', function () {
+  it('should clear the user', async function () {
+    userStore.set(user)
     expect(userStore.id).to.equal(user.id)
     expect(userStore.login).to.equal(user.login)
     expect(userStore.display_name).to.equal(user.display_name)
+    await when(() => userStore.loadingState === asyncStates.success)
 
     userStore.clear()
 
     expect(userStore.id).to.be.null()
     expect(userStore.login).to.be.null()
     expect(userStore.display_name).to.be.null()
   })
+
+  describe('with an existing user session', function () {
+
+    it('should refresh project preferences for the same user', async function () {
+      userStore.set(user)
+      const { personalization } = userStore
+
+      expect(userStore.id).to.equal(user.id)
+      await when(() => personalization.projectPreferences.loadingState === asyncStates.success)
+
+      userStore.set(user)
+      expect(userStore.personalization.projectPreferences.loadingState).to.equal(asyncStates.success)
+      expect(rootStore.appLoadingState).to.equal(asyncStates.success)
+    })
+
+    it('should load project preferences for new users', async function () {
+      userStore.set(user)
+      const { personalization } = userStore
+
+      expect(userStore.id).to.equal(user.id)
+      await when(() => personalization.projectPreferences.loadingState === asyncStates.success)
+
+      userStore.set({
+        display_name: 'Worf',
+        id: '2',
+        login: 'zootester2'
+      })
+      expect(userStore.personalization.projectPreferences.loadingState).to.equal(asyncStates.loading)
+      expect(rootStore.appLoadingState).to.equal(asyncStates.loading)
+    })
+  })
 })

packages/app-project/stores/User/UserPersonalization/UserPersonalization.js

@@ -66,10 +66,14 @@ const UserPersonalization = types
         }
       },
 
-      load() {
+      load(newUser = true) {
         self.notifications.fetchAndSubscribe()
-        self.projectPreferences.fetchResource()
         self.stats.fetchDailyCounts()
+        if (newUser) {
+          self.projectPreferences.fetchResource()
+        } else {
+          self.projectPreferences.refreshSettings()
+        }
       },
 
       reset() {

packages/lib-classifier/package.json

@@ -52,7 +52,7 @@
   },
   "peerDependencies": {
     "@zooniverse/grommet-theme": "3.x.x",
-    "@zooniverse/panoptes-js": "~0.3.0",
+    "@zooniverse/panoptes-js": "~0.4.0",
     "@zooniverse/react-components": "~1.x.x",
     "grommet": "~2.x.x",
     "grommet-icons": "~4.x.x",
@@ -79,7 +79,7 @@
     "@visx/mock-data": "~3.0.0",
     "@wojtekmaj/enzyme-adapter-react-17": "~0.8.0",
     "@zooniverse/grommet-theme": "~3.1.0",
-    "@zooniverse/panoptes-js": "~0.3.0",
+    "@zooniverse/panoptes-js": "~0.4.0",
     "@zooniverse/react-components": "~1.5.0",
     "@zooniverse/standard": "~2.0.0",
     "babel-loader": "~9.1.0",