refactor captcha modal to fix ios crashes;

Author: adrastaea

packages/mobile/src/App.tsx

@@ -55,7 +55,7 @@ import { UnregisteredUsernameContextMenu } from './components/ContextMenu/menus/
 import NewUsernameRequestedScreen from './screens/NewUsernameRequested/NewUsernameRequested.screen'
 import { PossibleImpersonationAttackScreen } from './screens/PossibleImpersonationAttack/PossibleImpersonationAttack.screen'
 import UsernameTakenScreen from './screens/UsernameTaken/UsernameTaken.screen'
-import { CaptchaDrawer } from './components/ModalBottomDrawer/drawers/Captcha.drawer'
+import { CaptchaModal } from './components/Captcha/CaptchaModal.component'
 
 const logger = createLogger('app')
 
@@ -130,7 +130,7 @@ function App(): JSX.Element {
               <ChannelContextMenu />
               <InvitationContextMenu />
               <UnregisteredUsernameContextMenu />
-              <CaptchaDrawer />
+              <CaptchaModal />
               <ConfirmationBox {...confirmationBox} />
             </ThemeProvider>
           </MenuProvider>

packages/mobile/src/components/Captcha/CaptchaModal.component.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { render, act } from '@testing-library/react-native'
+import { useDispatch, useSelector } from 'react-redux'
+import { captcha } from '@quiet/state-manager'
+import CaptchaModal from './CaptchaModal.component'
+
+let mockCaptchaState = {
+  captchaRequested: true,
+  siteKey: 'test-site-key',
+}
+
+const mockDispatch = jest.fn()
+const mockShow = jest.fn()
+const mockHide = jest.fn()
+let latestOnMessage: ((event: unknown) => void) | null = null
+
+jest.mock('react-redux', () => ({
+  useDispatch: jest.fn(),
+  useSelector: jest.fn(),
+}))
+
+jest.mock('@quiet/state-manager', () => ({
+  captcha: {
+    selectors: {
+      captchaRequested: (state: typeof mockCaptchaState) => state.captchaRequested,
+      siteKey: (state: typeof mockCaptchaState) => state.siteKey,
+    },
+    actions: {
+      captchaFormResponse: (payload: unknown) => ({ type: 'captcha/captchaFormResponse', payload }),
+    },
+  },
+}))
+
+jest.mock('@hcaptcha/react-native-hcaptcha', () => {
+  const React = require('react')
+  const { View } = require('react-native')
+  return {
+    __esModule: true,
+    default: React.forwardRef(({ onMessage, siteKey }: any, ref: any) => {
+      latestOnMessage = onMessage
+      React.useImperativeHandle(ref, () => ({ show: mockShow, hide: mockHide }))
+      return <View testID='mock-hcaptcha' accessibilityLabel={siteKey} />
+    }),
+  }
+})
+
+describe('CaptchaModal', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    mockCaptchaState = { captchaRequested: true, siteKey: 'test-site-key' }
+    mockDispatch.mockClear()
+    mockShow.mockClear()
+    mockHide.mockClear()
+    latestOnMessage = null
+    ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch)
+    ;(useSelector as jest.Mock).mockImplementation(selector => selector(mockCaptchaState))
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('mounts ConfirmHcaptcha and calls show() when captcha is requested', () => {
+    render(<CaptchaModal />)
+    act(() => {
+      jest.runAllTimers()
+    })
+    expect(mockShow).toHaveBeenCalled()
+  })
+
+  it('dispatches the solved token on success message', () => {
+    render(<CaptchaModal />)
+    act(() => {
+      latestOnMessage?.({
+        nativeEvent: { data: 'mock-solved-token-abcdefghijklmnopqrstuvwxyz123456' },
+        success: true,
+        markUsed: jest.fn(),
+        reset: jest.fn(),
+      })
+    })
+    expect(mockDispatch).toHaveBeenCalledWith(
+      captcha.actions.captchaFormResponse({ token: 'mock-solved-token-abcdefghijklmnopqrstuvwxyz123456' })
+    )
+  })
+
+  it('dispatches a cancellation on challenge-closed', () => {
+    render(<CaptchaModal />)
+    act(() => {
+      latestOnMessage?.({
+        nativeEvent: { data: 'challenge-closed' },
+        success: false,
+        reset: jest.fn(),
+      })
+    })
+    expect(mockDispatch).toHaveBeenCalledWith(
+      captcha.actions.captchaFormResponse({ error: 'Captcha cancelled by user' })
+    )
+  })
+})

packages/mobile/src/components/Captcha/CaptchaModal.component.tsx

@@ -0,0 +1,125 @@
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
+import { BackHandler } from 'react-native'
+import ConfirmHcaptcha from '@hcaptcha/react-native-hcaptcha'
+import { useDispatch, useSelector } from 'react-redux'
+import { captcha } from '@quiet/state-manager'
+import { defaultTheme } from '../../styles/themes/default.theme'
+import { createLogger } from '../../utils/logger'
+
+const logger = createLogger('CaptchaModal')
+
+interface HCaptchaMessageEvent {
+  nativeEvent: { data: string }
+  success: boolean
+  markUsed?: () => void
+  reset: () => void
+}
+
+const SHOW_DELAY_MS = 100
+
+// Polyfill: react-native-modal@13 (bundled inside @hcaptcha/react-native-hcaptcha)
+// calls BackHandler.removeEventListener which was removed in RN 0.72+. Its
+// absence crashes the modal on hide. Install a no-op shim if missing.
+// (addEventListener still returns a subscription with .remove() so leak is minor.)
+const bhMut = BackHandler as unknown as { removeEventListener?: (...args: unknown[]) => boolean }
+if (typeof bhMut.removeEventListener !== 'function') {
+  bhMut.removeEventListener = () => true
+}
+
+export const CaptchaModal: FC = () => {
+  const dispatch = useDispatch()
+  const captchaRef = useRef<ConfirmHcaptcha | null>(null)
+  // Guard against the library's hide()/onMessage emitting repeated cancels
+  // after we've already dispatched a terminal response for this session.
+  const respondedRef = useRef(false)
+
+  const captchaRequested = useSelector(captcha.selectors.captchaRequested)
+  const siteKey = useSelector(captcha.selectors.siteKey)
+
+  // Latch the first non-empty siteKey so the native modal stays mounted
+  // across community-leave flows that wipe redux state. Unmounting the
+  // library's RN modal mid-presentation crashes iOS WebView.
+  const [mountedSiteKey, setMountedSiteKey] = useState('')
+  useEffect(() => {
+    if (siteKey && siteKey !== mountedSiteKey) {
+      setMountedSiteKey(siteKey)
+    }
+  }, [siteKey, mountedSiteKey])
+
+  useEffect(() => {
+    if (!mountedSiteKey) return
+    if (captchaRequested && siteKey !== '') {
+      logger.info(`Showing captcha for ${siteKey}`)
+      respondedRef.current = false
+      const id = setTimeout(() => captchaRef.current?.show(), SHOW_DELAY_MS)
+      return () => clearTimeout(id)
+    }
+    // Pass no argument: the library synthesizes an onMessage({data:'cancel'})
+    // when hide() is called with a truthy source, which would re-enter our
+    // handler and loop.
+    captchaRef.current?.hide()
+    return undefined
+  }, [captchaRequested, siteKey, mountedSiteKey])
+
+  const respond = useCallback(
+    (payload: Parameters<typeof captcha.actions.captchaFormResponse>[0]) => {
+      if (respondedRef.current) return
+      respondedRef.current = true
+      dispatch(captcha.actions.captchaFormResponse(payload))
+    },
+    [dispatch]
+  )
+
+  const handleMessage = useCallback(
+    (event: HCaptchaMessageEvent) => {
+      const data = event?.nativeEvent?.data
+      if (!data) return
+      if (respondedRef.current) return
+
+      if (data === 'open') return
+
+      if (data === 'cancel' || data === 'challenge-closed') {
+        logger.info('hCaptcha cancelled')
+        respond({ error: 'Captcha cancelled by user' })
+        captchaRef.current?.hide()
+        return
+      }
+
+      if (data === 'challenge-expired' || data === 'expired') {
+        logger.warn('hCaptcha expired, resetting')
+        event.reset?.()
+        return
+      }
+
+      if (event.success) {
+        event.markUsed?.()
+        logger.info('hCaptcha solved')
+        respond({ token: data })
+        captchaRef.current?.hide()
+        return
+      }
+
+      logger.error('hCaptcha verification failed', data)
+      respond({ error: `Captcha error: ${data}` })
+      captchaRef.current?.hide()
+    },
+    [respond]
+  )
+
+  if (mountedSiteKey === '') return null
+
+  return (
+    <ConfirmHcaptcha
+      ref={captchaRef}
+      siteKey={mountedSiteKey}
+      onMessage={handleMessage}
+      size='invisible'
+      orientation='portrait'
+      languageCode='en'
+      showLoading
+      loadingIndicatorColor={defaultTheme.palette.background.lushSky}
+    />
+  )
+}
+
+export default CaptchaModal