nice auth flow working with verification and stuff with token

packages/desktop/src/components/ProtectedRoute/index.tsx

@@ -1,49 +1,49 @@
+import { useAuthCheck, useLogin } from "../../controller/index";
+
 import { $authTokens } from "../../controller/recoil";
 import Login from "../../pages/Login";
 import NirvanaApi from "../../controller/nirvanaApi";
 import { STORE_ITEMS } from "../../electron/constants";
 import SkeletonLoader from "../loading/skeleton";
 import { useEffect } from "react";
-import { useLogin } from "../../controller/index";
-import { useRecoilValue } from "recoil";
 
 export default function ProtectedRoute({
   children,
 }: {
   children?: React.ReactNode;
 }) {
-  const { mutateAsync } = useLogin();
+  const { isLoading, isError, isSuccess, refetch } = useAuthCheck();
 
   useEffect(() => {
     // on load of this, if we already have jwt tokens in store,
-    // then try using them with auth check, and if successful with simple dime call, then let them continue
+    // then try using them with auth check
     window.electronAPI.store
       .get(STORE_ITEMS.AUTH_SESSION_JWT)
       .then((jwtToken: string) => {
         if (jwtToken) {
-          // todo use this to do an auth check...set the necessary things to make react query run the check
-          // check if the jwt token is good
-
-          // then pass onto the api and such
-
           NirvanaApi._jwtToken = jwtToken;
+          refetch();
         }
       });
   }, []);
 
-  return <Login />;
+  if (isLoading) {
+    return (
+      <div className="container h-screen w-screen flex flex-col justify-center mx-10">
+        <SkeletonLoader />
+      </div>
+    );
+  }
 
-  // if (isLoading || isIdle)
-  //   return (
-  //     <div className="container h-screen w-screen flex flex-col justify-center mx-10">
-  //       <SkeletonLoader />
-  //     </div>
-  //   );
-
-  // if (isError) {
-  //   return <Login />;
-  // }
+  if (isError) {
+    return <Login />;
+  }
 
   // if we can successfully get user details, we are good to continue
-  return <>{children}</>;
+  // basic auth...any additional auth should be done at lower levels
+  if (isSuccess) {
+    return <>{children}</>;
+  }
+
+  return <Login />;
 }

packages/desktop/src/controller/index.tsx

@@ -1,10 +1,12 @@
-import NirvanaApi, { login } from "./nirvanaApi";
+import NirvanaApi, { authCheck, login } from "./nirvanaApi";
 import { useMutation, useQuery } from "react-query";
 
-import { $authTokens } from "./recoil";
-import { useRecoilValue } from "recoil";
-
 // ====== QUERIES
+export function useAuthCheck() {
+  return useQuery("AUTH_CHECK", authCheck, {
+    retry: false,
+  });
+}
 
 export function useLogin() {
   return useMutation("LOGIN", login, {});

packages/desktop/src/controller/nirvanaApi.ts

@@ -20,6 +20,9 @@ export default class NirvanaApi {
       const fullUrl = localHost + url;
 
       let res;
+      if (privateRoute && !this._jwtToken)
+        throw Error("No jwt token available!");
+
       if (privateRoute && this._jwtToken) {
         res = await fetch(fullUrl, {
           method: method,
@@ -36,10 +39,8 @@ export default class NirvanaApi {
       }
 
       return await res.json();
-    } catch (error) {
+    } catch (error: any) {
       console.log(error);
-
-      throw Error(error);
     }
   }
 }
@@ -55,6 +56,6 @@ export async function login(reqLoginTokens: {
   );
 }
 
-export async function authCheck(jwtToken: string) {
-  return await NirvanaApi.fetch(`/user/authCheck`, "GET", true);
+export async function authCheck(): Promise<void> {
+  return await NirvanaApi.fetch(`/user/authcheck`, "GET", true);
 }

packages/desktop/src/pages/Login/index.tsx

@@ -41,6 +41,8 @@ export default function Login() {
         const { jwtToken, userDetails } = loginResponse;
 
         window.electronAPI.store.set(STORE_ITEMS.AUTH_SESSION_JWT, jwtToken);
+
+        window.location.reload();
       }
     );