fix: 404 when redirecting user clicks on Sign In button (#2349)

* fix: 404 when redirecting user to login page

* fix: next_path redirection not working

* fix: authentication workflow update in plane deploy

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

space/components/accounts/sign-in.tsx

@@ -19,6 +19,7 @@ export const SignInView = observer(() => {
   const { user: userStore } = useMobxStore();
 
   const router = useRouter();
+  const { next_path } = router.query as { next_path: string };
 
   const { setToastAlert } = useToast();
 
@@ -31,17 +32,17 @@ export const SignInView = observer(() => {
   };
 
   const onSignInSuccess = (response: any) => {
-    const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
-
-    const nextPath = router.asPath.includes("next_path") ? router.asPath.split("/?next_path=")[1] : "/login";
-
     userStore.setCurrentUser(response?.user);
 
-    if (!isOnboarded) {
-      router.push(`/onboarding?next_path=${nextPath}`);
-      return;
+    const isOnboard = response?.user?.onboarding_step?.profile_complete || false;
+
+    if (isOnboard) {
+      if (next_path) router.push(next_path);
+      else router.push("/login");
+    } else {
+      if (next_path) router.push(`/onboarding?next_path=${next_path}`);
+      else router.push("/onboarding");
     }
-    router.push((nextPath ?? "/login").toString());
   };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {

space/components/issues/navbar/index.tsx

@@ -129,7 +129,7 @@ const IssueNavbar = observer(() => {
         </div>
       ) : (
         <div className="flex-shrink-0">
-          <Link href={`/?next_path=${router.asPath}`}>
+          <Link href={`/login/?next_path=${router.asPath}`}>
             <a>
               <PrimaryButton className="flex-shrink-0" outline>
                 Sign in

space/components/views/login.tsx

@@ -7,7 +7,13 @@ import { SignInView, UserLoggedIn } from "components/accounts";
 export const LoginView = observer(() => {
   const { user: userStore } = useMobxStore();
 
-  if (!userStore.currentUser) return <SignInView />;
-
-  return <UserLoggedIn />;
+  return (
+    <>
+      {userStore?.loader ? (
+        <div className="relative w-screen h-screen flex justify-center items-center">Loading</div>
+      ) : (
+        <>{userStore.currentUser ? <UserLoggedIn /> : <SignInView />}</>
+      )}
+    </>
+  );
 });

space/lib/mobx/store-init.tsx

@@ -3,12 +3,14 @@
 import { useEffect } from "react";
 // next imports
 import { useRouter } from "next/router";
+// js cookie
+import Cookie from "js-cookie";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
 const MobxStoreInit = () => {
-  const store: RootStore = useMobxStore();
+  const { user: userStore }: RootStore = useMobxStore();
 
   const router = useRouter();
   const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
@@ -19,6 +21,11 @@ const MobxStoreInit = () => {
   //   store.issue.userSelectedStates = states || [];
   // }, [store.issue]);
 
+  useEffect(() => {
+    const authToken = Cookie.get("accessToken") || null;
+    if (authToken) userStore.fetchCurrentUser();
+  }, [userStore]);
+
   return <></>;
 };
 

space/pages/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+// next
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+
+const Index: NextPage = () => {
+  const router = useRouter();
+  const { next_path } = router.query as { next_path: string };
+
+  useEffect(() => {
+    if (next_path) router.push(`/login?next_path=${next_path}`);
+    else router.push(`/login`);
+  }, [router, next_path]);
+
+  return null;
+};
+
+export default Index;

space/pages/login/index.tsx

@@ -5,4 +5,4 @@ import { LoginView } from "components/views";
 
 const LoginPage = () => <LoginView />;
 
-export default LoginPage;
+export default LoginPage;

space/store/user.ts

@@ -7,12 +7,17 @@ import { ActorDetail } from "types/issue";
 import { IUser } from "types/user";
 
 export interface IUserStore {
+  loader: boolean;
+  error: any | null;
   currentUser: any | null;
   fetchCurrentUser: () => void;
   currentActor: () => any;
 }
 
 class UserStore implements IUserStore {
+  loader: boolean = false;
+  error: any | null = null;
+
   currentUser: IUser | null = null;
   // root store
   rootStore;
@@ -73,14 +78,19 @@ class UserStore implements IUserStore {
 
   fetchCurrentUser = async () => {
     try {
+      this.loader = true;
+      this.error = null;
       const response = await this.userService.currentUser();
       if (response) {
         runInAction(() => {
+          this.loader = false;
           this.currentUser = response;
         });
       }
     } catch (error) {
       console.error("Failed to fetch current user", error);
+      this.loader = false;
+      this.error = error;
     }
   };
 }