fix: user authentication on the index page (#2619)

* fix: user authentication on the index page

* fix: login redirection cleanup

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/components/page-views/signin.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
@@ -22,17 +22,18 @@ import { Loader, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
-import { IUserSettings } from "types";
+import { IUser, IUserSettings } from "types";
 
 const appConfigService = new AppConfigService();
 const authService = new AuthService();
 
 export const SignInView = observer(() => {
-  const { user: userStore } = useMobxStore();
+  const {
+    user: { fetchCurrentUser, fetchCurrentUserSettings },
+  } = useMobxStore();
   // router
   const router = useRouter();
   const { next: next_url } = router.query as { next: string };
-
   // states
   const [isLoading, setLoading] = useState(false);
   // toast
@@ -44,44 +45,44 @@ export const SignInView = observer(() => {
     data &&
     (data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));
 
-  useEffect(() => {
+  const handleLoginRedirection = useCallback(
-    userStore.fetchCurrentUserSettings().then((settings) => {
+    (user: IUser) => {
-      setLoading(true);
+      // if the user is not onboarded, redirect them to the onboarding page
-      if (next_url) router.push(next_url);
+      if (!user.is_onboarded) {
-      else
-        router.push(
-          `/${
-            settings.workspace.last_workspace_slug
-              ? settings.workspace.last_workspace_slug
-              : settings.workspace.fallback_workspace_slug
-          }`
-        );
-    });
-  }, [userStore, router, next_url]);
-
-  const handleLoginRedirection = () => {
-    userStore.fetchCurrentUser().then((user) => {
-      const isOnboarded = user.is_onboarded;
-
-      if (isOnboarded) {
-        userStore
-          .fetchCurrentUserSettings()
-          .then((userSettings: IUserSettings) => {
-            const workspaceSlug =
-              userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
-            if (next_url) router.push(next_url);
-            else if (workspaceSlug) router.push(`/${workspaceSlug}`);
-            else if (userSettings.workspace.invites > 0) router.push("/invitations");
-            else router.push("/create-workspace");
-          })
-          .catch(() => {
-            setLoading(false);
-          });
-      } else {
         router.push("/onboarding");
+        return;
       }
+      // if next_url is provided, redirect the user to that url
+      if (next_url) {
+        router.push(next_url);
+        return;
+      }
+
+      // if the user is onboarded, fetch their last workspace details
+      fetchCurrentUserSettings()
+        .then((userSettings: IUserSettings) => {
+          const workspaceSlug =
+            userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
+          if (workspaceSlug) router.push(`/${workspaceSlug}`);
+          else if (userSettings.workspace.invites > 0) router.push("/invitations");
+          else router.push("/create-workspace");
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+    },
+    [fetchCurrentUserSettings, router, next_url]
+  );
+
+  const mutateUserInfo = useCallback(() => {
+    fetchCurrentUser().then((user) => {
+      handleLoginRedirection(user);
     });
-  };
+  }, [fetchCurrentUser, handleLoginRedirection]);
+
+  useEffect(() => {
+    mutateUserInfo();
+  }, [mutateUserInfo]);
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {
     try {
@@ -94,7 +95,7 @@ export const SignInView = observer(() => {
         };
         const response = await authService.socialAuth(socialAuthPayload);
         if (response) {
-          handleLoginRedirection();
+          mutateUserInfo();
         }
       } else {
         setLoading(false);
@@ -121,7 +122,7 @@ export const SignInView = observer(() => {
         };
         const response = await authService.socialAuth(socialAuthPayload);
         if (response) {
-          handleLoginRedirection();
+          mutateUserInfo();
         }
       } else {
         setLoading(false);
@@ -142,13 +143,7 @@ export const SignInView = observer(() => {
     return authService
       .emailLogin(formData)
       .then(() => {
-        userStore.fetchCurrentUser().then((user) => {
+        mutateUserInfo();
-          const isOnboard = user.onboarding_step.profile_complete;
-          if (isOnboard) handleLoginRedirection();
-          else {
-            router.push("/onboarding");
-          }
-        });
       })
       .catch((err) => {
         setLoading(false);
@@ -164,7 +159,7 @@ export const SignInView = observer(() => {
     try {
       setLoading(true);
       if (response) {
-        handleLoginRedirection();
+        mutateUserInfo();
       }
     } catch (err: any) {
       setLoading(false);

web/components/workspace/sidebar-dropdown.tsx

@@ -3,7 +3,6 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { Menu, Transition } from "@headlessui/react";
-import { useTheme } from "next-themes";
 import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -55,8 +54,6 @@ export const WorkspaceSidebarDropdown = observer(() => {
   const { workspaces, currentWorkspace: activeWorkspace } = workspaceStore;
   const user = userStore.currentUser;
 
-  const { setTheme } = useTheme();
-
   const { setToastAlert } = useToast();
 
   const handleWorkspaceNavigation = (workspace: IWorkspace) => {
@@ -81,7 +78,6 @@ export const WorkspaceSidebarDropdown = observer(() => {
       .signOut()
       .then(() => {
         router.push("/");
-        setTheme("system");
       })
       .catch(() =>
         setToastAlert({

web/hooks/use-user-auth.tsx

@@ -9,7 +9,7 @@ import { CURRENT_USER } from "constants/fetch-keys";
 import { UserService } from "services/user.service";
 import { WorkspaceService } from "services/workspace.service";
 // types
-import type { IWorkspace, IUser } from "types";
+import type { IUser } from "types";
 
 const userService = new UserService();
 const workspaceService = new WorkspaceService();
@@ -33,9 +33,7 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
   useEffect(() => {
     const handleWorkSpaceRedirection = async () => {
       workspaceService.userWorkspaces().then(async (userWorkspaces) => {
-        const lastActiveWorkspace = userWorkspaces.find(
+        const lastActiveWorkspace = userWorkspaces.find((workspace) => workspace.id === user?.last_workspace_id);
-          (workspace: IWorkspace) => workspace.id === user?.last_workspace_id
-        );
         if (lastActiveWorkspace) {
           router.push(`/${lastActiveWorkspace.slug}`);
           return;