re-added token caching and redirection

1 year ago · 4367822777
parent ca4a9b9937
commit 4367822777
3 changed files with 56 additions and 36 deletions
--- 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) => {
--- 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>
--- 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>
  );
 }