awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +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 { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import jwt_decode from 'jwt-decode'; import jwt_decode from 'jwt-decode';
import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider'; import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
import SecurityClient, { PROVIDER_AUTH_TOKEN_KEY } from '@app/components/utilities/SecurityClient'; import SecurityClient, { PROVIDER_AUTH_TOKEN_KEY } from '@app/components/utilities/SecurityClient';
export const useProviderAuth = () => { export const useProviderAuth = () => {
const router = useRouter();
const { providerAuthToken: redirectedProviderAuthToken } = router.query;
const [email, setEmail] = useState<string>(''); const [email, setEmail] = useState<string>('');
const [userId, setUserId] = 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 [isProviderUserCompleted, setIsProviderUserCompleted] = useState<boolean>();
const { createNotification } = useNotificationContext(); const { createNotification } = useNotificationContext();
const AUTH_ERROR_KEY = 'PROVIDER_AUTH_ERROR' 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(() => { useEffect(() => {
SecurityClient.setProviderAuthToken('') handleRedirectWithToken();
// reset when there is no redirect auth token
if (!providerAuthToken) {
SecurityClient.setProviderAuthToken('');
}
window.localStorage.removeItem(AUTH_ERROR_KEY); window.localStorage.removeItem(AUTH_ERROR_KEY);
const handleStorageChange = (event: StorageEvent) => { const handleStorageChange = (event: StorageEvent) => {

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

@@ -27,11 +27,11 @@ export default function Login() {
providerAuthToken, providerAuthToken,
email: providerEmail, email: providerEmail,
setProviderAuthToken, setProviderAuthToken,
isProviderUserCompleted, isProviderUserCompleted
} = useProviderAuth(); } = useProviderAuth();
if (providerAuthToken && isProviderUserCompleted === false) { if (providerAuthToken && isProviderUserCompleted === false) {
router.push('/signup'); router.push(`/signup?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
} }
const setLanguage = async (to: string) => { const setLanguage = async (to: string) => {
@@ -57,7 +57,6 @@ export default function Login() {
}, []); }, []);
const renderView = (loginStep: number) => { const renderView = (loginStep: number) => {
if (providerAuthToken && step === 1) { if (providerAuthToken && step === 1) {
return ( return (
<PasswordInputStep <PasswordInputStep
@@ -68,7 +67,7 @@ export default function Login() {
setProviderAuthToken={setProviderAuthToken} setProviderAuthToken={setProviderAuthToken}
setStep={setStep} setStep={setStep}
/> />
) );
} }
if (isLoginWithEmail && loginStep === 1) { if (isLoginWithEmail && loginStep === 1) {
@@ -80,26 +79,28 @@ export default function Login() {
setPassword={setPassword} setPassword={setPassword}
setStep={setStep} setStep={setStep}
/> />
) );
} }
if (!isLoginWithEmail && loginStep === 1) { if (!isLoginWithEmail && loginStep === 1) {
return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} /> return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />;
} }
if (step === 2) { if (step === 2) {
return <MFAStep return (
email={email || providerEmail} <MFAStep
password={password} email={email || providerEmail}
providerAuthToken={providerAuthToken} password={password}
/> providerAuthToken={providerAuthToken}
/>
);
} }
return <div /> return <div />;
} };
return ( 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> <Head>
<title>{t('common.head-title', { title: t('login.title') })}</title> <title>{t('common.head-title', { title: t('login.title') })}</title>
<link rel="icon" href="/infisical.ico" /> <link rel="icon" href="/infisical.ico" />
@@ -108,7 +109,7 @@ export default function Login() {
<meta name="og:description" content={t('login.og-description') ?? ''} /> <meta name="og:description" content={t('login.og-description') ?? ''} />
</Head> </Head>
<Link href="/"> <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" /> <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
</div> </div>
</Link> </Link>

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

@@ -34,14 +34,10 @@ export default function SignUp() {
const { data: serverDetails } = useFetchServerStatus(); const { data: serverDetails } = useFetchServerStatus();
const [isSignupWithEmail, setIsSignupWithEmail] = useState(false); const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const { const { email: providerEmail, providerAuthToken, isProviderUserCompleted } = useProviderAuth();
email: providerEmail,
providerAuthToken,
isProviderUserCompleted,
} = useProviderAuth();
if (providerAuthToken && isProviderUserCompleted) { if (providerAuthToken && isProviderUserCompleted) {
router.push('/login'); router.push(`/login?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
} }
if (providerAuthToken && step < 3) { if (providerAuthToken && step < 3) {
@@ -99,11 +95,11 @@ export default function SignUp() {
const renderView = (registerStep: number) => { const renderView = (registerStep: number) => {
if (isSignupWithEmail && registerStep === 1) { if (isSignupWithEmail && registerStep === 1) {
return <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} /> return <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} />;
} }
if (!isSignupWithEmail && registerStep === 1) { if (!isSignupWithEmail && registerStep === 1) {
return <InitialSignupStep setIsSignupWithEmail={setIsSignupWithEmail} /> return <InitialSignupStep setIsSignupWithEmail={setIsSignupWithEmail} />;
} }
if (registerStep === 2) { if (registerStep === 2) {
@@ -114,7 +110,7 @@ export default function SignUp() {
setCode={setCode} setCode={setCode}
codeError={codeError} codeError={codeError}
/> />
) );
} }
if (registerStep === 3) { if (registerStep === 3) {
@@ -132,7 +128,7 @@ export default function SignUp() {
setAttributionSource={setAttributionSource} setAttributionSource={setAttributionSource}
providerAuthToken={providerAuthToken} providerAuthToken={providerAuthToken}
/> />
) );
} }
if (registerStep === 4) { if (registerStep === 4) {
@@ -143,18 +139,18 @@ export default function SignUp() {
password={password} password={password}
name={name} name={name}
/> />
) );
} }
if (serverDetails?.emailConfigured) { if (serverDetails?.emailConfigured) {
return <TeamInviteStep /> return <TeamInviteStep />;
} }
return "" 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> <Head>
<title>{t('common.head-title', { title: t('signup.title') })}</title> <title>{t('common.head-title', { title: t('signup.title') })}</title>
<link rel="icon" href="/infisical.ico" /> <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 property="og:title" content={t('signup.og-title') as string} />
<meta name="og:description" content={t('signup.og-description') as string} /> <meta name="og:description" content={t('signup.og-description') as string} />
</Head> </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" /> <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
</div> </div>
<form onSubmit={(e) => e.preventDefault()}> <form onSubmit={(e) => e.preventDefault()}>{renderView(step)}</form>
{renderView(step)}
</form>
</div> </div>
); );
} }