From 436782277717b6873dbd87f1938b5e7891929776 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheen@symph.co>
Date: Thu, 18 May 2023 23:04:55 +0800
Subject: [PATCH] re-added token caching and redirection

---
 frontend/src/hooks/useProviderAuth.ts | 29 ++++++++++++++++++++++--
 frontend/src/pages/login.tsx          | 31 +++++++++++++-------------
 frontend/src/pages/signup.tsx         | 32 +++++++++++----------------
 3 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/frontend/src/hooks/useProviderAuth.ts b/frontend/src/hooks/useProviderAuth.ts
index ca6e85db6..491069239 100644
--- a/frontend/src/hooks/useProviderAuth.ts
+++ b/frontend/src/hooks/useProviderAuth.ts
@@ -1,19 +1,44 @@
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import jwt_decode from 'jwt-decode';
 
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import SecurityClient, { PROVIDER_AUTH_TOKEN_KEY } from '@app/components/utilities/SecurityClient';
 
 export const useProviderAuth = () => {
+    const router = useRouter();
+    const { providerAuthToken: redirectedProviderAuthToken } = router.query;
     const [email, setEmail] = useState<string>('');
     const [userId, setUserId] = useState<string>('');
-    const [providerAuthToken, setProviderAuthToken] = useState<string>('');
+    const [providerAuthToken, setProviderAuthToken] = useState<string>(
+        redirectedProviderAuthToken as string || ''
+    );
     const [isProviderUserCompleted, setIsProviderUserCompleted] = useState<boolean>();
     const { createNotification } = useNotificationContext();
     const AUTH_ERROR_KEY = 'PROVIDER_AUTH_ERROR'
 
+    const handleRedirectWithToken = () => {
+        if (providerAuthToken) {
+            const {
+                userId: resultUserId,
+                email: resultEmail,
+                isUserCompleted: resultIsUserCompleted,
+            } = jwt_decode(providerAuthToken) as any;
+            setEmail(resultEmail);
+            setUserId(resultUserId);
+            setIsProviderUserCompleted(resultIsUserCompleted);
+        }
+
+    }
+
     useEffect(() => {
-        SecurityClient.setProviderAuthToken('')
+        handleRedirectWithToken();
+
+        // reset when there is no redirect auth token
+        if (!providerAuthToken) {
+            SecurityClient.setProviderAuthToken('');
+        }
+
         window.localStorage.removeItem(AUTH_ERROR_KEY);
 
         const handleStorageChange = (event: StorageEvent) => {
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index 28aa908de..ebd63b8d4 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -27,11 +27,11 @@ export default function Login() {
     providerAuthToken,
     email: providerEmail,
     setProviderAuthToken,
-    isProviderUserCompleted,
+    isProviderUserCompleted
   } = useProviderAuth();
 
   if (providerAuthToken && isProviderUserCompleted === false) {
-    router.push('/signup');
+    router.push(`/signup?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
   }
 
   const setLanguage = async (to: string) => {
@@ -57,7 +57,6 @@ export default function Login() {
   }, []);
 
   const renderView = (loginStep: number) => {
-
     if (providerAuthToken && step === 1) {
       return (
         <PasswordInputStep
@@ -68,7 +67,7 @@ export default function Login() {
           setProviderAuthToken={setProviderAuthToken}
           setStep={setStep}
         />
-      )
+      );
     }
 
     if (isLoginWithEmail && loginStep === 1) {
@@ -80,26 +79,28 @@ export default function Login() {
           setPassword={setPassword}
           setStep={setStep}
         />
-      )
+      );
     }
 
     if (!isLoginWithEmail && loginStep === 1) {
-      return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />
+      return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />;
     }
 
     if (step === 2) {
-      return <MFAStep
-        email={email || providerEmail}
-        password={password}
-        providerAuthToken={providerAuthToken}
-      />
+      return (
+        <MFAStep
+          email={email || providerEmail}
+          password={password}
+          providerAuthToken={providerAuthToken}
+        />
+      );
     }
 
-    return <div />
-  }
+    return <div />;
+  };
 
   return (
-    <div className="bg-gradient-to-tr from-bunker-500 to-bunker-800 h-screen flex flex-col justify-center pb-28 px-6 ">
+    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-bunker-500 to-bunker-800 px-6 pb-28 ">
       <Head>
         <title>{t('common.head-title', { title: t('login.title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -108,7 +109,7 @@ export default function Login() {
         <meta name="og:description" content={t('login.og-description') ?? ''} />
       </Head>
       <Link href="/">
-        <div className="flex justify-center mb-4 mt-20">
+        <div className="mb-4 mt-20 flex justify-center">
           <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
         </div>
       </Link>
diff --git a/frontend/src/pages/signup.tsx b/frontend/src/pages/signup.tsx
index e6edbb805..a02299f66 100644
--- a/frontend/src/pages/signup.tsx
+++ b/frontend/src/pages/signup.tsx
@@ -34,14 +34,10 @@ export default function SignUp() {
   const { data: serverDetails } = useFetchServerStatus();
   const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
   const { t } = useTranslation();
-  const {
-    email: providerEmail,
-    providerAuthToken,
-    isProviderUserCompleted,
-  } = useProviderAuth();
+  const { email: providerEmail, providerAuthToken, isProviderUserCompleted } = useProviderAuth();
 
   if (providerAuthToken && isProviderUserCompleted) {
-    router.push('/login');
+    router.push(`/login?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
   }
 
   if (providerAuthToken && step < 3) {
@@ -99,11 +95,11 @@ export default function SignUp() {
 
   const renderView = (registerStep: number) => {
     if (isSignupWithEmail && registerStep === 1) {
-      return <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} />
+      return <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} />;
     }
 
     if (!isSignupWithEmail && registerStep === 1) {
-      return <InitialSignupStep setIsSignupWithEmail={setIsSignupWithEmail} />
+      return <InitialSignupStep setIsSignupWithEmail={setIsSignupWithEmail} />;
     }
 
     if (registerStep === 2) {
@@ -114,7 +110,7 @@ export default function SignUp() {
           setCode={setCode}
           codeError={codeError}
         />
-      )
+      );
     }
 
     if (registerStep === 3) {
@@ -132,7 +128,7 @@ export default function SignUp() {
           setAttributionSource={setAttributionSource}
           providerAuthToken={providerAuthToken}
         />
-      )
+      );
     }
 
     if (registerStep === 4) {
@@ -143,18 +139,18 @@ export default function SignUp() {
           password={password}
           name={name}
         />
-      )
+      );
     }
 
     if (serverDetails?.emailConfigured) {
-      return <TeamInviteStep />
+      return <TeamInviteStep />;
     }
 
-    return ""
-  }
+    return '';
+  };
 
   return (
-    <div className="bg-gradient-to-tr from-bunker-600 to-bunker-800 min-h-screen flex flex-col justify-center pb-28 px-6 ">
+    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-bunker-600 to-bunker-800 px-6 pb-28 ">
       <Head>
         <title>{t('common.head-title', { title: t('signup.title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -162,12 +158,10 @@ export default function SignUp() {
         <meta property="og:title" content={t('signup.og-title') as string} />
         <meta name="og:description" content={t('signup.og-description') as string} />
       </Head>
-      <div className="flex justify-center mb-8 mt-20">
+      <div className="mb-8 mt-20 flex justify-center">
         <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
       </div>
-      <form onSubmit={(e) => e.preventDefault()}>
-        {renderView(step)}
-      </form>
+      <form onSubmit={(e) => e.preventDefault()}>{renderView(step)}</form>
     </div>
   );
 }