awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 10:10:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

re-added token caching and redirection

Browse Source
This commit is contained in:
Sheen Capadngan
2023-05-18 23:04:55 +08:00
parent ca4a9b9937
commit 4367822777
3 changed files with 56 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/hooks/useProviderAuth.ts
View File

@@ -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) => {

31
frontend/src/pages/login.tsx
View File

@@ -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>

32
frontend/src/pages/signup.tsx
View File

@@ -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>
);
}