chore: onboarding workflow in authentication (#1281)

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) => {
+    await authenticationService
-      setIsLoading(false);
+      .magicSignIn(formData)
-      setToastAlert({
+      .then((response) => {
-        title: "Oops!",
+        handleSignIn(response);
-        type: "error",
+      })
-        message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+      .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,
+        });
       });
-      setError("token" as keyof EmailCodeFormValues, {
-        type: "manual",
-        message: error.error,
-      });
-    });
   };
 
   const emailOld = getValues("email");

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">
+        <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={22} width={22} color="#000" alt="GitHub Logo" />
+          <Image src={githubImage} height={20} width={20} color="#000" alt="GitHub Logo" />
           <span>Sign In with Github</span>
         </button>
       </Link>

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}
+      />
     </>
   );
 };

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) {
+      if (response) mutateUser();
-        mutateUser();
+    } catch (error: any) {
-      }
-    } catch (error) {
       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">
+        <div className="flex flex-col gap-3 w-full h-screen justify-center items-center">
-          <Spinner />
+          <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>

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>
-      <DefaultLayout>
+      {userLoading ? (
-        {isLoading ? (
+        <div className="grid h-screen place-items-center">
-          <div className="grid h-screen place-items-center">
+          <Spinner />
-            <Spinner />
+        </div>
-          </div>
+      ) : (
-        ) : (
+        <>
-          <div className="relative grid h-full place-items-center p-5">
+          {isLoading ? (
-            {step <= 3 ? (
+            <div className="grid h-screen place-items-center">
-              <div className="h-full flex flex-col justify-center w-full py-4">
+              <Spinner />
-                <div className="mb-7 flex items-center justify-center text-center">
+            </div>
-                  <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
+          ) : (
-                </div>
+            <div className="relative grid h-full place-items-center p-5">
-                {step === 1 ? (
+              {step <= 3 ? (
-                  <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
+                <div className="h-full flex flex-col justify-center w-full py-4">
-                ) : step === 2 ? (
+                  <div className="mb-7 flex items-center justify-center text-center">
-                  <Workspace setStep={setStep} setWorkspace={setWorkspace} user={user} />
+                    <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
-                ) : (
+                  </div>
-                  <InviteMembers setStep={setStep} workspace={workspace} user={user} />
+                  {step === 1 ? (
-                )}
+                    <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
-              </div>
+                  ) : step === 2 ? (
-            ) : (
+                    <Workspace setStep={setStep} setWorkspace={setWorkspace} user={user} />
-              <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 />
                   ) : (
-                    <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">
+                </div>
-                    <PrimaryButton
+              ) : (
-                      type="button"
+                <div className="flex w-full max-w-2xl flex-col gap-12">
-                      className="flex w-full items-center justify-center text-center "
+                  <div className="flex flex-col items-center justify-center gap-7 rounded-[10px] bg-brand-base pb-7 text-center shadow-md">
-                      size="md"
+                    {step === 4 ? (
-                      onClick={() => {
+                      <OnboardingCard data={ONBOARDING_CARDS.welcome} />
-                        if (step === 8) {
+                    ) : step === 5 ? (
-                          setIsLoading(true);
+                      <OnboardingCard data={ONBOARDING_CARDS.issue} gradient />
-                          userService
+                    ) : step === 6 ? (
-                            .updateUserOnBoard({ userRole }, user)
+                      <OnboardingCard data={ONBOARDING_CARDS.cycle} gradient />
-                            .then(async () => {
+                    ) : step === 7 ? (
-                              mutateUser();
+                      <OnboardingCard data={ONBOARDING_CARDS.module} gradient />
-                              const userWorkspaces = await workspaceService.userWorkspaces();
+                    ) : (
+                      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 =
+                                const lastActiveWorkspace =
-                                userWorkspaces.find(
+                                  userWorkspaces.find(
-                                  (workspace) => workspace.id === user?.last_workspace_id
+                                    (workspace) => workspace.id === user?.last_workspace_id
-                                ) ?? userWorkspaces[0];
+                                  ) ?? userWorkspaces[0];
 
-                              if (lastActiveWorkspace) {
+                                if (lastActiveWorkspace) {
-                                userService
+                                  userService
-                                  .updateUser({
+                                    .updateUser({
-                                    last_workspace_id: lastActiveWorkspace.id,
+                                      last_workspace_id: lastActiveWorkspace.id,
-                                  })
+                                    })
-                                  .then((res) => {
+                                    .then((res) => {
-                                    mutateUser();
+                                      mutateUser();
-                                  })
+                                    })
-                                  .catch((err) => {
+                                    .catch((err) => {
-                                    console.log(err);
+                                      console.log(err);
-                                  });
+                                    });
-                                Router.push(`/${lastActiveWorkspace.slug}`);
+                                  Router.push(`/${lastActiveWorkspace.slug}`);
-                                return;
-                              } else {
-                                const invitations =
-                                  await workspaceService.userWorkspaceInvitations();
-                                if (invitations.length > 0) {
-                                  Router.push(`/invitations`);
                                   return;
                                 } else {
-                                  Router.push(`/create-workspace`);
+                                  const invitations =
-                                  return;
+                                    await workspaceService.userWorkspaceInvitations();
+                                  if (invitations.length > 0) {
+                                    Router.push(`/invitations`);
+                                    return;
+                                  } else {
+                                    Router.push(`/create-workspace`);
+                                    return;
+                                  }
                                 }
-                              }
+                              })
-                            })
+                              .catch((err) => {
-                            .catch((err) => {
+                                setIsLoading(false);
-                              setIsLoading(false);
+                                console.log(err);
-                              console.log(err);
+                              });
-                            });
+                          } else setStep((prevData) => prevData + 1);
-                        } else setStep((prevData) => prevData + 1);
+                        }}
-                      }}
+                      >
-                    >
+                        {step === 4 || step === 8 ? "Get Started" : "Next"}
-                      {step === 4 || step === 8 ? "Get Started" : "Next"}
+                      </PrimaryButton>
-                    </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>
   );
 };