[HOLD for payment 2022-01-19] App shows blank screen when user denies camera access when validating identity - Reported by @adeel0202

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to app
2. Send money to someone
3. Click pay with expensify
4. Deny access to camera

Expected Result:

User should be able to verify identity or clear error should display

Actual Result:

In iOS, if you deny the camera permission and try to verify identity again, you see the blank screen with an unclear error message.
In Android, if you deny the camera permission and try to verify identity again, you do see the proper message and settings option to allow the permissions manually, however, when you allow the permission in the settings app and come back to the app, you see the same blank screen with the unclear error message. After that, if you try verify identity again, then the camera opens fine.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Android
• IOS

Version Number: 1.1.22-0
Reproducible in staging?: Y
Reproducible in production?:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

ios.mp4

android.mp4

Expensify/Expensify Issue URL:
Issue reported by: @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1639768520380700

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @mountiny (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mountiny]

@mvtglobally Could you by any chance reproduce this in production so we can make sure this is a regression or persistent issue. Thank you!

[mvtglobally]

@mountiny I am able to reproduce in PROD app as well

[MelvinBot]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[mountiny]

@mvtglobally Thank you for double checking.

I will try to look into this, but it in case someone is faster to solve this, I am also making it External. Feel free to submit proposals!

[mountiny]

@bfitzexpensify 🎅 -bump

[bfitzexpensify]

Done!

Upwork job to resolve issue is here

Upwork job for reporting is here - @adeel0202

[adeel0202]

@bfitzexpensify applied on upwork for reporting. Thanks

[cbhushan1995]

@bfitzexpensify Have you guys tried to observe camera permission whenever the user's application state changes ( background -> Foreground vice versa ). I think it could be the issue. I can look into this.

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[MelvinBot]

Current assignee @mountiny is eligible for the Exported assigner, not assigning anyone new.

[mountiny]

@cbhushan1995 I believe the issue might lay in the way how we re-check the camera permissions. Feel free to write a proposal here if you manage to discover what the problem is.

[cbhushan1995]

@mountiny is there any test credentials by which i could check existing functionality of app ?

[mountiny]

@cbhushan1995 Feel free to refer the readme files in the repository or ask in the Slack channel as someone will be able to help you faster usually. Essentially, just create your personal account.

Are you in the Slack channel? If not, follow these instructions and you will get invited 😊

[phivh]

Hi, @mountiny
I've just reproduced, there should be a missing implementation from 3rd, seems for iOS they still didn't know how to catch the permission denied and show the page to navigate the user to the setting screen as you saw on Android.
Ref: https://github.com/onfido/react-native-sdk/issues/17#issuecomment-767488275
This is a proposal for now:

1. Add function to check camera permission
2. Observing app state to restart Fido step

[parasharrajat]

Thanks for the proposal @phivh .
I have couple of questions and requests.

1. What is the reason behind the blank screen?

Add function to check camera permission
Observing app state to restart Fido step

How would you do that? Where will you do that?

[phivh]

Thanks for the proposal @phivh . I have couple of questions and requests.

1. What is the reason behind the blank screen?

Add function to check camera permission
Observing app state to restart Fido step

How would you do that? Where will you do that?
Hi @parasharrajat

1. What is the reason behind the blank screen?
   There is no catch error message "Onfido.OnfidoFlowError" which is returned from Fido, then it renders a null value, that is why you saw a blank screen.

How would you do that? Where will you do that?
There are 2 ways:

1. We can add one more library camera, it would support us to check the permission camera before starting Fido
2. It should be taking more time - As we can cache error from line 38 at this file: src/components/Onfido/index.native.js to detect it is camera denied then show an alert for user enable the camera permission on iOS, on Android we can create a function to observe app state when the user comes back after enabling the camera.

[hafizsameed]

Solution:
If user denies access to the camera then, we can do following steps:
1)we will show a screen with Error message so, that user should what went wrong.
2) On the same screen, there will be a button to give access to the camera (user might have accidentally denied the access so, he/she should not face any problem. they can always provide access to the camera by pressing the button)
3) We will also provide button to go back so, user can go back instead of stuck on that screen if he/she is not willing to provide access.

[mountiny]

@phivh and @hafizsameed Both of your proposals are reasonable.

In general, a good UX practice is to make sure user always knows what state the app is at. If there is some problem, user should know what is wrong. Thus if they deny access to camera and they need access to camera to complete this essential task, we should show them screen which says something like: "Uh-oh, you have not granted us camera access. We need that to complete this verification" and then "Click this button to grant the access" (exact copy would be different).

Then coming back from the settings if required, the camera should work as it will have access, ideally without any other action required by the user.

That is in summary what you have both described. However, if you look over other issues you will notice we would like to get moreless exact code changes required for this to be fixed. Which lines in code need to be changed to achieve this behaviour. It makes the entire process more transparent and we can spot earlier if some proposal is not viable because if something works in high-level does not mean it will actually work implemented.

I realize this requires more time invested into the proposal from your side, but if you are sure your proposal will work and it will be in line with the coding patterns used throughout the codebase, we will most likely pick that proposal! 😊

Would you be able to describe what exactly need to be changed, and ideally attach video proving these changes work? As you are both new contributors here, I realize there is lots to digest with our process. We are here to help! So feel free to ask if anything is unclear and thank you for the proposals! 😊

Me and/or Rajat will help you later to polish the code style and iron out any potential problems!

[phivh]

Hi @mountiny, I've proposed 2 options above and I want to demonstrate a simple one that catches by the error message, and this is related to existing ways that are currently on the app.

After debugging, there are still missing 2 error messages on iOS and 1 crashing message on android.

So, I can add them into src/CONST.js

ERROR: {
    ...
    USER_CAMERA_DENINED: 'Onfido.OnfidoFlowError',
    USER_CAMERA_PERMISSION: 'Encountered an error: cameraPermission',
    USER_CAMERA_CONSENT_DENIED: 'Unexpected result Intent. It might be a result of incorrect integration, make sure you only pass Onfido intent to handleActivityResult. It might be due to unpredictable crash or error. Please report the problem to [email protected]. Intent: null \n resultCode: 0',
},

Then handle in src/components/Onfido/index.native.js at catching error step:

.catch((error) => {
    const errorMessage = lodashGet(error, 'message', CONST.ERROR.UNKNOWN_ERROR);
   
    // If the user cancels the Onfido flow we won't log this error as it's normal. In the React Native SDK the user exiting the flow will trigger this error which we can use as
    // our "user exited the flow" callback. On web, this event has it's own callback passed as a config so we don't need to bother with this there.
    if (_.contains([CONST.ONFIDO.ERROR.USER_CANCELLED, CONST.ONFIDO.ERROR.USER_TAPPED_BACK], errorMessage)) {
        this.props.onUserExit();
        return;
    }

    // Added 2 mising errors message with alert to ask user give permission on ios (Onfido related issue: https://github.com/onfido/react-native-sdk/issues/17#issuecomment-767488275)
    // Add 1 missing error message that related to camera user consent on android handle by browser it self (Onfido related issue: https://github.com/onfido/react-native-sdk/issues/11)
    if (_.contains([CONST.ONFIDO.ERROR.USER_CAMERA_PERMISSION, CONST.ONFIDO.ERROR.USER_CAMERA_DENINED, CONST.ONFIDO.ERROR.USER_CAMERA_CONSENT_DENIED], errorMessage)) {
        Alert.alert('"New Expensify" Would Like to Access the Camera ', 'Uh-oh, you have not granted us camera access. We need that to complete this verification', [ 
            {
                text: 'Cancel',
                onPress: () => {
                    this.props.onUserExit();
                }
            },
            {
                text: 'Open Settings',
                onPress: () => {
                    this.props.onUserExit();
                    Linking.openSettings(); 
                }
            },
        ]); 
        return;
    }

    this.props.onError(errorMessage);
});

Demo

iOS

ios.mp4

Android

android.mp4

Please let me know if there is any concerns from you guys.

[MelvinBot]

📣 @phivh You have been assigned to this job by @mountiny!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[phivh]

@mountiny
Thanks! I'm preparing PR.
@parasharrajat
Who should I request to code review?

Hi @bfitzexpensify, I've just applied for the job on Upwork.

[parasharrajat]

@phivh it would be automatic. Also, you don't have permission to request a review.

[MelvinBot]

Triggered auto assignment to @davidcardoza (Waiting for copy), see https://stackoverflow.com/c/expensify/questions/7025/ for more details.

[mountiny]

@davidcardoza Hi! 👋 We have two new messages being shown through this PR. For Onfido KYC flow, in case user denies access to camera, we need to re-prompt the user since the camera access is essential. So when they try to verify, this prompt will show:

Now the copy is:

cameraRequestTitle: '"New Expensify" Would Like to Access the Camera'
cameraRequestMessage: 'Uh-oh, you have not granted us camera access. We need that to complete this verification'

which was just a quick proposal, so we can rewrite it completely as you wish. Thank you very much for your help

[mountiny]

Waiting for a copy.

[mountiny]

Friendly bump @davidcardoza 👋

[davidcardoza]

Can you change "We need that to complete this verification" to "We need access to complete verification." All looks good otherwise.

[mountiny]

Of course! Thank you David! 🙌

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.27-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: App shows blank screen when user denies camera access #6969

If no regressions arise, payment will be issued on 2022-01-19. 🎊

[bfitzexpensify]

No regressions.

Issued payment to @adeel0202 and @phivh - thank you both!

@parasharrajat, sent you an offer here for C+ work

[bfitzexpensify]

All payments issued, we're all done here