dev: route validation on non authenticated pages (#1238)

apps/app/contexts/theme.context.tsx

@@ -5,7 +5,7 @@ import useSWR from "swr";
 // components
 import ToastAlert from "components/toast-alert";
 // hooks
-import useUser from "hooks/use-user";
+import useUserAuth from "hooks/use-user-auth";
 // services
 import projectService from "services/project.service";
 // fetch-keys
@@ -65,7 +65,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
 
 export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { user } = useUser();
+  const { user } = useUserAuth(null);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;

apps/app/hooks/use-user-auth.tsx

@@ -22,7 +22,9 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
     isLoading,
     error,
     mutate,
-  } = useSWR<ICurrentUserResponse>(CURRENT_USER, () => userService.currentUser());
+  } = useSWR<ICurrentUserResponse>(CURRENT_USER, () => userService.currentUser(), {
+    refreshInterval: 0,
+  });
 
   useEffect(() => {
     const handleWorkSpaceRedirection = async () => {
@@ -80,18 +82,23 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
       }
     };
 
-    if (!isLoading) {
+    if (routeAuth === null) {
-      setIsRouteAccess(() => true);
+      setIsRouteAccess(() => false);
-      if (user) {
+      return;
-        if (next_url) router.push(next_url);
+    } else {
-        else handleUserRouteAuthentication();
+      if (!isLoading) {
-      } else {
+        setIsRouteAccess(() => true);
-        if (routeAuth === "sign-in") {
+        if (user) {
-          setIsRouteAccess(() => false);
+          if (next_url) router.push(next_url);
-          return;
+          else handleUserRouteAuthentication();
         } else {
-          router.push("/");
+          if (routeAuth === "sign-in") {
-          return;
+            setIsRouteAccess(() => false);
+            return;
+          } else {
+            router.push("/");
+            return;
+          }
         }
       }
     }

apps/app/pages/workspace-member-invitation.tsx

@@ -30,12 +30,12 @@ import { WORKSPACE_INVITATION } from "constants/fetch-keys";
 const WorkspaceInvitation: NextPage = () => {
   const router = useRouter();
 
-  const { invitationId, email } = router.query;
+  const { invitation_id, email } = router.query;
 
   const { user } = useUser();
 
-  const { data: invitationDetail, error } = useSWR(invitationId && WORKSPACE_INVITATION, () =>
+  const { data: invitationDetail, error } = useSWR(invitation_id && WORKSPACE_INVITATION, () =>
-    invitationId ? workspaceService.getWorkspaceInvitation(invitationId as string) : null
+    invitation_id ? workspaceService.getWorkspaceInvitation(invitation_id as string) : null
   );
 
   const handleAccept = () => {

apps/app/services/api.service.ts

@@ -2,15 +2,25 @@ import axios from "axios";
 import Cookies from "js-cookie";
 
 const unAuthorizedStatus = [401];
+const nonValidatedRoutes = ["/", "/reset-password", "/workspace-member-invitation"];
+
+const validateRouteCheck = (route: string): boolean => {
+  let validationToggle = false;
+  const routeCheck = nonValidatedRoutes.find((_route: string) => _route === route);
+  if (routeCheck) validationToggle = true;
+  return validationToggle;
+};
+
 axios.interceptors.response.use(
   (response) => response,
   (error) => {
     const { status }: any = error.response;
-    if (unAuthorizedStatus.includes(status)) {
+    if (!validateRouteCheck(window.location.pathname)) {
-      Cookies.remove("refreshToken", { path: "/" });
+      if (unAuthorizedStatus.includes(status)) {
-      Cookies.remove("accessToken", { path: "/" });
+        Cookies.remove("refreshToken", { path: "/" });
-      if (window.location.pathname != "/")
+        Cookies.remove("accessToken", { path: "/" });
         window.location.href = `/?next_url=${window.location.pathname}`;
+      }
     }
     return Promise.reject(error);
   }