getting user in app

src/app/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import reactLogo from '../assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
@@ -8,15 +8,28 @@ import { or } from '../utils/types'
 
 function App() {
   const [count, setCount] = useState(0)
+  const [loading, setLoading] = useState(false)
   const userAPI = useUserAPI();
   const useAuth = useAuth0();
 
   let user_id = or(useAuth.user?.sub, "")
 //   console.log("User ID: ", user_id)
 
-  if (user_id.length > 1) userAPI.getUser(user_id).then(resp => {
-    console.log(resp)
-  })
+//   if (user_id.length > 1) {
+
+//     userAPI.getUser(user_id).then(resp => {
+//         console.log(resp)
+//     })
+//   } 
+  useEffect(() => {
+    if (loading) return;
+    setLoading(true)
+    userAPI.getUser(user_id).then(resp => {
+        console.log(resp)
+    }).finally(() => {
+        setLoading(false)
+    })
+  }, [])
 
   return (
     <><div>

src/app/AuthHTTPWrapper.tsx

@@ -3,8 +3,10 @@ import { or } from '../utils/types'
 import AuthWrapper from '../providers/auth'
 import HTTPProvider from '../providers/http'
 import App from './App'
+import { useState } from 'react'
 
 function AuthHTTPWrapper() {
+  const [gotToken, setGotToken] = useState(false)
 
   let url: string | undefined = window.location.origin;
   let audience: string | undefined;
@@ -30,8 +32,12 @@ function AuthHTTPWrapper() {
       cacheLocation='localstorage'
     >
       <AuthWrapper>
-        <HTTPProvider>
-          <App/>
+        <HTTPProvider setGotToken={setGotToken}>
+          {gotToken ? 
+            <App/>
+            :
+            <p>hi</p>
+          }
         </HTTPProvider>
       </AuthWrapper>
     </Auth0Provider>