Flow gets interrupted when doing cross-device flow from FB browser to native browser

[liorewire]

Background

Significant amount of our traffic comes from facebook and they wont allow opening ads links in the system browser - it has to open inside facebook browser. The onfido client sdk is not compatible with Facebook browser, specifically, in relation to camera permissions, so the sdk falls back to "upload from your device" flow.

BTW: Do you plan to solve this issue?

Finally what we decide to do is to force the user into the desktop-sms cross-device flow (when the user gets an sms with a link to onfido website to continue the flow - which solves the issue by opening the flow in the system browser)

What was the expected behaviour?

Hi,

I forked the SDK into a version which enforces cross-device flow, and doesn't view the QR code component in it. I did this in order to force users coming from the facebook browser in their phone into the cross-device flow to continue the flow in their phone's native browser so there won't be any problems when taking pictures for the process. The expected behaviour is that the user will continue the flow in their browser, take pictures of the document and a selfie, and complete the flow.

What happened instead?

When starting the flow in facebook browser, getting the link, moving to the native browser, and starting to take pictures of the documents / selfies, the flow sometimes reaches an error that says that something went wrong and the user needs to start all over again in the original browser (in this case, the facebook browser). I believe this is the "INTERRUPTED_FLOW_ERROR" error. This behaviour prevents the user from completing the flow.

Version info:

• Onfido SDK - forked from 6.2.1
• OS - iOS
• Browser - Dacebook Browser, Safari
• Device - iPhone 11
• Node
• Framework or relevant dependencies (if applicable)

Integration configuration:

Please add code snippet(s) of your integration with the Onfido SDK and all customisations of it.

Inside the SDK :

• In "src/components/utils/index.js":

const isFacebookApp =
  (navigator.userAgent || '').includes('FBAN') ||
  (navigator.userAgent || '').includes('FBAV') ||
  (navigator.vendor || '').includes('FBAN') ||
  (navigator.vendor || '').includes('FBAV') ||
  (window.opera || '').includes('FBAN') ||
  (window.opera || '').includes('FBAV')

// Copied from https://github.com/muaz-khan/DetectRTC/blob/master/DetectRTC.js
export const isDesktop =
  !/Android|webOS|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(
  ( !/Android|webOS|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(
    navigator.userAgent || ''
  ) && !isIOS
  ) && !isIOS ) || isFacebookApp

• In " src/components/crossDevice/CrossDeviceLink/index.js" line 19:

const SECURE_LINK_VIEWS = [
  // {
  //   id: 'qr_code',
  //   className: 'qrCodeLinkOption',
  //   label: 'get_link.link_qr',
  //   subtitle: 'get_link.subtitle_qr',
  // },
  {
    id: 'sms',
    className: 'smsLinkOption',
    label: 'get_link.link_sms',
    subtitle: 'get_link.subtitle_sms',
  },
  {
    id: 'copy_link',
    className: 'copyLinkOption',
    label: 'get_link.link_url',
    subtitle: 'get_link.subtitle_url',
  },
]

• In " src/components/crossDevice/CrossDeviceLink/index.js" line 137:

this.state = {
      // currentViewId: validatesViewIdWithFallback(
      //   props.steps.find(({ type }) => type === 'document')?.options
      //     ?._initialCrossDeviceLinkView
      // ),
      currentViewId: 'sms',
      sending: false,
      error: {},
      validNumber: true,
    }

Also, in the options that are sent as a prop to the SDK component, set the 'forceCrossDevice' field to 'true'.

Steps to reproduce:

• Make the changes in the code
• Start the flow from facebook browser
• Start the cross-device flow and continue it on your phone's browser

Could it be something with the connection to the server? If yes, it could be that when moving from FB browser to safari, the FB app is suspended and maybe the session between the SDK in the FB browser and the server gets cut.

[alonp99]

+1