Investigation: do we still need Panoptes JavaScript Client (PJC)?

[shaunanoordin]

Investigation

Question: do we still need the old panoptes-javascript-client (aka PJC) in FEM? If so, why, and where?

Context:

• As of 21 Mar 2024, we're still using PJC (which was previously use for PFE and several custom front ends) in parts of our FEM code.
• However, we also have Panoptes.JS (aka lib-panoptes-js) which was intended to replace PJC.
• So what's still missing from Panoptes.JS?

Additional reading (for nerds):

• ADR 3 explains our impetus to design a new auth client (Panoptes.JS) to replace PJC
• ADR 21 expands on the design of Panoptes.JS, with some references to issue #1306 (as of writing, server-side auth still hasn't been implemented, AFAIK)
• Mark's notes on "Why is lib-user auth agnostic?"

Current PJC Use

The following indicates where PJC is still used in the FEM code, as of 21 Mar 2024.

app-content-pages

• auth.signOut() is used in PageHeader
• (PJC is also used in PageHeader's tests, but I'll ignore any instance of PJC in .spec.js files from here on.)

app-project

• auth.signOut() is used in PageHeader
• auth.checkBearerToken() is used in usePanoptesAuth.js
• auth.checkBearerToken() and auth.checkCurrent() are used in usePanoptesUser.js
• sugarClient.subscribeTo()/unsubscribeFrom() are used in useSugarProject.js
• PJC's auth is passed down to the Classifier, on ClassifierWrapper.js
• auth.checkBearerToken() is used in checkRetiredStatus.js
• auth.checkBearerToken() is used in Collections.js
• auth.checkBearerToken() is used in Recents.js
• auth.checkBearerToken() and sugarClient are used in Notifications.js
• auth.checkBearerToken() is used in UserProjectPreferences.js
• auth.checkBearerToken() is used in YourStats.js

(You know, I think I'm starting to detect a pattern here.)

app-root

• auth is passed down as the "authClient" in the Next.js pages: GroupPage, MyGroupsPage, UserStatsPage.
• auth.signOut() is used in PageHeader

lib-async-states: no PJC here

lib-classifier

• oauth is used in the dev server
• Deep dive:
  • (authClient).checkCurrent() is used in RootStore.js
  • (authClient).checkBearerToken() is used in models/Annotation.js
  • (authClient).checkBearerToken() is used in utils/getBearerToken.js

lib-grommet-theme: no PJC here

lib-panoptes-js: no PJC here, obviously. This is Panoptes.js!

lib-react-components

• auth.signIn() is used in LoginFormContainer.js
• auth.register() is used in RegisterFormContainer.js
• auth.checkBearerToken() is used in fetchPanoptesUser.js
• auth.checkCurrent(), auth.listen('change'), and auth.stopListening('change') are used in usePanoptesUser.js
• auth.checkCurrent() and auth.checkBearerToken() are used in useUnreadMessages.js
• auth.checkCurrent() and auth.checkBearerToken() are used in useUnreadNotifications.js

lib-user

• oauth is used in the dev server.
  • Note that once #5992 is merged, this will change to: auth.checkCurrent(), auth.listen('change'), and auth.stopListening('change') are used in the dev server
• Deep dive:
  • (authClient).checkBearerToken() is used in utils/getBearerToken.js.

tools-standard: no PJC here

Analysis

The following auth functions exist in PJC, but don't (yet?) exist in Panoptes.js. See PJC's auth.js for the full code.

• auth.checkCurrent(): ⭐ used in multiple instances
• auth.checkBearerToken(): ⭐ used in multiple instances
• auth.signIn() and auth.signOut(): only used on the sign in/out components (the page headers)
• auth.register(): only used in the register user form
• auth.listen('change') and auth.stopListening('change'): only used in lib-react-components to listen for when the user logs in or out.

Compare with Panoptes.js's auth.js code, which only has...

• verify()
• decodeJWT()

oauth is only directly used as "authClient"s passed down to packages in dev servers. Mark's work with lib-user seems to indicate we may be able to replace PJC's oauth with PJC's auth.

I have no idea what to make of the sugarClient. 🤷‍♂️

❗ We now present Shaun arguing with himself about oAuth:

• If PJC's oAuth is never used in our FEM code, then we won't need to build oAuth functionality in Panoptes.JS.
• Hang on. While FEM doesn't need oAuth, other CFEs (example) DO need oAuth functionality.
• The example you've given is really old, and ASM only needs oAuth because it doesn't have a *.zooniverse.org domain name. Newer CFEs such as Community Catalog do have *.zooniverse.org domain names, so they can use PJC's auth
• Is *.zooniverse.org a domain name or a hostname? Should the sentence be "Community Catalog is a subdomain parked under the .zooniverse.org domain"?
• It doesn't matter, stop being pedantic. Point is, we don't need to build oAuth in Panoptes.JS, because nobody uses it.
• You mean for now.

Status

Main investigation complete. Awaiting discussion, to plan further steps for Panoptes.js.