Skip to content

Commit 4367822

Browse files
sheensantoscapadngansheensantoscapadngan
committed
re-added token caching and redirection
1 parent ca4a9b9 commit 4367822

File tree

3 files changed

+56
-36
lines changed

3 files changed

+56
-36
lines changed

‎frontend/src/hooks/useProviderAuth.ts

+27-2
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,44 @@
11
import { useEffect, useState } from 'react';
2+
import { useRouter } from 'next/router';
23
import jwt_decode from 'jwt-decode';
34

45
import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
56
import SecurityClient, { PROVIDER_AUTH_TOKEN_KEY } from '@app/components/utilities/SecurityClient';
67

78
export const useProviderAuth = () => {
9+
const router = useRouter();
10+
const { providerAuthToken: redirectedProviderAuthToken } = router.query;
811
const [email, setEmail] = useState<string>('');
912
const [userId, setUserId] = useState<string>('');
10-
const [providerAuthToken, setProviderAuthToken] = useState<string>('');
13+
const [providerAuthToken, setProviderAuthToken] = useState<string>(
14+
redirectedProviderAuthToken as string || ''
15+
);
1116
const [isProviderUserCompleted, setIsProviderUserCompleted] = useState<boolean>();
1217
const { createNotification } = useNotificationContext();
1318
const AUTH_ERROR_KEY = 'PROVIDER_AUTH_ERROR'
1419

20+
const handleRedirectWithToken = () => {
21+
if (providerAuthToken) {
22+
const {
23+
userId: resultUserId,
24+
email: resultEmail,
25+
isUserCompleted: resultIsUserCompleted,
26+
} = jwt_decode(providerAuthToken) as any;
27+
setEmail(resultEmail);
28+
setUserId(resultUserId);
29+
setIsProviderUserCompleted(resultIsUserCompleted);
30+
}
31+
32+
}
33+
1534
useEffect(() => {
16-
SecurityClient.setProviderAuthToken('')
35+
handleRedirectWithToken();
36+
37+
// reset when there is no redirect auth token
38+
if (!providerAuthToken) {
39+
SecurityClient.setProviderAuthToken('');
40+
}
41+
1742
window.localStorage.removeItem(AUTH_ERROR_KEY);
1843

1944
const handleStorageChange = (event: StorageEvent) => {

‎frontend/src/pages/login.tsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ export default function Login() {
2727
providerAuthToken,
2828
email: providerEmail,
2929
setProviderAuthToken,
30-
isProviderUserCompleted,
30+
isProviderUserCompleted
3131
} = useProviderAuth();
3232

3333
if (providerAuthToken && isProviderUserCompleted === false) {
34-
router.push('/signup');
34+
router.push(`/signup?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
3535
}
3636

3737
const setLanguage = async (to: string) => {
@@ -57,7 +57,6 @@ export default function Login() {
5757
}, []);
5858

5959
const renderView = (loginStep: number) => {
60-
6160
if (providerAuthToken && step === 1) {
6261
return (
6362
<PasswordInputStep
@@ -68,7 +67,7 @@ export default function Login() {
6867
setProviderAuthToken={setProviderAuthToken}
6968
setStep={setStep}
7069
/>
71-
)
70+
);
7271
}
7372

7473
if (isLoginWithEmail && loginStep === 1) {
@@ -80,26 +79,28 @@ export default function Login() {
8079
setPassword={setPassword}
8180
setStep={setStep}
8281
/>
83-
)
82+
);
8483
}
8584

8685
if (!isLoginWithEmail && loginStep === 1) {
87-
return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />
86+
return <InitialLoginStep setIsLoginWithEmail={setIsLoginWithEmail} />;
8887
}
8988

9089
if (step === 2) {
91-
return <MFAStep
92-
email={email || providerEmail}
93-
password={password}
94-
providerAuthToken={providerAuthToken}
95-
/>
90+
return (
91+
<MFAStep
92+
email={email || providerEmail}
93+
password={password}
94+
providerAuthToken={providerAuthToken}
95+
/>
96+
);
9697
}
9798

98-
return <div />
99-
}
99+
return <div />;
100+
};
100101

101102
return (
102-
<div className="bg-gradient-to-tr from-bunker-500 to-bunker-800 h-screen flex flex-col justify-center pb-28 px-6 ">
103+
<div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-bunker-500 to-bunker-800 px-6 pb-28 ">
103104
<Head>
104105
<title>{t('common.head-title', { title: t('login.title') })}</title>
105106
<link rel="icon" href="/infisical.ico" />
@@ -108,7 +109,7 @@ export default function Login() {
108109
<meta name="og:description" content={t('login.og-description') ?? ''} />
109110
</Head>
110111
<Link href="/">
111-
<div className="flex justify-center mb-4 mt-20">
112+
<div className="mb-4 mt-20 flex justify-center">
112113
<Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
113114
</div>
114115
</Link>

‎frontend/src/pages/signup.tsx

+13-19
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,10 @@ export default function SignUp() {
3434
const { data: serverDetails } = useFetchServerStatus();
3535
const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
3636
const { t } = useTranslation();
37-
const {
38-
email: providerEmail,
39-
providerAuthToken,
40-
isProviderUserCompleted,
41-
} = useProviderAuth();
37+
const { email: providerEmail, providerAuthToken, isProviderUserCompleted } = useProviderAuth();
4238

4339
if (providerAuthToken && isProviderUserCompleted) {
44-
router.push('/login');
40+
router.push(`/login?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
4541
}
4642

4743
if (providerAuthToken && step < 3) {
@@ -99,11 +95,11 @@ export default function SignUp() {
9995

10096
const renderView = (registerStep: number) => {
10197
if (isSignupWithEmail && registerStep === 1) {
102-
return <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} />
98+
return <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} />;
10399
}
104100

105101
if (!isSignupWithEmail && registerStep === 1) {
106-
return <InitialSignupStep setIsSignupWithEmail={setIsSignupWithEmail} />
102+
return <InitialSignupStep setIsSignupWithEmail={setIsSignupWithEmail} />;
107103
}
108104

109105
if (registerStep === 2) {
@@ -114,7 +110,7 @@ export default function SignUp() {
114110
setCode={setCode}
115111
codeError={codeError}
116112
/>
117-
)
113+
);
118114
}
119115

120116
if (registerStep === 3) {
@@ -132,7 +128,7 @@ export default function SignUp() {
132128
setAttributionSource={setAttributionSource}
133129
providerAuthToken={providerAuthToken}
134130
/>
135-
)
131+
);
136132
}
137133

138134
if (registerStep === 4) {
@@ -143,31 +139,29 @@ export default function SignUp() {
143139
password={password}
144140
name={name}
145141
/>
146-
)
142+
);
147143
}
148144

149145
if (serverDetails?.emailConfigured) {
150-
return <TeamInviteStep />
146+
return <TeamInviteStep />;
151147
}
152148

153-
return ""
154-
}
149+
return '';
150+
};
155151

156152
return (
157-
<div className="bg-gradient-to-tr from-bunker-600 to-bunker-800 min-h-screen flex flex-col justify-center pb-28 px-6 ">
153+
<div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-bunker-600 to-bunker-800 px-6 pb-28 ">
158154
<Head>
159155
<title>{t('common.head-title', { title: t('signup.title') })}</title>
160156
<link rel="icon" href="/infisical.ico" />
161157
<meta property="og:image" content="/images/message.png" />
162158
<meta property="og:title" content={t('signup.og-title') as string} />
163159
<meta name="og:description" content={t('signup.og-description') as string} />
164160
</Head>
165-
<div className="flex justify-center mb-8 mt-20">
161+
<div className="mb-8 mt-20 flex justify-center">
166162
<Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
167163
</div>
168-
<form onSubmit={(e) => e.preventDefault()}>
169-
{renderView(step)}
170-
</form>
164+
<form onSubmit={(e) => e.preventDefault()}>{renderView(step)}</form>
171165
</div>
172166
);
173167
}

0 commit comments

Comments
 (0)