[PIN input] It's possible to pass PIN validation with invalid PIN right after entering valid one

[AlexanderShenshin]

Description of problem

It's possible to pass PIN validation with invalid PIN (at least displayed one).

It seems that if user enters valid PIN and then switches focus to previous PIN input cells, actual input value will not be updated until user actually start entering PIN value again.

Expected behavior

Incorrect PIN pop-up is displayed and PIN validation is not passed.

Steps to reproduce

• Open the app.
• Enter a valid PIN.
• Tap on any of the PIN cells => data is deleted from this and further cells.
• Tap Unlock button.

Screenshots and/or log output

Note: Video was recorded on older version, but I confirmed that issue reproduces on specified commit.

Invalid.PIN.edited.mp4

Environment

• Occurs on Android
• Occurs on iOS

Build #: https://github.com/hyperledger/aries-mobile-agent-react-native/tree/db3f18af25f554cd5d616e977e08551b77791c09

Android Device Model: Xiaomi Mi 10T Pro / MIUI version 12.5.3 (Android version 11 RKQ1.200826.002)

iOS Device Model: iPhone 8 Plus / iOS 16.5

Workaround

No workaround is required.

Severity

• High
• Medium
• Low

[jp0707]

I am looking into this and would like to raise a PR soon.
cc: @amanji , @jleach

[jp0707]

This issue is happening as CodeField from 'react-native-confirmation-code-field' used for PIN input does not call onChangeText when clicked on any cell of PIN input. The hook useClearByFocusCell is called which somewhere internally changes the PIN but without calling onChangeText. Due to this the PIN state in PINEnter.tsx remains unchanged.

To fix this issue we can try removing the use of the useClearByFocusCell hook.

[jp0707]

I found the solution and created a PR for the fix - #957
cc: @amanji , @jleach

[jp0707]

We can close this issue.