re-implemented JWT auth

app/client/main.tsx

@@ -1,19 +1,24 @@
 import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, from } from '@apollo/client';
+import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
 import { onError } from '@apollo/client/link/error';
+import { Skeleton } from '@chakra-ui/react';
 import '@client/assets/styles/index.css';
 import '@client/assets/styles/nerd-fonts-icons.css';
-import { Provider } from '@client/components/ui/provider';
+import { Provider as ChakraProvider } from '@client/components/ui/provider';
 import { Toaster } from '@client/components/ui/toaster';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
-import { StrictMode, createContext, useState } from 'react';
+import { StrictMode, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom/client';
+import { AuthProvider, useRestAuth } from './hooks/auth';
 
 // TanStackRouter - Import the generated route tree
-import { Session } from 'inspector';
+import { Session } from '@generated/types';
 import { routeTree } from './routeTree.gen';
 
 // Create a new router instance
-const router = createRouter({ routeTree });
+const router = createRouter({
+  routeTree
+});
 
 // Register the router instance for type safety
 declare module '@tanstack/react-router' {
@@ -28,35 +33,63 @@ const isProd = MODE === 'prod';
 
 const HOST = import.meta.env.VITE_HOST || 'localhost';
 const PORT = import.meta.env.VITE_PORT || '3000';
-const uri = `https://${HOST}:${PORT}/graphql`;
-
-// Auth context
-export const AuthContext = createContext<any>(null);
+export const url = `https://${HOST}:${PORT}`;
+const graphql_uri = `${url}/graphql`;
 
 function App() {
   const [authHeaders, setAuthHeaders] = useState<Session | null>(null);
-  const AuthProvider = AuthContext.Provider;
+  const [initialLoading, setInitialLoading] = useState<boolean>(true);
+  const { refreshToken } = useRestAuth();
 
-  // if (authHeaders == null) refreshToken();
+  useEffect(() => {
+    const getPreviousSession = async () => {
+      const session = await refreshToken();
+      if (session !== undefined) setAuthHeaders(session);
+      setInitialLoading(false);
+    };
+    if (initialLoading) getPreviousSession();
+  }, []);
+
+  if (initialLoading)
+    return (
+      <StrictMode>
+        <ChakraProvider>
+          <Skeleton />
+        </ChakraProvider>
+      </StrictMode>
+    );
 
   const httpLink = new HttpLink({
-    uri,
+    uri: graphql_uri,
     credentials: 'include',
     headers: authHeaders != null ? { authorization: JSON.stringify(authHeaders) } : undefined
   });
 
-  const errorLink = onError(({ graphQLErrors, networkError }) => {
-    if (graphQLErrors)
-      graphQLErrors.forEach(({ message, locations, path }) =>
-        console.error(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
-      );
+  const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
+    if (graphQLErrors != null && graphQLErrors.length > 0)
+      graphQLErrors.map(async error => {
+        if (error.message.includes('jwt expired')) {
+          const session = await refreshToken();
+          if (session != undefined) setAuthHeaders(session);
+          return forward(operation);
+        }
+        if (!isProd)
+          console.error(
+            `[GraphQlError]: Message: ${error.message}, Location: ${JSON.stringify(error.locations)}, Path: ${error.path}`
+          );
+      });
 
-    if (networkError) console.error(`[Network error]: ${networkError}`);
+    if (networkError != null && graphQLErrors == null) console.error(networkError);
   });
 
+  if (!isProd) {
+    loadDevMessages();
+    loadErrorMessages();
+  }
+
   const client = new ApolloClient({
-    uri,
-    link: isProd ? undefined : from([errorLink, httpLink]),
+    uri: graphql_uri,
+    link: from([errorLink, httpLink]),
     cache: new InMemoryCache(),
     connectToDevTools: !isProd,
     credentials: 'include'
@@ -66,17 +99,17 @@ function App() {
     <StrictMode>
       <AuthProvider
         value={{
-          authHeaders,
+          headers: authHeaders,
           setHeaders: (session: Session) => {
             setAuthHeaders(session);
           }
         }}
       >
         <ApolloProvider client={client}>
-          <Provider>
+          <ChakraProvider>
             <Toaster />
             <RouterProvider router={router} />
-          </Provider>
+          </ChakraProvider>
         </ApolloProvider>
       </AuthProvider>
     </StrictMode>