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) => {
-      setIsLoading(false);
-      setToastAlert({
-        title: "Oops!",
-        type: "error",
-        message: error?.response?.data?.error ?? "Enter the correct code to sign in",
+    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,
+        });
       });
-      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">
-          <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>

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