Fix auth link state parsing

cere-io · Jul 16, 2024 · b4b773f · b4b773f
1 parent 1abc6d7
commit b4b773f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/components/Login/OtpPage.tsx b/src/components/Login/OtpPage.tsx
@@ -24,6 +24,7 @@ const TIME_LEFT = 60; // seconds before next otp request
 
 interface OtpProps {
   email?: string;
+  busy?: boolean;
   onRequestLogin: (idToken: string) => void | Promise<void>;
 }
 
@@ -33,7 +34,7 @@ const validationSchema = yup
   })
   .required();
 
-export const OtpPage = ({ email, onRequestLogin }: OtpProps) => {
+export const OtpPage = ({ email, onRequestLogin, busy = false }: OtpProps) => {
   const location = useLocation();
   const navigate = useNavigate();
   const [timeLeft, setTimeLeft] = useState<number>(TIME_LEFT);
@@ -161,7 +162,7 @@ export const OtpPage = ({ email, onRequestLogin }: OtpProps) => {
           </Alert>
         )}
 
-        <LoadingButton loading={isSubmitting} variant="contained" size="large" type="submit">
+        <LoadingButton loading={isSubmitting || busy} variant="contained" size="large" type="submit">
           {errors.root ? 'Retry' : 'Verify'}
         </LoadingButton>
         {timeLeft ? (

diff --git a/src/routes/Authorize/AuthorizeLink.tsx b/src/routes/Authorize/AuthorizeLink.tsx
@@ -20,7 +20,7 @@ const AuthorizeLink = () => {
   const [query] = useSearchParams();
   const encodedState = query.get('state');
   const state = useMemo(() => parseState(encodedState), [encodedState]);
-  const [email, linkCode, otp, appName] = state || [];
+  const [email, otp, linkCode, appName] = state || [];
   const error = !state || validationError;
 
   useEffect(() => {

diff --git a/src/routes/Authorize/AuthorizeOtp.tsx b/src/routes/Authorize/AuthorizeOtp.tsx
@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Stack, useIsMobile, useTheme, ArrowBackIosIcon } from '@cere-wallet/ui';
 
 import { useLocation, useNavigate, useOutletContext } from 'react-router-dom';
@@ -16,6 +16,7 @@ const AuthorizeOtp = ({ sendOtp }: AuthorizeOtpProps) => {
   const isMobile = useIsMobile();
   const location = useLocation();
   const navigate = useNavigate();
+  const [isBusy, setBusy] = useState(false);
   const store = useOutletContext<AuthorizePopupStore>();
   const { whiteLabel } = useAppContextStore();
   const { isGame } = useTheme();
@@ -27,6 +28,7 @@ const AuthorizeOtp = ({ sendOtp }: AuthorizeOtpProps) => {
 
   const handleLoginRequest = useCallback(
     async (idToken: string) => {
+      setBusy(true);
       const { isNewUser } = await store.login(idToken);
 
       if (
@@ -42,6 +44,7 @@ const AuthorizeOtp = ({ sendOtp }: AuthorizeOtpProps) => {
       }
 
       await store.acceptSession();
+      setBusy(false);
     },
     [location, navigate, store, whiteLabel],
   );
@@ -67,7 +70,7 @@ const AuthorizeOtp = ({ sendOtp }: AuthorizeOtpProps) => {
         {hasBackButton && <ArrowBackIosIcon onClick={() => navigate(-1)} />}
 
         <Stack direction="column" textAlign="justify">
-          <OtpPage email={store.email} onRequestLogin={handleLoginRequest} />
+          <OtpPage busy={isBusy} email={store.email} onRequestLogin={handleLoginRequest} />
         </Stack>
       </Stack>
     );