rendering app from withing an auth/http wrapper

src/app/App.tsx

@@ -2,72 +2,44 @@ import { useState } from 'react'
 import reactLogo from '../assets/react.svg'
 import viteLogo from '/vite.svg'
 import './App.css'
-import { Auth0Provider } from '@auth0/auth0-react'
+import { useUserAPI } from '../providers/pond/userAPI'
+import { useAuth0 } from '@auth0/auth0-react'
 import { or } from '../utils/types'
-import AuthWrapper from '../providers/auth'
-import HTTPProvider from '../providers/http'
-// import { useUserAPI } from '../providers/pond/userAPI'
-// import LoginButton from '../providers/LoginButton'
 
 function App() {
   const [count, setCount] = useState(0)
-  // const userAPI = useUserAPI();
+  const userAPI = useUserAPI();
+  const useAuth = useAuth0();
 
-  let url: string | undefined = window.location.origin;
+  let user_id = or(useAuth.user?.sub, "")
-  let audience: string | undefined;
+//   console.log("User ID: ", user_id)
-  if (window.location.origin === "https://staging.brandxtech.ca") {
-    url = import.meta.env.VITE_AUTH0_CLIENT_STAGING_DOMAIN;
-    audience = import.meta.env.VITE_AUTH0_STAGING_AUDIENCE;
-  } else {
-    url = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
-    audience = import.meta.env.VITE_AUTH0_AUDIENCE;
-  }
 
-  let client_id = import.meta.env.VITE_AUTH0_BXT_CLIENT_ID;
+  if (user_id.length > 1) userAPI.getUser(user_id).then(resp => {
-
+    console.log(resp)
-  console.log(url) 
+  })
-  // console.log(audience) 
 
   return (
-    <Auth0Provider
+    <><div>
-      domain={or(url, "")}
+        <a href="https://vitejs.dev" target="_blank">
-      clientId={or(client_id, "")}
+            <img src={viteLogo} className="logo" alt="Vite logo" />
-      authorizationParams={{
+        </a>
-        audience: or(audience, ""),
+        <a href="https://react.dev" target="_blank">
-        redirect_uri: window.location.origin + "/callback"
+            <img src={reactLogo} className="logo react" alt="React logo" />
-      }}
+        </a>
-      useRefreshTokens={true}
+      </div>
-      cacheLocation='localstorage'
+      <h1>Vite + React</h1>
-    >
+      <div className="card">
-      <AuthWrapper>
+        <button onClick={() => setCount((count) => count + 1)}>
-        <HTTPProvider>
+            count is {count}
-
+        </button>
-          {/* <LoginButton/> */}
+        <p>
-          <div>
+            The new Adaptive App
-            <a href="https://vitejs.dev" target="_blank">
+        </p>
-              <img src={viteLogo} className="logo" alt="Vite logo" />
+        </div><p className="read-the-docs">
-            </a>
-            <a href="https://react.dev" target="_blank">
-              <img src={reactLogo} className="logo react" alt="React logo" />
-            </a>
-          </div>
-          <h1>Vite + React</h1>
-          <div className="card">
-            <button onClick={() => setCount((count) => count + 1)}>
-              count is {count}
-            </button>
-            <p>
-              The new Adaptive App
-            </p>
-          </div>
-          <p className="read-the-docs">
             Coming soon
-          </p>
+        </p>
-        </HTTPProvider>
+    </>
-      </AuthWrapper>
-      
-    </Auth0Provider>
   )
 }
 
-export default App
+export default App

src/app/AuthHTTPWrapper.tsx

@@ -0,0 +1,41 @@
+import { Auth0Provider } from '@auth0/auth0-react'
+import { or } from '../utils/types'
+import AuthWrapper from '../providers/auth'
+import HTTPProvider from '../providers/http'
+import App from './App'
+
+function AuthHTTPWrapper() {
+
+  let url: string | undefined = window.location.origin;
+  let audience: string | undefined;
+  if (window.location.origin === "https://staging.brandxtech.ca") {
+    url = import.meta.env.VITE_AUTH0_CLIENT_STAGING_DOMAIN;
+    audience = import.meta.env.VITE_AUTH0_STAGING_AUDIENCE;
+  } else {
+    url = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
+    audience = import.meta.env.VITE_AUTH0_AUDIENCE;
+  }
+
+  let client_id = import.meta.env.VITE_AUTH0_BXT_CLIENT_ID;
+
+  return (
+    <Auth0Provider
+      domain={or(url, "")}
+      clientId={or(client_id, "")}
+      authorizationParams={{
+        audience: or(audience, ""),
+        redirect_uri: window.location.origin + "/callback"
+      }}
+      useRefreshTokens={true}
+      cacheLocation='localstorage'
+    >
+      <AuthWrapper>
+        <HTTPProvider>
+          <App/>
+        </HTTPProvider>
+      </AuthWrapper>
+    </Auth0Provider>
+  )
+}
+
+export default AuthHTTPWrapper

src/app/main.tsx

@@ -1,10 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
 import './index.css'
+import AuthHTTPWrapper from './AuthHTTPWrapper.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <AuthHTTPWrapper />
   </StrictMode>,
 )

src/providers/auth.tsx

@@ -4,7 +4,7 @@ import { PropsWithChildren, useEffect } from "react";
 
 export default function AuthWrapper(props: PropsWithChildren<{}>) {
     const { children } = props;
-    const { isLoading, loginWithRedirect, isAuthenticated, user } = useAuth0();
+    const { isLoading, loginWithRedirect, isAuthenticated } = useAuth0();
 
     useEffect(() => {
         // console.log("Authenticated: ", isAuthenticated)

src/providers/pond/pond.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 import UserProvider, { useUserAPI } from "./userAPI";
 
 export const pondURL = (partial: string, demo: boolean = false): string => {
-  let url = process.env.REACT_APP_API_URL + (demo ? "/demo" : "") + partial;
+  let url = import.meta.env.REACT_APP_API_URL + (demo ? "/demo" : "") + partial;
   // if (isStaging()) url = process.env.REACT_APP_STAGING_API_URL + (demo ? "/demo" : "") + partial;
   return url;
 };