It's dangerous to go alone, take this {captcha}

components/ConfirmPhoneModal/ConfirmPhoneModal.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import ModalWrapper from '../ModalWrapper'
 import CustomFormButton from '../CustomFormButton'
 
@@ -25,9 +25,13 @@ const unknownErrorMessage = 'Профиль не обновлен: систем
  * @param {function} onClose
  * @param {function} onSubmit
  */
-const ConfirmPhoneModal = ({ visible, errorCode, onSubmit, onClose }) => {
-  const [verificationCode, setVerificationCode] = useState('')
-
+const ConfirmPhoneModal = ({
+  visible,
+  errorCode,
+  onClose,
+  verificationCode,
+  setVerificationCode,
+}) => {
   const errorMessage = useMemo(() => {
     if (errorCode) return ErrorCodesMapper[errorCode] || unknownErrorMessage
     return null
@@ -67,10 +71,8 @@ const ConfirmPhoneModal = ({ visible, errorCode, onSubmit, onClose }) => {
               width='49%'
               text='Подтвердить'
               disabled={isSubmitDisabled}
-              onClick={() => onSubmit(verificationCode)}
             />
           </div>
-          <div id='phone-confirm-recaptcha' />
         </div>
       </ModalWrapper>
       <style jsx>{`

components/UserInfoBox/UserInfoBox.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import firebase from 'firebase'
 import CustomInput from '../CustomInput'
 import Dropdown from '../Dropdown'
 
@@ -56,7 +57,19 @@ const UserInfoBox = ({
       isCityNameValid(currentCity.value) &&
       isTelephoneValid(phone)
     ) {
-      onSubmit()
+      let applicationVerifier
+      try {
+        applicationVerifier = new firebase.auth.RecaptchaVerifier(
+          'phone-confirm-recaptcha',
+          {
+            size: 'normal',
+          }
+        )
+      } catch (e) {
+        applicationVerifier = document.getElementById('phone-confirm-recaptcha')
+        console.log(e)
+      }
+      onSubmit(applicationVerifier)
     } else {
       alert('Поля не соответствуют требованиям')
     }
@@ -102,9 +115,14 @@ const UserInfoBox = ({
         >
           Подтвердить
         </button>
+        <div id='phone-confirm-recaptcha' className='captcha' />
       </footer>
       <style jsx>
         {`
+          .captcha {
+            z-index: 666666;
+          }
+
           .buttonFooter {
             display: flex;
             justify-content: space-around;

pages/profile/Profile.js

@@ -71,6 +71,8 @@ const Profile = () => {
   const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false)
   const [phoneChangeError, setPhoneChangeError] = useState(null)
 
+  const [verificationCode, setVerificationCode] = useState('')
+
   const resetFields = () => {
     if (currentUser) {
       setNameInputState(currentUser.name)
@@ -139,29 +141,24 @@ const Profile = () => {
     setPhoneChangeError(null)
   }
 
-  const onSubmitPhoneChange = verificationCode => {
-    let applicationVerifier
-    try {
-      applicationVerifier = new firebase.auth.RecaptchaVerifier(
-        'phone-confirm-recaptcha',
-        {
-          size: 'normal',
-        }
-      )
-    } catch (e) {
-      applicationVerifier = document.getElementById('phone-confirm-recaptcha')
-    }
+  const onSubmitPhoneChange = applicationVerifier => {
+    console.log('STAS')
     try {
+      console.log(firebase.auth().currentUser)
+      console.log(phoneInputState)
       const provider = new firebase.auth.PhoneAuthProvider()
       provider
         .verifyPhoneNumber(phoneInputState, applicationVerifier)
         .then(verificationId => {
           try {
+            console.log(verificationId)
+            console.log(firebase.auth().currentUser.phoneNumber)
             const phoneCredential = firebase.auth.PhoneAuthProvider.credential(
               verificationId,
               verificationCode
             )
             firebase.auth().currentUser.updatePhoneNumber(phoneCredential)
+            console.log(firebase.auth().currentUser.phoneNumber)
           } catch (e) {
             setPhoneChangeError(e.code)
           }
@@ -179,7 +176,7 @@ const Profile = () => {
     }
   }
 
-  const onSubmit = async () => {
+  const onSubmit = async applicationVerifier => {
     if (
       currentUser.name === nameInputState &&
       currentUser.cityId === cityInputState.id &&
@@ -201,6 +198,7 @@ const Profile = () => {
     if (isPhoneUpdated) {
       setIsConfirmModalVisible(true)
       setProfileData(preparedData)
+      onSubmitPhoneChange(applicationVerifier)
     } else {
       updateProfile(preparedData)
     }
@@ -218,9 +216,11 @@ const Profile = () => {
       <Header />
       <ConfirmPhoneModal
         visible={isConfirmModalVisible}
-        onSubmit={onSubmitPhoneChange}
         onClose={onClosePhoneConfirmModal}
         errorCode={phoneChangeError}
+        verificationCode={verificationCode}
+        setVerificationCode={setVerificationCode}
+        onClick={onSubmitPhoneChange}
       />
       <div className='content'>
         <header className='mainHeader'>Личный кабинет</header>