From 260974b0de0355c3d7774504500667c8a7926f7b Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Fri, 3 Nov 2023 12:42:43 +0530 Subject: [PATCH] fix: user authentication on the index page (#2619) * fix: user authentication on the index page * fix: login redirection cleanup --------- Co-authored-by: sriram veeraghanta --- web/components/page-views/signin.tsx | 93 +++++++++---------- web/components/workspace/sidebar-dropdown.tsx | 4 - web/hooks/use-user-auth.tsx | 6 +- 3 files changed, 46 insertions(+), 57 deletions(-) diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx index f6d8ac25c..ccaa7d2c3 100644 --- a/web/components/page-views/signin.tsx +++ b/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(() => { - userStore.fetchCurrentUserSettings().then((settings) => { - setLoading(true); - if (next_url) router.push(next_url); - 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 { + const handleLoginRedirection = useCallback( + (user: IUser) => { + // if the user is not onboarded, redirect them to the onboarding page + if (!user.is_onboarded) { 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) => { - const isOnboard = user.onboarding_step.profile_complete; - if (isOnboard) handleLoginRedirection(); - else { - router.push("/onboarding"); - } - }); + mutateUserInfo(); }) .catch((err) => { setLoading(false); @@ -164,7 +159,7 @@ export const SignInView = observer(() => { try { setLoading(true); if (response) { - handleLoginRedirection(); + mutateUserInfo(); } } catch (err: any) { setLoading(false); diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx index 873a12e47..75a57143b 100644 --- a/web/components/workspace/sidebar-dropdown.tsx +++ b/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({ diff --git a/web/hooks/use-user-auth.tsx b/web/hooks/use-user-auth.tsx index b6de6b964..0f555b9dc 100644 --- a/web/hooks/use-user-auth.tsx +++ b/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( - (workspace: IWorkspace) => workspace.id === user?.last_workspace_id - ); + const lastActiveWorkspace = userWorkspaces.find((workspace) => workspace.id === user?.last_workspace_id); if (lastActiveWorkspace) { router.push(`/${lastActiveWorkspace.slug}`); return;