Set default token dynamically in the browser

zooniverse · Oct 23, 2024 · fa6b682 · fa6b682
1 parent 4d181ec
commit fa6b682
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 46 deletions.
diff --git a/packages/lib-user/src/hooks/usePanoptesAuthToken.js b/packages/lib-user/src/hooks/usePanoptesAuthToken.js
@@ -1,23 +1,35 @@
-import auth from "panoptes-client/lib/auth";
-import { useState } from "react";
+import auth from "panoptes-client/lib/auth"
+import { useState } from "react"
 
-const isBrowser = typeof window !== "undefined";
+const isBrowser = typeof window !== "undefined"
 
-if (isBrowser) {
-  auth.checkCurrent();
-}
+let defaultToken
+/*
+  Top-level await in modules has been supported in Node
+  and in all browsers since 2021. However, ES modules are still
+  not supported in the monorepo. An immediately-invoked async
+  function is a workaround when top-level await is not supported.
+  https://v8.dev/features/top-level-await
+*/
+(async function getDefaultToken() {
+  defaultToken = null
+  if (isBrowser) {
+    await auth.checkCurrent()
+    defaultToken = await auth.checkBearerToken()
+  }
+})()
 
 export default function usePanoptesAuthToken() {
-  const [token, setToken] = useState(null);
+  const [token, setToken] = useState(defaultToken)
 
   async function fetchPanoptesAuthToken() {
-    await auth.checkCurrent();
-    const newToken = await auth.checkBearerToken();
+    await auth.checkCurrent()
+    const newToken = await auth.checkBearerToken()
     if (newToken !== token) {
-      setToken(newToken);
+      setToken(newToken)
     }
   }
 
-  fetchPanoptesAuthToken();
-  return token;
+  fetchPanoptesAuthToken()
+  return token
 }
diff --git a/packages/lib-user/src/hooks/usePanoptesMemberships.js b/packages/lib-user/src/hooks/usePanoptesMemberships.js
@@ -1,11 +1,8 @@
 import { panoptes } from '@zooniverse/panoptes-js'
-import auth from 'panoptes-client/lib/auth'
 import useSWR from 'swr'
 
 import usePanoptesAuthToken from './usePanoptesAuthToken'
 
-const isBrowser = typeof window !== 'undefined'
-
 const SWROptions = {
   revalidateIfStale: true,
   revalidateOnMount: true,
@@ -14,10 +11,6 @@ const SWROptions = {
   refreshInterval: 0
 }
 
-if (isBrowser) {
-  auth.checkCurrent()
-}
-
 async function fetchMemberships({ query, token }) {
   const authorization = `Bearer ${token}`
   if (!token) return null 

diff --git a/packages/lib-user/src/hooks/usePanoptesProjects.js b/packages/lib-user/src/hooks/usePanoptesProjects.js
@@ -1,11 +1,8 @@
 import { projects as panoptesProjects } from '@zooniverse/panoptes-js'
-import auth from 'panoptes-client/lib/auth'
 import useSWR from 'swr'
 
 import usePanoptesAuthToken from './usePanoptesAuthToken'
 
-const isBrowser = typeof window !== 'undefined'
-
 const SWROptions = {
   revalidateIfStale: true,
   revalidateOnMount: true,
@@ -14,10 +11,6 @@ const SWROptions = {
   refreshInterval: 0
 }
 
-if (isBrowser) {
-  auth.checkCurrent()
-}
-
 async function fetchProjects({ query, token }) {
   const authorization = token ? `Bearer ${token}` : undefined
 

diff --git a/packages/lib-user/src/hooks/usePanoptesUser.js b/packages/lib-user/src/hooks/usePanoptesUser.js
@@ -4,8 +4,6 @@ import useSWR from 'swr'
 
 import usePanoptesAuthToken from './usePanoptesAuthToken'
 
-const isBrowser = typeof window !== 'undefined'
-
 const SWROptions = {
   revalidateIfStale: true,
   revalidateOnMount: true,
@@ -14,10 +12,6 @@ const SWROptions = {
   refreshInterval: 0
 }
 
-if (isBrowser) {
-  auth.checkCurrent()
-}
-
 async function getUser({ query, token }) {
   const authorization = `Bearer ${token}`
 

diff --git a/packages/lib-user/src/hooks/usePanoptesUserGroup.js b/packages/lib-user/src/hooks/usePanoptesUserGroup.js
@@ -1,11 +1,8 @@
 import { panoptes } from '@zooniverse/panoptes-js'
-import auth from 'panoptes-client/lib/auth'
 import useSWR from 'swr'
 
 import usePanoptesAuthToken from './usePanoptesAuthToken'
 
-const isBrowser = typeof window !== 'undefined'
-
 const SWROptions = {
   revalidateIfStale: true,
   revalidateOnMount: true,
@@ -14,10 +11,6 @@ const SWROptions = {
   refreshInterval: 0
 }
 
-if (isBrowser) {
-  auth.checkCurrent()
-}
-
 async function fetchPanoptesUserGroup({ groupId, token }) {
   const authorization = token ? `Bearer ${token}` : undefined
 

diff --git a/packages/lib-user/src/hooks/useStats.js b/packages/lib-user/src/hooks/useStats.js
@@ -1,12 +1,9 @@
 import { env } from '@zooniverse/panoptes-js'
-import auth from 'panoptes-client/lib/auth'
 import useSWR from 'swr'
 import usePanoptesAuthToken from './usePanoptesAuthToken'
 
 const defaultEndpoint = '/classifications/users'
 
-const isBrowser = typeof window !== 'undefined'
-
 const SWROptions = {
   revalidateIfStale: true,
   revalidateOnMount: true,
@@ -15,10 +12,6 @@ const SWROptions = {
   refreshInterval: 0
 }
 
-if (isBrowser) {
-  auth.checkCurrent()
-}
-
 function statsHost(env) {
   switch (env) {
     case 'production':