From d579873f18b309642bde74b386d52e7615002ac1 Mon Sep 17 00:00:00 2001 From: akahenry Date: Wed, 23 Mar 2022 14:16:07 -0300 Subject: [PATCH 1/7] Format client scritps `GLogin` and `login` --- client/components/GLogin.tsx | 68 +++++++++++++++++------------------- client/pages/login.tsx | 31 ++++++++-------- 2 files changed, 49 insertions(+), 50 deletions(-) diff --git a/client/components/GLogin.tsx b/client/components/GLogin.tsx index ca78a8e8f..431aae1e4 100644 --- a/client/components/GLogin.tsx +++ b/client/components/GLogin.tsx @@ -1,44 +1,42 @@ -import React from 'react'; -import { GoogleLogin } from 'react-google-login' -import GoogleButton from 'react-google-button' -import { refreshTokenSetup } from './utils/refreshToken' +import React from "react"; +import { GoogleLogin } from "react-google-login"; +import GoogleButton from "react-google-button"; +import { refreshTokenSetup } from "./utils/refreshToken"; import getConfig from "next/config"; - const { publicRuntimeConfig } = getConfig(); function GLogin(props) { + const onSuccess = res => { + refreshTokenSetup(res); //Refreshes tokens so it doesnt auto-logout + props.onSuccess(res.profileObj); //Returns profile obj + }; - const onSuccess = (res) => { - refreshTokenSetup(res) //Refreshes tokens so it doesnt auto-logout - props.onSuccess(res.profileObj)//Returns profile obj - }; - - const onFailure = (res) => { - console.log('[Login Failed] res: ', res); // Error message - }; + const onFailure = res => { + console.log("[Login Failed] res: ", res); // Error message + }; - return ( -
- ( - - Sign in with Google - - )} - isSignedIn={true} - /> -
- ) + return ( +
+ ( + + Sign in with Google + + )} + isSignedIn={true} + /> +
+ ); } -export default GLogin \ No newline at end of file +export default GLogin; diff --git a/client/pages/login.tsx b/client/pages/login.tsx index 9ea7b13ff..dc5cf1f78 100644 --- a/client/pages/login.tsx +++ b/client/pages/login.tsx @@ -8,7 +8,12 @@ import Link from "next/link"; import axios from "axios"; import { useStoreState, useStoreActions } from "../store"; -import { APIv2, DISALLOW_REGISTRATION, DISALLOW_GOOGLE, DISALLOW_VERIFICATION } from "../consts"; +import { + APIv2, + DISALLOW_REGISTRATION, + DISALLOW_GOOGLE, + DISALLOW_VERIFICATION +} from "../consts"; import { ColCenterV } from "../components/Layout"; import AppWrapper from "../components/AppWrapper"; import { TextInput } from "../components/Input"; @@ -18,7 +23,7 @@ import Text, { H2 } from "../components/Text"; import ALink from "../components/ALink"; import Icon from "../components/Icon"; import getConfig from "next/config"; -import GLogin from "../components/GLogin" +import GLogin from "../components/GLogin"; const LoginForm = styled(Flex).attrs({ as: "form", @@ -39,29 +44,29 @@ const LoginPage = () => { const gLogin = useStoreActions(s => s.auth.gLogin); const [error, setError] = useState(""); const [verifying, setVerifying] = useState(false); - const [loading, setLoading] = useState({ login: false, signup: false, gLogin: false }); + const [loading, setLoading] = useState({ + login: false, + signup: false, + gLogin: false + }); const [formState, { email, password, label }] = useFormState<{ email: string; password: string; }>(null, { withIds: true }); - const [google, setGoogle] = useState(); - - const googleHandler = profile => { + const googleHandler = async profile => { if (!DISALLOW_GOOGLE) { - setGoogle(profile); - if (profile.email && profile.googleId) { setLoading(s => ({ ...s, gLogin: true })); try { - gLogin({ email: profile.email, password: profile.googleId }) + gLogin({ email: profile.email, password: profile.googleId }); Router.push("/"); } catch (error) { setError(error.response.data.error); } } } - } + }; useEffect(() => { if (isAuthenticated) Router.push("/"); @@ -189,11 +194,7 @@ const LoginPage = () => { )} - {!DISALLOW_GOOGLE && ( - - )} + {!DISALLOW_GOOGLE && } Date: Wed, 23 Mar 2022 14:17:53 -0300 Subject: [PATCH 2/7] Remove `refreshToken` script and its usage --- client/components/GLogin.tsx | 2 -- client/components/utils/refreshToken.ts | 5 ----- 2 files changed, 7 deletions(-) delete mode 100644 client/components/utils/refreshToken.ts diff --git a/client/components/GLogin.tsx b/client/components/GLogin.tsx index 431aae1e4..534602ced 100644 --- a/client/components/GLogin.tsx +++ b/client/components/GLogin.tsx @@ -1,14 +1,12 @@ import React from "react"; import { GoogleLogin } from "react-google-login"; import GoogleButton from "react-google-button"; -import { refreshTokenSetup } from "./utils/refreshToken"; import getConfig from "next/config"; const { publicRuntimeConfig } = getConfig(); function GLogin(props) { const onSuccess = res => { - refreshTokenSetup(res); //Refreshes tokens so it doesnt auto-logout props.onSuccess(res.profileObj); //Returns profile obj }; diff --git a/client/components/utils/refreshToken.ts b/client/components/utils/refreshToken.ts deleted file mode 100644 index ef23c8b33..000000000 --- a/client/components/utils/refreshToken.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const refreshTokenSetup = res => { - const refreshTiming = (res.tokenObj.expires_in || 3600 - 5 * 60) * 1000; - - setInterval(res.reloadAuthResponse, refreshTiming); -}; From b7211743f1e39cbcd74866ac28a789968757142c Mon Sep 17 00:00:00 2001 From: akahenry Date: Wed, 23 Mar 2022 14:19:05 -0300 Subject: [PATCH 3/7] Set `isSignedIn` to default value (false) --- client/components/GLogin.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/components/GLogin.tsx b/client/components/GLogin.tsx index 534602ced..ca23e092f 100644 --- a/client/components/GLogin.tsx +++ b/client/components/GLogin.tsx @@ -31,7 +31,6 @@ function GLogin(props) { Sign in with Google )} - isSignedIn={true} /> ); From e54ebf0f1315854788b6238c18233ecf08a03ce3 Mon Sep 17 00:00:00 2001 From: akahenry Date: Wed, 23 Mar 2022 14:20:17 -0300 Subject: [PATCH 4/7] Set onFailure callback based on props directly --- client/components/GLogin.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/components/GLogin.tsx b/client/components/GLogin.tsx index ca23e092f..01e340669 100644 --- a/client/components/GLogin.tsx +++ b/client/components/GLogin.tsx @@ -10,17 +10,13 @@ function GLogin(props) { props.onSuccess(res.profileObj); //Returns profile obj }; - const onFailure = res => { - console.log("[Login Failed] res: ", res); // Error message - }; - return (
( Date: Wed, 23 Mar 2022 14:56:35 -0300 Subject: [PATCH 5/7] Update GLogin to wait server auth before redirect --- client/pages/login.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/pages/login.tsx b/client/pages/login.tsx index dc5cf1f78..6536b9723 100644 --- a/client/pages/login.tsx +++ b/client/pages/login.tsx @@ -59,7 +59,7 @@ const LoginPage = () => { if (profile.email && profile.googleId) { setLoading(s => ({ ...s, gLogin: true })); try { - gLogin({ email: profile.email, password: profile.googleId }); + await gLogin({ email: profile.email, password: profile.googleId }); Router.push("/"); } catch (error) { setError(error.response.data.error); From da426dcd2925b5264afa88213af3443968a6f341 Mon Sep 17 00:00:00 2001 From: akahenry Date: Wed, 23 Mar 2022 14:57:04 -0300 Subject: [PATCH 6/7] Rename GLogin onSuccess callback function --- client/pages/login.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/pages/login.tsx b/client/pages/login.tsx index 6536b9723..40f0e4af9 100644 --- a/client/pages/login.tsx +++ b/client/pages/login.tsx @@ -54,7 +54,7 @@ const LoginPage = () => { password: string; }>(null, { withIds: true }); - const googleHandler = async profile => { + const onGoogleSuccess = async profile => { if (!DISALLOW_GOOGLE) { if (profile.email && profile.googleId) { setLoading(s => ({ ...s, gLogin: true })); @@ -194,7 +194,7 @@ const LoginPage = () => { )} - {!DISALLOW_GOOGLE && } + {!DISALLOW_GOOGLE && } Date: Wed, 23 Mar 2022 14:57:31 -0300 Subject: [PATCH 7/7] Add check for Google objects before interacting --- client/store/auth.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/client/store/auth.ts b/client/store/auth.ts index c0471508b..7541f4a13 100644 --- a/client/store/auth.ts +++ b/client/store/auth.ts @@ -20,7 +20,6 @@ export interface Auth { renew: Thunk; } - export const auth: Auth = { domain: null, email: null, @@ -36,13 +35,11 @@ export const auth: Auth = { state.domain = null; state.email = null; state.isAdmin = false; - if (!DISALLOW_GOOGLE) { + if (!DISALLOW_GOOGLE && window.gapi.auth2) { const auth2 = window.gapi.auth2.getAuthInstance(); if (auth2 != null) { - auth2.signOut().then( - auth2.disconnect() - ) + auth2.signOut().then(auth2.disconnect()); } } }), @@ -54,7 +51,7 @@ export const auth: Auth = { actions.add(tokenPayload); }), gLogin: thunk(async (actions, payload) => { - const res = await axios.post(APIv2.AuthGoogle, payload) + const res = await axios.post(APIv2.AuthGoogle, payload); const { token } = res.data; cookie.set("token", token, { expires: 7 }); const tokenPayload: TokenPayload = decode(token);