Merge pull request #2309 from stakwork/fix/login-private-graph

fix: authentication for private graph

src/components/App/Splash/SpiningSphere/index.tsx

@@ -1,20 +1,33 @@
-import Lottie from 'react-lottie'
+import lottie, { AnimationItem } from 'lottie-web'
 import { Flex } from '~/components/common/Flex'
+
+import { useEffect, useRef } from 'react'
 import preloadData from './preloader.json'
 
-export const SphereAnimation = () => (
-  <Flex style={{ width: '167px', height: '167px', opacity: 0.5 }}>
-    <Lottie
-      height={167}
-      options={{
+export const SphereAnimation = () => {
+  const lottieRef = useRef<AnimationItem | null>(null)
+
+  useEffect(() => {
+    const container = document.getElementById('lottie-sphere-animation')
+
+    if (container) {
+      lottieRef.current = lottie.loadAnimation({
+        container,
+        animationData: preloadData,
         loop: true,
         autoplay: true,
-        animationData: preloadData,
         rendererSettings: {
           preserveAspectRatio: 'xMidYMid slice',
         },
-      }}
-      width={167}
-    />
-  </Flex>
-)
+      })
+    }
+
+    return () => {
+      if (lottieRef.current) {
+        lottieRef.current.destroy()
+      }
+    }
+  }, [])
+
+  return <Flex id="lottie-sphere-animation" style={{ width: '167px', height: '167px', opacity: 0.5 }} />
+}

src/components/App/Splash/index.tsx

@@ -8,9 +8,9 @@ import { getAboutData, getStats } from '~/network/fetchSourcesData'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { colors, formatSplashMessage, formatStatsResponse } from '~/utils'
-import { SphereAnimation } from './SpiningSphere'
 import { AnimatedTextContent } from './animated'
-import { Message, initialMessageData } from './constants'
+import { initialMessageData, Message } from './constants'
+import { SphereAnimation } from './SpiningSphere'
 
 export const Splash = () => {
   const [message, setMessage] = useState<Message>(initialMessageData)
@@ -61,7 +61,9 @@ export const Splash = () => {
     }
 
     return () => {
-      clearInterval(intervalId)
+      if (intervalId) {
+        clearInterval(intervalId)
+      }
     }
   }, [appMetaData, fetchData, isFetching, message, stats])
 

src/components/AppContainer/index.tsx

@@ -1,20 +1,16 @@
 import { lazy, Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
-import { useDataStore } from '~/stores/useDataStore'
 import { E2ETests } from '~/utils'
 import { AppProviders } from '../App/Providers'
-import { Splash } from '../App/Splash'
 import { AuthGuard } from '../Auth'
 
 const LazyApp = lazy(() => import('../App').then(({ App }) => ({ default: App })))
 
 export const AppContainer = () => {
   const App = <LazyApp />
-  const { splashDataLoading } = useDataStore((s) => s)
 
   return (
     <AppProviders>
-      {splashDataLoading && <Splash />}
       <Suspense fallback={<div>Loading...</div>}>
         <AuthGuard>
           <Routes>

src/components/Auth/__tests__/index.tsx

@@ -142,7 +142,17 @@ describe('Auth Component', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     sphinx.enable.mockResolvedValue({ pubkey: 'testPubkey' })
-    getIsAdminMock.mockResolvedValue({ data: { isAdmin: false, isPublic: false, isMember: false } })
+
+    getIsAdminMock.mockRejectedValue({
+      response: {
+        status: 401,
+        data: {
+          status: 'error',
+          message: 'Permission denied',
+        },
+      },
+    })
+
     getSignedMessageFromRelayMock.mockResolvedValue({ message: 'testMessage', signature: 'testSignature' })
 
     render(
@@ -157,7 +167,13 @@ describe('Auth Component', () => {
       </MemoryRouter>,
     )
 
-    await waitFor(() => expect(screen.getByText(message)).toBeInTheDocument())
+    await waitFor(() => {
+      expect(getIsAdminMock).toHaveBeenCalled()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(message)).toBeInTheDocument()
+    })
   })
 
   test.skip('the unauthorized state is correctly set when the user lacks proper credentials', async () => {

src/components/Auth/index.tsx

@@ -5,15 +5,19 @@ import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { isDevelopment, isE2E } from '~/constants'
 import { getIsAdmin } from '~/network/auth'
+import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { sphinxBridge } from '~/testSphinxBridge'
 import { updateBudget } from '~/utils'
 import { isAndroid, isWebView } from '~/utils/isWebView'
+import { Splash } from '../App/Splash'
 
 export const AuthGuard = ({ children }: PropsWithChildren) => {
   const [unAuthorized, setUnauthorized] = useState(false)
   const { setBudget, setIsAdmin, setPubKey, setIsAuthenticated } = useUserStore((s) => s)
+  const { splashDataLoading } = useDataStore((s) => s)
+  const [renderMainPage, setRenderMainPage] = useState(false)
 
   const [
     setTrendingTopicsFeatureFlag,
@@ -62,12 +66,6 @@ export const AuthGuard = ({ children }: PropsWithChildren) => {
     try {
       const res = await getIsAdmin()
 
-      if (!res.data.isPublic && !res.data.isAdmin && !res.data.isMember) {
-        setUnauthorized(true)
-
-        return
-      }
-
       if (res.data) {
         localStorage.setItem('admin', JSON.stringify({ isAdmin: res.data.isAdmin }))
 
@@ -80,8 +78,10 @@ export const AuthGuard = ({ children }: PropsWithChildren) => {
       }
 
       setIsAuthenticated(true)
+      setRenderMainPage(true)
     } catch (error) {
       /* not an admin */
+      setUnauthorized(true)
     }
   }, [
     setIsAuthenticated,
@@ -125,7 +125,12 @@ export const AuthGuard = ({ children }: PropsWithChildren) => {
     )
   }
 
-  return <>{children}</>
+  return (
+    <>
+      {splashDataLoading && <Splash />}
+      {renderMainPage && children}
+    </>
+  )
 }
 
 const StyledText = styled(Text)`

src/utils/getSignedMessage/index.ts

@@ -35,7 +35,11 @@ export async function getSignedMessageFromRelay(): Promise<{ message: string; si
           .then((storedLsat: any) => {
             signingPromise = null // Reset the promise after it's resolved
 
-            const response = { message, signature: storedLsat.signature }
+            if (!storedLsat) {
+              return { message: '', signature: '' }
+            }
+
+            const response = { message, signature: storedLsat?.signature || '' }
 
             storeSignatureInLocalStorage({ ...response })