getting token in auth wrapper and redirecting if it's no longer valid

src/app/AuthHTTPWrapper.tsx

@@ -6,7 +6,7 @@ import App from './App'
 import { useState } from 'react'
 
 function AuthHTTPWrapper() {
-  const [gotToken, setGotToken] = useState(false)
+  const [token, setToken] = useState<string | undefined>(undefined)
 
   let url: string | undefined = window.location.origin;
   let audience: string | undefined;
@@ -31,14 +31,14 @@ function AuthHTTPWrapper() {
       useRefreshTokens={true}
       cacheLocation='localstorage'
     >
-      <AuthWrapper>
+      <AuthWrapper setToken={setToken}>
-        <HTTPProvider setGotToken={setGotToken}>
+        { token ? 
-          {gotToken ? 
+          <HTTPProvider token={token}>
             <App/>
-            :
-            <p>hi</p>
-          }
           </HTTPProvider>
+        :
+          <p>no token</p>
+        }
       </AuthWrapper>
     </Auth0Provider>
   )

src/providers/auth.tsx

@@ -1,19 +1,34 @@
 import { useAuth0 } from "@auth0/auth0-react";
-import { PropsWithChildren, useEffect } from "react";
+import { PropsWithChildren, useEffect, useState } from "react";
 
+interface Props extends PropsWithChildren<any>{
+    setToken: React.Dispatch<React.SetStateAction<string | undefined>>
+}
 
-export default function AuthWrapper(props: PropsWithChildren<{}>) {
+export default function AuthWrapper(props: Props) {
-    const { children } = props;
+    const { children, setToken } = props;
-    const { isLoading, loginWithRedirect, isAuthenticated } = useAuth0();
+    const { isLoading, loginWithRedirect, isAuthenticated, getAccessTokenSilently } = useAuth0();
     
     useEffect(() => {
-        // console.log("Authenticated: ", isAuthenticated)
-        // console.log("Loading: ", isLoading)
         if (!isAuthenticated && !isLoading) {
             loginWithRedirect();
         }
     }, [isAuthenticated, loginWithRedirect, isLoading]);
 
+    useEffect(() => {
+        if (isAuthenticated) getAccessTokenSilently().then(t => {
+            if (t.length < 1) {
+                loginWithRedirect()
+            } else {
+
+            }
+            setToken(t)
+        }).catch(() => {
+            // No token, go back to login
+            loginWithRedirect()
+        })
+      }, [setToken, isAuthenticated])
+
     if (isAuthenticated) return (
         children
     )

src/providers/http.tsx

@@ -6,7 +6,7 @@ import { createContext, PropsWithChildren, useContext, useEffect, useState } fro
 // import GitlabProvider from "./gitlab";
 import PondProvider from "./pond/pond";
 // import SecurityProvider from "./security";
-import { useAuth0 } from "@auth0/auth0-react";
+// import { useAuth0 } from "@auth0/auth0-react";
 
 interface IHTTPContext {
   get: <T>(url: string, spreadOptions?: AxiosRequestConfig) => Promise<AxiosResponse<T>>;
@@ -25,24 +25,24 @@ interface IHTTPContext {
 }
 
 interface Props extends PropsWithChildren<any>{
-  setGotToken: React.Dispatch<React.SetStateAction<boolean>>;
+  token: string;
 }
 
 export const HTTPContext = createContext<IHTTPContext>({} as IHTTPContext);
 
 export default function HTTPProvider(props: Props) {
-  const { children, setGotToken } = props;
+  const { children, token } = props;
-  const { isAuthenticated, /*token,*/ getAccessTokenSilently } = useAuth0();
+  // const { isAuthenticated, /*token,*/ getAccessTokenSilently } = useAuth0();
-  const [token, setToken] = useState("");
+  // const [token, setToken] = useState("");
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (isAuthenticated) getAccessTokenSilently().then(t => {
+  //   if (isAuthenticated) getAccessTokenSilently().then(t => {
-      console.log(t)
+  //     console.log(t)
-      setToken(t)
+  //     setToken(t)
-    }).finally(() => {
+  //   }).finally(() => {
-      setGotToken(true)
+  //     setGotToken(true)
-    })
+  //   })
-  }, [setToken, isAuthenticated])
+  // }, [setToken, isAuthenticated])
 
   const defaultOptions = (demo: boolean = false) => {
     // if (demo || !isAuthenticated || !token) {
@@ -63,7 +63,7 @@ export default function HTTPProvider(props: Props) {
       headers: { 
         Authorization: `Bearer ${token}`,
         "Content-Type": "application/json"
-      }
+      },
     };
     return config;
   };