diff --git a/package-lock.json b/package-lock.json
index 30fec75..28cd4a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@authorizerdev/authorizer-react",
-  "version": "1.2.0-beta.7",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@authorizerdev/authorizer-react",
-      "version": "1.2.0-beta.7",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "@authorizerdev/authorizer-js": "^2.0.0-beta.3",
diff --git a/src/components/AuthorizerVerifyOtp.tsx b/src/components/AuthorizerVerifyOtp.tsx
index 8b2a776..0008c31 100644
--- a/src/components/AuthorizerVerifyOtp.tsx
+++ b/src/components/AuthorizerVerifyOtp.tsx
@@ -1,16 +1,26 @@
 import React, { FC, useEffect, useState } from 'react';
 import { VerifyOtpInput } from '@authorizerdev/authorizer-js';
 import styles from '../styles/default.css';
-
 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 +32,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 +70,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({
@@ -127,6 +158,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 && (