Uppercase the auth factor token in input value to match the email casing. (#7094)

1 files changed, 10 insertions, 0 deletions

diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx
index 6a48b1bcc..2cd6abdd1 100644
--- a/src/screens/Login/LoginForm.tsx
+++ b/src/screens/Login/LoginForm.tsx
@@ -60,6 +60,8 @@ export const LoginForm = ({
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [isAuthFactorTokenNeeded, setIsAuthFactorTokenNeeded] =
     useState<boolean>(false)
+  const [isAuthFactorTokenValueEmpty, setIsAuthFactorTokenValueEmpty] =
+    useState<boolean>(true)
   const identifierValueRef = useRef<string>(initialHandle || '')
   const passwordValueRef = useRef<string>('')
   const authFactorTokenValueRef = useRef<string>('')
@@ -262,6 +264,7 @@ export const LoginForm = ({
               textContentType="username"
               blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
               onChangeText={v => {
+                setIsAuthFactorTokenValueEmpty(v === '')
                 authFactorTokenValueRef.current = v
               }}
               onSubmitEditing={onPressNext}
@@ -269,6 +272,13 @@ export const LoginForm = ({
               accessibilityHint={_(
                 msg`Input the code which has been emailed to you`,
               )}
+              style={[
+                {
+                  textTransform: isAuthFactorTokenValueEmpty
+                    ? 'none'
+                    : 'uppercase',
+                },
+              ]}
             />
           </TextField.Root>
           <Text style={[a.text_sm, t.atoms.text_contrast_medium, a.mt_sm]}>