From 66807bef0d393b42ecb646b11ed644e063f89824 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Sat, 10 Jun 2023 01:26:38 +0530
Subject: [PATCH 1/7] fix: social auth authentication workflow (#1264)

* fix: github login mutation

* dev: updated social auth workflow and handled multiple loads on user

* dev: mutaing user and updated analytics logout issue resolved

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
---
 .../account/github-login-button.tsx           |  6 ++--
 apps/app/hooks/use-user-auth.tsx              |  1 +
 apps/app/pages/[workspaceSlug]/analytics.tsx  | 13 +++++----
 apps/app/pages/index.tsx                      | 28 +++++++++----------
 apps/app/pages/onboarding.tsx                 | 21 ++------------
 5 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
index 764680d30b8..3da7317e820 100644
--- a/apps/app/components/account/github-login-button.tsx
+++ b/apps/app/components/account/github-login-button.tsx
@@ -19,12 +19,14 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   } = useRouter();
   // states
   const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+  const [gitCode, setGitCode] = useState<null | string>(null);
 
   useEffect(() => {
-    if (code) {
+    if (code && !gitCode) {
+      setGitCode(code.toString());
       handleSignIn(code.toString());
     }
-  }, [code, handleSignIn]);
+  }, [code, gitCode, handleSignIn]);
 
   useEffect(() => {
     const origin =
diff --git a/apps/app/hooks/use-user-auth.tsx b/apps/app/hooks/use-user-auth.tsx
index 3e92fd3fe8f..d3116ce0677 100644
--- a/apps/app/hooks/use-user-auth.tsx
+++ b/apps/app/hooks/use-user-auth.tsx
@@ -24,6 +24,7 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
     mutate,
   } = useSWR<ICurrentUserResponse>(CURRENT_USER, () => userService.currentUser(), {
     refreshInterval: 0,
+    shouldRetryOnError: false,
   });
 
   useEffect(() => {
diff --git a/apps/app/pages/[workspaceSlug]/analytics.tsx b/apps/app/pages/[workspaceSlug]/analytics.tsx
index eb2816b562c..e37555bae76 100644
--- a/apps/app/pages/[workspaceSlug]/analytics.tsx
+++ b/apps/app/pages/[workspaceSlug]/analytics.tsx
@@ -69,12 +69,13 @@ const Analytics = () => {
   useEffect(() => {
     if (!workspaceSlug) return;
 
-    trackEventServices.trackAnalyticsEvent(
-      { workspaceSlug: workspaceSlug?.toString() },
-      "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS",
-      user
-    );
-  }, [workspaceSlug]);
+    if (user && workspaceSlug)
+      trackEventServices.trackAnalyticsEvent(
+        { workspaceSlug: workspaceSlug?.toString() },
+        "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS",
+        user
+      );
+  }, [user, workspaceSlug]);
 
   return (
     <WorkspaceAuthorizationLayout
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index d135cc70456..c9197bb0d15 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -30,13 +30,13 @@ const HomePage: NextPage = () => {
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {
     try {
       if (clientId && credential) {
-        mutateUser(
-          await authenticationService.socialAuth({
-            medium: "google",
-            credential,
-            clientId,
-          })
-        );
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+        if (response && response?.user) mutateUser();
       } else {
         throw Error("Cant find credentials");
       }
@@ -53,13 +53,13 @@ const HomePage: NextPage = () => {
   const handleGithubSignIn = async (credential: string) => {
     try {
       if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) {
-        mutateUser(
-          await authenticationService.socialAuth({
-            medium: "github",
-            credential,
-            clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
-          })
-        );
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: process.env.NEXT_PUBLIC_GITHUB_ID,
+        };
+        const response = await authenticationService.socialAuth(socialAuthPayload);
+        if (response && response?.user) mutateUser();
       } else {
         throw Error("Cant find credentials");
       }
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index c84adeae73a..6548982bae7 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 
-import Image from "next/image";
-import Router, { useRouter } from "next/router";
+import Router from "next/router";
 
 import { mutate } from "swr";
 
@@ -38,8 +37,6 @@ const Onboarding: NextPage = () => {
 
   const [workspace, setWorkspace] = useState();
 
-  const router = useRouter();
-
   const { user, mutateUser } = useUserAuth("onboarding");
 
   return (
@@ -89,21 +86,7 @@ const Onboarding: NextPage = () => {
                           userService
                             .updateUserOnBoard({ userRole }, user)
                             .then(async () => {
-                              mutate<ICurrentUserResponse>(
-                                CURRENT_USER,
-                                (prevData) => {
-                                  if (!prevData) return prevData;
-
-                                  return {
-                                    ...prevData,
-                                    user: {
-                                      ...prevData.user,
-                                      is_onboarded: true,
-                                    },
-                                  };
-                                },
-                                false
-                              );
+                              mutateUser();
                               const userWorkspaces = await workspaceService.userWorkspaces();
 
                               const lastActiveWorkspace =

From 15b5db0cae7e1618e26c2969aa774c5bb94a2cb0 Mon Sep 17 00:00:00 2001
From: pablohashescobar <118773738+pablohashescobar@users.noreply.github.com>
Date: Mon, 12 Jun 2023 10:02:16 +0530
Subject: [PATCH 2/7] dev: upgrade python runtime (#1256)

---
 apiserver/runtime.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apiserver/runtime.txt b/apiserver/runtime.txt
index a35d6cba1e5..fefae710dc4 100644
--- a/apiserver/runtime.txt
+++ b/apiserver/runtime.txt
@@ -1 +1 @@
-python-3.11.3
\ No newline at end of file
+python-3.11.4
\ No newline at end of file

From f774603b7fc83df18f4e50ee55d4b3ccedd4d340 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Tue, 13 Jun 2023 14:37:25 +0530
Subject: [PATCH 3/7] chore: onboarding workflow in authentication (#1281)

---
 .../components/account/email-code-form.tsx    |  29 +--
 .../account/github-login-button.tsx           |   6 +-
 apps/app/components/account/google-login.tsx  |   6 +-
 apps/app/pages/index.tsx                      |  50 +++--
 apps/app/pages/onboarding.tsx                 | 197 +++++++++---------
 5 files changed, 159 insertions(+), 129 deletions(-)

diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index 9132ee99425..e1b7aea9884 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -16,7 +16,7 @@ type EmailCodeFormValues = {
   token?: string;
 };
 
-export const EmailCodeForm = ({ onSuccess }: any) => {
+export const EmailCodeForm = ({ handleSignIn }: any) => {
   const [codeSent, setCodeSent] = useState(false);
   const [codeResent, setCodeResent] = useState(false);
   const [isCodeResending, setIsCodeResending] = useState(false);
@@ -66,18 +66,23 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
 
   const handleSignin = async (formData: EmailCodeFormValues) => {
     setIsLoading(true);
-    await authenticationService.magicSignIn(formData).catch((error) => {
-      setIsLoading(false);
-      setToastAlert({
-        title: "Oops!",
-        type: "error",
-        message: error?.response?.data?.error ?? "Enter the correct code to sign in",
-      });
-      setError("token" as keyof EmailCodeFormValues, {
-        type: "manual",
-        message: error.error,
+    await authenticationService
+      .magicSignIn(formData)
+      .then((response) => {
+        handleSignIn(response);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+        });
+        setError("token" as keyof EmailCodeFormValues, {
+          type: "manual",
+          message: error?.error,
+        });
       });
-    });
   };
 
   const emailOld = getValues("email");
diff --git a/apps/app/components/account/github-login-button.tsx b/apps/app/components/account/github-login-button.tsx
index 3da7317e820..d997b3a3de0 100644
--- a/apps/app/components/account/github-login-button.tsx
+++ b/apps/app/components/account/github-login-button.tsx
@@ -35,12 +35,12 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
   }, []);
 
   return (
-    <div className="w-full px-1">
+    <div className="w-full flex justify-center items-center px-[3px]">
       <Link
         href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
       >
-        <button className="flex w-full items-center justify-center gap-3 rounded-md border border-brand-base p-2 text-sm font-medium text-brand-secondary duration-300 hover:bg-brand-surface-2">
-          <Image src={githubImage} height={22} width={22} color="#000" alt="GitHub Logo" />
+        <button className="flex w-full items-center justify-center gap-3 rounded border border-brand-base p-2 text-sm font-medium text-brand-secondary duration-300 hover:bg-brand-surface-2">
+          <Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
           <span>Sign In with Github</span>
         </button>
       </Link>
diff --git a/apps/app/components/account/google-login.tsx b/apps/app/components/account/google-login.tsx
index 237439def44..c12fb4e24ff 100644
--- a/apps/app/components/account/google-login.tsx
+++ b/apps/app/components/account/google-login.tsx
@@ -47,7 +47,11 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
   return (
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div className="overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
+      <div
+        className="overflow-hidden rounded w-full flex justify-center items-center"
+        id="googleSignInButton"
+        ref={googleSignInButton}
+      />
     </>
   );
 };
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index c9197bb0d15..96d8441d75c 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -40,12 +40,14 @@ const HomePage: NextPage = () => {
       } else {
         throw Error("Cant find credentials");
       }
-    } catch (error) {
+    } catch (error: any) {
       console.log(error);
       setToastAlert({
         title: "Error signing in!",
         type: "error",
-        message: "Something went wrong. Please try again later or contact the support team.",
+        message:
+          error?.error ||
+          "Something went wrong. Please try again later or contact the support team.",
       });
     }
   };
@@ -63,27 +65,44 @@ const HomePage: NextPage = () => {
       } else {
         throw Error("Cant find credentials");
       }
-    } catch (error) {
+    } catch (error: any) {
       console.log(error);
       setToastAlert({
         title: "Error signing in!",
         type: "error",
-        message: "Something went wrong. Please try again later or contact the support team.",
+        message:
+          error?.error ||
+          "Something went wrong. Please try again later or contact the support team.",
       });
     }
   };
 
   const handleEmailPasswordSignIn = async (response: any) => {
     try {
-      if (response) {
-        mutateUser();
-      }
-    } catch (error) {
+      if (response) mutateUser();
+    } catch (error: any) {
       console.log(error);
       setToastAlert({
         title: "Error signing in!",
         type: "error",
-        message: "Something went wrong. Please try again later or contact the support team.",
+        message:
+          error?.error ||
+          "Something went wrong. Please try again later or contact the support team.",
+      });
+    }
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      if (response) mutateUser();
+    } catch (error: any) {
+      console.log(error);
+      setToastAlert({
+        title: "Error signing in!",
+        type: "error",
+        message:
+          error?.error ||
+          "Something went wrong. Please try again later or contact the support team.",
       });
     }
   };
@@ -91,8 +110,11 @@ const HomePage: NextPage = () => {
   return (
     <DefaultLayout>
       {isLoading ? (
-        <div className="grid h-screen place-items-center">
-          <Spinner />
+        <div className="flex flex-col gap-3 w-full h-screen justify-center items-center">
+          <div>
+            <Spinner />
+          </div>
+          {/* <div className="text-gray-500">Validating authentication</div> */}
         </div>
       ) : (
         <div className="flex h-screen w-full items-center justify-center overflow-auto">
@@ -108,16 +130,14 @@ const HomePage: NextPage = () => {
               <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
                 {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
                   <>
-                    <EmailCodeForm />
+                    <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
                     <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5">
                       <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
                       <GithubLoginButton handleSignIn={handleGithubSignIn} />
                     </div>
                   </>
                 ) : (
-                  <>
-                    <EmailPasswordForm handleSignIn={handleEmailPasswordSignIn} />
-                  </>
+                  <EmailPasswordForm handleSignIn={handleEmailPasswordSignIn} />
                 )}
               </div>
             </div>
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index 6548982bae7..59463c248d7 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -1,9 +1,6 @@
 import { useState } from "react";
-
+// next imports
 import Router from "next/router";
-
-import { mutate } from "swr";
-
 // services
 import userService from "services/user.service";
 import workspaceService from "services/workspace.service";
@@ -11,7 +8,6 @@ import workspaceService from "services/workspace.service";
 import useUserAuth from "hooks/use-user-auth";
 // layouts
 import DefaultLayout from "layouts/default-layout";
-import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
 // components
 import {
   InviteMembers,
@@ -26,9 +22,6 @@ import { PrimaryButton, Spinner } from "components/ui";
 import { ONBOARDING_CARDS } from "constants/workspace";
 // types
 import type { NextPage } from "next";
-import { ICurrentUserResponse } from "types";
-// fetch-keys
-import { CURRENT_USER } from "constants/fetch-keys";
 
 const Onboarding: NextPage = () => {
   const [step, setStep] = useState(1);
@@ -37,109 +30,117 @@ const Onboarding: NextPage = () => {
 
   const [workspace, setWorkspace] = useState();
 
-  const { user, mutateUser } = useUserAuth("onboarding");
+  const { user, isLoading: userLoading, mutateUser } = useUserAuth("onboarding");
 
   return (
-    <UserAuthorizationLayout>
-      <DefaultLayout>
-        {isLoading ? (
-          <div className="grid h-screen place-items-center">
-            <Spinner />
-          </div>
-        ) : (
-          <div className="relative grid h-full place-items-center p-5">
-            {step <= 3 ? (
-              <div className="h-full flex flex-col justify-center w-full py-4">
-                <div className="mb-7 flex items-center justify-center text-center">
-                  <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
-                </div>
-                {step === 1 ? (
-                  <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
-                ) : step === 2 ? (
-                  <Workspace setStep={setStep} setWorkspace={setWorkspace} user={user} />
-                ) : (
-                  <InviteMembers setStep={setStep} workspace={workspace} user={user} />
-                )}
-              </div>
-            ) : (
-              <div className="flex w-full max-w-2xl flex-col gap-12">
-                <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
-                  {step === 4 ? (
-                    <OnboardingCard data={ONBOARDING_CARDS.welcome} />
-                  ) : step === 5 ? (
-                    <OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
-                  ) : step === 6 ? (
-                    <OnboardingCard data={ONBOARDING_CARDS.cycle} gradient />
-                  ) : step === 7 ? (
-                    <OnboardingCard data={ONBOARDING_CARDS.module} gradient />
+    <DefaultLayout>
+      {userLoading ? (
+        <div className="grid h-screen place-items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          {isLoading ? (
+            <div className="grid h-screen place-items-center">
+              <Spinner />
+            </div>
+          ) : (
+            <div className="relative grid h-full place-items-center p-5">
+              {step <= 3 ? (
+                <div className="h-full flex flex-col justify-center w-full py-4">
+                  <div className="mb-7 flex items-center justify-center text-center">
+                    <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+                  </div>
+                  {step === 1 ? (
+                    <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
+                  ) : step === 2 ? (
+                    <Workspace setStep={setStep} setWorkspace={setWorkspace} user={user} />
                   ) : (
-                    <OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
+                    step === 3 && (
+                      <InviteMembers setStep={setStep} workspace={workspace} user={user} />
+                    )
                   )}
-                  <div className="mx-auto flex h-1/4 items-end lg:w-1/2">
-                    <PrimaryButton
-                      type="button"
-                      className="flex w-full items-center justify-center text-center "
-                      size="md"
-                      onClick={() => {
-                        if (step === 8) {
-                          setIsLoading(true);
-                          userService
-                            .updateUserOnBoard({ userRole }, user)
-                            .then(async () => {
-                              mutateUser();
-                              const userWorkspaces = await workspaceService.userWorkspaces();
+                </div>
+              ) : (
+                <div className="flex w-full max-w-2xl flex-col gap-12">
+                  <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
+                    {step === 4 ? (
+                      <OnboardingCard data={ONBOARDING_CARDS.welcome} />
+                    ) : step === 5 ? (
+                      <OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
+                    ) : step === 6 ? (
+                      <OnboardingCard data={ONBOARDING_CARDS.cycle} gradient />
+                    ) : step === 7 ? (
+                      <OnboardingCard data={ONBOARDING_CARDS.module} gradient />
+                    ) : (
+                      step === 8 && <OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
+                    )}
+                    <div className="mx-auto flex h-1/4 items-end lg:w-1/2">
+                      <PrimaryButton
+                        type="button"
+                        className="flex w-full items-center justify-center text-center "
+                        size="md"
+                        onClick={() => {
+                          if (step === 8) {
+                            setIsLoading(true);
+                            userService
+                              .updateUserOnBoard({ userRole }, user)
+                              .then(async () => {
+                                mutateUser();
+                                const userWorkspaces = await workspaceService.userWorkspaces();
 
-                              const lastActiveWorkspace =
-                                userWorkspaces.find(
-                                  (workspace) => workspace.id === user?.last_workspace_id
-                                ) ?? userWorkspaces[0];
+                                const lastActiveWorkspace =
+                                  userWorkspaces.find(
+                                    (workspace) => workspace.id === user?.last_workspace_id
+                                  ) ?? userWorkspaces[0];
 
-                              if (lastActiveWorkspace) {
-                                userService
-                                  .updateUser({
-                                    last_workspace_id: lastActiveWorkspace.id,
-                                  })
-                                  .then((res) => {
-                                    mutateUser();
-                                  })
-                                  .catch((err) => {
-                                    console.log(err);
-                                  });
-                                Router.push(`/${lastActiveWorkspace.slug}`);
-                                return;
-                              } else {
-                                const invitations =
-                                  await workspaceService.userWorkspaceInvitations();
-                                if (invitations.length > 0) {
-                                  Router.push(`/invitations`);
+                                if (lastActiveWorkspace) {
+                                  userService
+                                    .updateUser({
+                                      last_workspace_id: lastActiveWorkspace.id,
+                                    })
+                                    .then((res) => {
+                                      mutateUser();
+                                    })
+                                    .catch((err) => {
+                                      console.log(err);
+                                    });
+                                  Router.push(`/${lastActiveWorkspace.slug}`);
                                   return;
                                 } else {
-                                  Router.push(`/create-workspace`);
-                                  return;
+                                  const invitations =
+                                    await workspaceService.userWorkspaceInvitations();
+                                  if (invitations.length > 0) {
+                                    Router.push(`/invitations`);
+                                    return;
+                                  } else {
+                                    Router.push(`/create-workspace`);
+                                    return;
+                                  }
                                 }
-                              }
-                            })
-                            .catch((err) => {
-                              setIsLoading(false);
-                              console.log(err);
-                            });
-                        } else setStep((prevData) => prevData + 1);
-                      }}
-                    >
-                      {step === 4 || step === 8 ? "Get Started" : "Next"}
-                    </PrimaryButton>
+                              })
+                              .catch((err) => {
+                                setIsLoading(false);
+                                console.log(err);
+                              });
+                          } else setStep((prevData) => prevData + 1);
+                        }}
+                      >
+                        {step === 4 || step === 8 ? "Get Started" : "Next"}
+                      </PrimaryButton>
+                    </div>
                   </div>
                 </div>
+              )}
+              <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
+                <span className="text-xs text-brand-secondary">Logged in:</span>
+                <span className="text-sm text-brand-base">{user?.email}</span>
               </div>
-            )}
-            <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-              <span className="text-xs text-brand-secondary">Logged in:</span>
-              <span className="text-sm text-brand-base">{user?.email}</span>
             </div>
-          </div>
-        )}
-      </DefaultLayout>
-    </UserAuthorizationLayout>
+          )}
+        </>
+      )}
+    </DefaultLayout>
   );
 };
 

From 6f7b5637120a230cff89d46cb36f25602fa6d93b Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 14 Jun 2023 13:17:35 +0530
Subject: [PATCH 4/7] refactor: onboarding workflow (#1286)

* chore: onboarding steps workflow verification

* chore: onboarding variable update
---
 .../components/onboarding/invite-members.tsx  |   2 +-
 .../components/onboarding/user-details.tsx    |   2 +-
 apps/app/components/onboarding/workspace.tsx  |   2 +-
 apps/app/pages/onboarding.tsx                 | 188 +++++++++---------
 4 files changed, 96 insertions(+), 98 deletions(-)

diff --git a/apps/app/components/onboarding/invite-members.tsx b/apps/app/components/onboarding/invite-members.tsx
index 0114b2dcdba..9136078011c 100644
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@@ -7,7 +7,7 @@ import { ICurrentUserResponse, IUser } from "types";
 import { MultiInput, PrimaryButton, SecondaryButton } from "components/ui";
 
 type Props = {
-  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setStep: React.Dispatch<React.SetStateAction<number | null>>;
   workspace: any;
   user: ICurrentUserResponse | undefined;
 };
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index 63df0d968ed..1e96bb143e7 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -21,7 +21,7 @@ const defaultValues: Partial<IUser> = {
 
 type Props = {
   user?: IUser;
-  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setStep: React.Dispatch<React.SetStateAction<number | null>>;
   setUserRole: React.Dispatch<React.SetStateAction<string | null>>;
 };
 
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 783f5f5e5ad..0beef1419e2 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -17,7 +17,7 @@ import { PrimaryButton } from "components/ui";
 import { getFirstCharacters, truncateText } from "helpers/string.helper";
 
 type Props = {
-  setStep: React.Dispatch<React.SetStateAction<number>>;
+  setStep: React.Dispatch<React.SetStateAction<number | null>>;
   setWorkspace: React.Dispatch<React.SetStateAction<any>>;
   user: ICurrentUserResponse | undefined;
 };
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index 59463c248d7..948452e2e50 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 // next imports
 import Router from "next/router";
 // services
@@ -24,7 +24,7 @@ import { ONBOARDING_CARDS } from "constants/workspace";
 import type { NextPage } from "next";
 
 const Onboarding: NextPage = () => {
-  const [step, setStep] = useState(1);
+  const [step, setStep] = useState<null | number>(null);
   const [userRole, setUserRole] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -32,113 +32,111 @@ const Onboarding: NextPage = () => {
 
   const { user, isLoading: userLoading, mutateUser } = useUserAuth("onboarding");
 
+  useEffect(() => {
+    if (user && step === null) {
+      let currentStep: null | number = null;
+      if (user?.role) currentStep = 2;
+      if (user?.last_workspace_id) currentStep = 4;
+      if (currentStep != null) setStep(() => currentStep);
+    }
+  }, [step, user]);
+
   return (
     <DefaultLayout>
-      {userLoading ? (
+      {userLoading || isLoading || step === null ? (
         <div className="grid h-screen place-items-center">
           <Spinner />
         </div>
       ) : (
-        <>
-          {isLoading ? (
-            <div className="grid h-screen place-items-center">
-              <Spinner />
+        <div className="relative grid h-full place-items-center p-5">
+          {step <= 3 ? (
+            <div className="h-full flex flex-col justify-center w-full py-4">
+              <div className="mb-7 flex items-center justify-center text-center">
+                <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+              </div>
+              {step === 1 ? (
+                <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
+              ) : step === 2 ? (
+                <Workspace setStep={setStep} setWorkspace={setWorkspace} user={user} />
+              ) : (
+                step === 3 && <InviteMembers setStep={setStep} workspace={workspace} user={user} />
+              )}
             </div>
           ) : (
-            <div className="relative grid h-full place-items-center p-5">
-              {step <= 3 ? (
-                <div className="h-full flex flex-col justify-center w-full py-4">
-                  <div className="mb-7 flex items-center justify-center text-center">
-                    <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
-                  </div>
-                  {step === 1 ? (
-                    <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
-                  ) : step === 2 ? (
-                    <Workspace setStep={setStep} setWorkspace={setWorkspace} user={user} />
-                  ) : (
-                    step === 3 && (
-                      <InviteMembers setStep={setStep} workspace={workspace} user={user} />
-                    )
-                  )}
-                </div>
-              ) : (
-                <div className="flex w-full max-w-2xl flex-col gap-12">
-                  <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
-                    {step === 4 ? (
-                      <OnboardingCard data={ONBOARDING_CARDS.welcome} />
-                    ) : step === 5 ? (
-                      <OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
-                    ) : step === 6 ? (
-                      <OnboardingCard data={ONBOARDING_CARDS.cycle} gradient />
-                    ) : step === 7 ? (
-                      <OnboardingCard data={ONBOARDING_CARDS.module} gradient />
-                    ) : (
-                      step === 8 && <OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
-                    )}
-                    <div className="mx-auto flex h-1/4 items-end lg:w-1/2">
-                      <PrimaryButton
-                        type="button"
-                        className="flex w-full items-center justify-center text-center "
-                        size="md"
-                        onClick={() => {
-                          if (step === 8) {
-                            setIsLoading(true);
-                            userService
-                              .updateUserOnBoard({ userRole }, user)
-                              .then(async () => {
-                                mutateUser();
-                                const userWorkspaces = await workspaceService.userWorkspaces();
+            <div className="flex w-full max-w-2xl flex-col gap-12">
+              <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
+                {step === 4 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.welcome} />
+                ) : step === 5 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
+                ) : step === 6 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.cycle} gradient />
+                ) : step === 7 ? (
+                  <OnboardingCard data={ONBOARDING_CARDS.module} gradient />
+                ) : (
+                  step === 8 && <OnboardingCard data={ONBOARDING_CARDS.commandMenu} />
+                )}
+                <div className="mx-auto flex h-1/4 items-end lg:w-1/2">
+                  <PrimaryButton
+                    type="button"
+                    className="flex w-full items-center justify-center text-center "
+                    size="md"
+                    onClick={() => {
+                      if (step === 8) {
+                        setIsLoading(true);
+                        userService
+                          .updateUserOnBoard({ userRole }, user)
+                          .then(async () => {
+                            mutateUser();
+                            const userWorkspaces = await workspaceService.userWorkspaces();
 
-                                const lastActiveWorkspace =
-                                  userWorkspaces.find(
-                                    (workspace) => workspace.id === user?.last_workspace_id
-                                  ) ?? userWorkspaces[0];
+                            const lastActiveWorkspace =
+                              userWorkspaces.find(
+                                (workspace) => workspace.id === user?.last_workspace_id
+                              ) ?? userWorkspaces[0];
 
-                                if (lastActiveWorkspace) {
-                                  userService
-                                    .updateUser({
-                                      last_workspace_id: lastActiveWorkspace.id,
-                                    })
-                                    .then((res) => {
-                                      mutateUser();
-                                    })
-                                    .catch((err) => {
-                                      console.log(err);
-                                    });
-                                  Router.push(`/${lastActiveWorkspace.slug}`);
-                                  return;
-                                } else {
-                                  const invitations =
-                                    await workspaceService.userWorkspaceInvitations();
-                                  if (invitations.length > 0) {
-                                    Router.push(`/invitations`);
-                                    return;
-                                  } else {
-                                    Router.push(`/create-workspace`);
-                                    return;
-                                  }
-                                }
-                              })
-                              .catch((err) => {
-                                setIsLoading(false);
-                                console.log(err);
-                              });
-                          } else setStep((prevData) => prevData + 1);
-                        }}
-                      >
-                        {step === 4 || step === 8 ? "Get Started" : "Next"}
-                      </PrimaryButton>
-                    </div>
-                  </div>
+                            if (lastActiveWorkspace) {
+                              userService
+                                .updateUser({
+                                  last_workspace_id: lastActiveWorkspace.id,
+                                })
+                                .then((res) => {
+                                  mutateUser();
+                                })
+                                .catch((err) => {
+                                  console.log(err);
+                                });
+                              Router.push(`/${lastActiveWorkspace.slug}`);
+                              return;
+                            } else {
+                              const invitations = await workspaceService.userWorkspaceInvitations();
+                              if (invitations.length > 0) {
+                                Router.push(`/invitations`);
+                                return;
+                              } else {
+                                Router.push(`/create-workspace`);
+                                return;
+                              }
+                            }
+                          })
+                          .catch((err) => {
+                            setIsLoading(false);
+                            console.log(err);
+                          });
+                      } else setStep((prevData) => (prevData != null ? prevData + 1 : prevData));
+                    }}
+                  >
+                    {step === 4 || step === 8 ? "Get Started" : "Next"}
+                  </PrimaryButton>
                 </div>
-              )}
-              <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
-                <span className="text-xs text-brand-secondary">Logged in:</span>
-                <span className="text-sm text-brand-base">{user?.email}</span>
               </div>
             </div>
           )}
-        </>
+          <div className="absolute flex flex-col gap-1 justify-center items-start left-5 top-5">
+            <span className="text-xs text-brand-secondary">Logged in:</span>
+            <span className="text-sm text-brand-base">{user?.email}</span>
+          </div>
+        </div>
       )}
     </DefaultLayout>
   );

From 4083f623a09fd4afbf5f893e80541743ad66b193 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 14 Jun 2023 13:39:49 +0530
Subject: [PATCH 5/7] refactor: onboarding user role validation (#1287)

---
 apps/app/pages/onboarding.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index 948452e2e50..65c860e9b8a 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -34,10 +34,10 @@ const Onboarding: NextPage = () => {
 
   useEffect(() => {
     if (user && step === null) {
-      let currentStep: null | number = null;
+      let currentStep: number = 1;
       if (user?.role) currentStep = 2;
       if (user?.last_workspace_id) currentStep = 4;
-      if (currentStep != null) setStep(() => currentStep);
+      setStep(() => currentStep);
     }
   }, [step, user]);
 

From be7706e62e7f306b392a0f6cab8b1b29c9af82be Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 14 Jun 2023 14:04:25 +0530
Subject: [PATCH 6/7] chore: updating last_workspace_id under user (#1289)

* chore: onboarding steps workflow verification

* chore: onboarding onboarding variable update

* chore: role check in onboarding

* chore: updated last_workspace_id under user
---
 .../workspace/create-workspace-form.tsx           | 15 ++++++++++++++-
 apps/app/pages/onboarding.tsx                     | 11 +----------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index fdc078cf0d8..507d88ea7cb 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -6,6 +6,7 @@ import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
 // services
 import workspaceService from "services/workspace.service";
+import userService from "services/user.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -77,7 +78,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                 message: "Workspace created successfully.",
               });
               mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])]);
-              onSubmit(res);
+              updateLastWorkspaceIdUnderUSer(res);
             })
             .catch((err) => {
               console.error(err);
@@ -93,6 +94,18 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
       });
   };
 
+  // update last_workspace_id
+  const updateLastWorkspaceIdUnderUSer = (workspace: any) => {
+    userService
+      .updateUser({ last_workspace_id: workspace.id })
+      .then((res) => {
+        onSubmit(workspace);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
   useEffect(
     () => () => {
       // when the component unmounts set the default values to whatever user typed in
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index 65c860e9b8a..cc6b742df92 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -96,16 +96,7 @@ const Onboarding: NextPage = () => {
                               ) ?? userWorkspaces[0];
 
                             if (lastActiveWorkspace) {
-                              userService
-                                .updateUser({
-                                  last_workspace_id: lastActiveWorkspace.id,
-                                })
-                                .then((res) => {
-                                  mutateUser();
-                                })
-                                .catch((err) => {
-                                  console.log(err);
-                                });
+                              mutateUser();
                               Router.push(`/${lastActiveWorkspace.slug}`);
                               return;
                             } else {

From e73bd96dbc991256c19f539e87dd787023e27d06 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 14 Jun 2023 16:56:17 +0530
Subject: [PATCH 7/7] chore: auth workflow in magic-link (#1292)

---
 apps/app/pages/magic-sign-in.tsx | 74 ++++++++++++++++----------------
 apps/app/services/api.service.ts |  7 ++-
 2 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/apps/app/pages/magic-sign-in.tsx b/apps/app/pages/magic-sign-in.tsx
index 0a2c2493f13..81ebf026702 100644
--- a/apps/app/pages/magic-sign-in.tsx
+++ b/apps/app/pages/magic-sign-in.tsx
@@ -1,67 +1,63 @@
 import React, { useState, useEffect } from "react";
-
+// next imports
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // services
 import authenticationService from "services/authentication.service";
 // hooks
-import useUser from "hooks/use-user";
+import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // types
 import type { NextPage } from "next";
-// constants
-import { USER_WORKSPACES } from "constants/fetch-keys";
 
 const MagicSignIn: NextPage = () => {
   const router = useRouter();
-
-  const [isSigningIn, setIsSigningIn] = useState(true);
-  const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
-
   const { password, key } = router.query;
 
   const { setToastAlert } = useToast();
 
-  const { mutateUser } = useUser();
+  const { user, isLoading, mutateUser } = useUserAuth("sign-in");
+
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
 
   useEffect(() => {
-    setIsSigningIn(true);
-    setErrorSignIn(undefined);
-    if (!password || !key) return;
-    authenticationService
-      .magicSignIn({ token: password, key })
-      .then(async (res) => {
-        setIsSigningIn(false);
-        await mutateUser();
-        mutate(USER_WORKSPACES);
-        if (res.user.is_onboarded) router.push("/");
-        else router.push("/invitations");
-      })
-      .catch((err) => {
-        setErrorSignIn(err.response.data.error);
-        setIsSigningIn(false);
-      });
+    setIsSigningIn(() => false);
+    setErrorSignIn(() => undefined);
+    if (!password || !key) {
+      setErrorSignIn("URL is invalid");
+      return;
+    } else {
+      setIsSigningIn(() => true);
+      authenticationService
+        .magicSignIn({ token: password, key })
+        .then(async (res) => {
+          setIsSigningIn(false);
+          await mutateUser();
+        })
+        .catch((err) => {
+          setErrorSignIn(err.response.data.error);
+          setIsSigningIn(false);
+        });
+    }
   }, [password, key, mutateUser, router]);
 
   return (
     <DefaultLayout>
       <div className="h-screen w-full overflow-auto bg-brand-surface-1">
         {isSigningIn ? (
-          <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
-            <h2 className="text-4xl">Signing you in...</h2>
-            <p className="text-sm text-brand-secondary">
+          <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+            <h2 className="text-4xl font-medium">Signing you in...</h2>
+            <p className="text-sm font-medium text-brand-secondary">
               Please wait while we are preparing your take off.
             </p>
           </div>
         ) : errorSigningIn ? (
-          <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
-            <h2 className="text-4xl">Error</h2>
-            <p className="text-sm text-brand-secondary">
-              {errorSigningIn}.
+          <div className="flex h-full w-full flex-col items-center justify-center gap-3">
+            <h2 className="text-4xl font-medium">Error</h2>
+            <div className="text-sm font-medium text-brand-secondary flex gap-2">
+              <div>{errorSigningIn}.</div>
               <span
                 className="cursor-pointer underline"
                 onClick={() => {
@@ -85,12 +81,14 @@ const MagicSignIn: NextPage = () => {
               >
                 Send link again?
               </span>
-            </p>
+            </div>
           </div>
         ) : (
           <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
-            <h2 className="text-4xl">Success</h2>
-            <p className="text-sm text-brand-secondary">Redirecting you to the app...</p>
+            <h2 className="text-4xl font-medium">Success</h2>
+            <p className="text-sm font-medium text-brand-secondary">
+              Redirecting you to the app...
+            </p>
           </div>
         )}
       </div>
diff --git a/apps/app/services/api.service.ts b/apps/app/services/api.service.ts
index b9d993548fd..ef198c221e8 100644
--- a/apps/app/services/api.service.ts
+++ b/apps/app/services/api.service.ts
@@ -2,7 +2,12 @@ import axios from "axios";
 import Cookies from "js-cookie";
 
 const unAuthorizedStatus = [401];
-const nonValidatedRoutes = ["/", "/reset-password", "/workspace-member-invitation"];
+const nonValidatedRoutes = [
+  "/",
+  "/magic-sign-in",
+  "/reset-password",
+  "/workspace-member-invitation",
+];
 
 const validateRouteCheck = (route: string): boolean => {
   let validationToggle = false;