Merge pull request #55 from authorizerdev/feat/totp_screen_inside_verify_otp_page

feat: TOTP screen inside verify-otp page

Author: lakhansamani

src/components/AuthorizerVerifyOtp.tsx

@@ -6,11 +6,22 @@ import { ButtonAppearance, MessageType, Views } from '../constants';
 import { useAuthorizer } from '../contexts/AuthorizerContext';
 import { StyledButton, StyledFooter, StyledLink } from '../styledComponents';
 import { Message } from './Message';
+import { TotpDataType } from '../types';
+import { AuthorizerTOTPScanner } from './AuthorizerTOTPScanner';
 
 interface InputDataType {
   otp: string | null;
 }
 
+const initTotpData: TotpDataType = {
+  is_screen_visible: false,
+  email: '',
+  phone_number: '',
+  authenticator_scanner_image: '',
+  authenticator_secret: '',
+  authenticator_recovery_codes: [],
+};
+
 export const AuthorizerVerifyOtp: FC<{
   setView?: (v: Views) => void;
   onLogin?: (data: any) => void;
@@ -22,6 +33,7 @@ export const AuthorizerVerifyOtp: FC<{
   const [error, setError] = useState(``);
   const [successMessage, setSuccessMessage] = useState(``);
   const [loading, setLoading] = useState(false);
+  const [totpData, setTotpData] = useState<TotpDataType>({ ...initTotpData });
   const [sendingOtp, setSendingOtp] = useState(false);
   const [formData, setFormData] = useState<InputDataType>({
     otp: null,
@@ -59,6 +71,26 @@ export const AuthorizerVerifyOtp: FC<{
         setError(errors[0]?.message || ``);
         return;
       }
+
+      // If TOTP validated using recovery code then show totp screen with scanner
+      if (
+        res &&
+        res.should_show_totp_screen &&
+        res.authenticator_scanner_image &&
+        res.authenticator_secret &&
+        res.authenticator_recovery_codes
+      ) {
+        setTotpData({
+          is_screen_visible: true,
+          email: data.email || ``,
+          phone_number: data.phone_number || ``,
+          authenticator_scanner_image: res.authenticator_scanner_image,
+          authenticator_secret: res.authenticator_secret,
+          authenticator_recovery_codes: res.authenticator_recovery_codes,
+        });
+        return;
+      }
+
       if (res) {
         setError(``);
         setAuthData({
@@ -124,6 +156,24 @@ export const AuthorizerVerifyOtp: FC<{
     }
   }, [formData.otp]);
 
+  if (totpData.is_screen_visible) {
+    return (
+      <AuthorizerTOTPScanner
+        {...{
+          setView,
+          onLogin,
+          email: totpData.email || ``,
+          phone_number: totpData.phone_number || ``,
+          authenticator_scanner_image: totpData.authenticator_scanner_image,
+          authenticator_secret: totpData.authenticator_secret,
+          authenticator_recovery_codes:
+            totpData.authenticator_recovery_codes || [],
+        }}
+        urlProps={urlProps}
+      />
+    );
+  }
+
   return (
     <>
       {successMessage && (