[Liveness] When face did not fit inside oval in time limit. Pop up Timeout window but click "Try again" button did not go back to flow

[zhengjie28]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Liveness

How is your app built?

Webpack 5

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

ap-northeast-1

Please describe your bug.

Hi team,

Issue 1

We encountered issue while face did not fit in oval after timeout. It would popup a window with Try again button. However, after clicking Try again it did not come back to original screen for retaking detection.

Please see following screen recording.

output1.mp4

How do we bring user back to oval screen and re-detect?

Feature request

As previous mentioned issue, we would like to know is there any configuration can be customized by developer for the face detected timeout? Is it possible to extend the timeout longer or hardcoded by ourself at least?

Thank you!

What's the expected behaviour?

We expected that user should be return back to initial screen or oval detection screen after click 'Try again'

Help us reproduce the bug!

Follow the FaceLivenessDetector flow and do not put face in oval for a while. After timeout, it popups window with Try again button but click did not really go back to oval screen which just disappear.

Code Snippet

import React, { useEffect, useState, useCallback } from 'react';
import {
  FaceLivenessDetector,
  ErrorState,
} from '@aws-amplify/ui-react-liveness';
// eslint-disable-next-line import/no-extraneous-dependencies
import '@aws-amplify/ui-react/styles.css';
import { Loader, Input, Message } from '@ok/okd';
import { Button, Flex, Heading, Text } from '@aws-amplify/ui-react';
import { getAWSSessionId, getAWSResult } from '../../services/service';
import styles from './styles.module.less';
function FaceLiveness() {
  const [loading, setLoading] = React.useState(true);
  const [sessionId, setSessionId] = React.useState<string>('');
  const [displayValue, setDisplayValue] = useState('');
  const [result, setResult] = useState<any>(null);
  const getSessionId = async () => {
    try {
      const response = await getAWSSessionId();
      console.log(`<<< getSessionId:`, response);
      setDisplayValue(response.sessionId);
      setSessionId(response.sessionId);
    } catch (error) {
      console.log(`<<< getSessionId error:`, error);
      Message.error(`Failed to get session id:${JSON.stringify(error)}`);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    getSessionId();
  }, []);
  /*
   * Get the Face Liveness Session Result
   */
  const handleAnalysisComplete = async () => {
    console.log(`<<< handleAnalysisComplete`);
    try {
      const response = await getAWSResult(sessionId);
      setResult(response);
      console.log(`result:`, response);
    } catch (error) {
      console.log(`<<< getAWSResult error:`, error);
      Message.error(`Failed to get result:${JSON.stringify(error)}`);
    }
  };
  const setFormItemValue = (newValue: any) => {
    setDisplayValue(newValue);
  };
  const onInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = evt.target.value;
    setFormItemValue(newValue);
  };
  // const handleClick = () => {
  //   setSessionId(displayValue);
  // };
  // const buttonText = ‘confirm’;
  const handleError = (errorState: ErrorState) => {
    console.log(`<<< handleError:`, errorState);
  };
  const CustomError = useCallback((error) => {
    return (
      <Flex
        justifyContent=“center”
        alignItems=“center”
        width=“100%”
        height=“100%”
      >
        <Flex
          backgroundColor=“white”
          direction=“column”
          justifyContent=“center”
          padding=“32px”
        >
          <Heading color=“black”>{‘error?.state’}</Heading>
          <Text>{‘error?.error.message’}</Text>
          <Button>Try again?</Button>
        </Flex>
      </Flex>
    );
  }, []);
  return (
    <>
      {loading ? (
        <Loader size={Loader.SIZE.lg} />
      ) : (
        <div>
          <div>
            {' ’}
            <Input
              placeholder=“Enter Session ID”
              onChange={onInputChange}
              value={displayValue}
              size={Input.SIZE.xl}
            />
            {/* <Button onClick={handleClick}>{buttonText}</Button> */}
          </div>
          {result ? (
            <div>
              <div>{`status:${result.status}`}</div>
              <div>{`confidence:${result.confidence}`}</div>
              <div>{`referenceImage:${result.referenceImage}`}</div>
              <div>{`images:${result.images}`}</div>
            </div>
          ) : (
            sessionId?.length && (
              <div className={styles.container}>
                <FaceLivenessDetector
                  sessionId={sessionId}
                  region=“ap-northeast-1”
                  onAnalysisComplete={handleAnalysisComplete}
                  // disableStartScreen
                  onUserCancel={() => {
                    console.error(`<<< onUserCancel:`);
                    Message.error(`onUserCancel`);
                  }}
                  onError={(error) => {
                    console.error(`<<< error:`, error);
                    Message.error(
                      `FaceLivenessDetector Failed :${JSON.stringify(error)}`
                    );
                    handleError(error.state);
                  }}
                  components={{
                    ErrorView: CustomError,
                  }}
                />
              </div>
            )
          )}
        </div>
      )}
    </>
  );
}
export default FaceLiveness;

Console log output

No response

Additional information and screenshots

No response

[thaddmt]

Hi @zhengjie28 currently the Try again button triggers the same behavior as the onUserCancel as the component requires you to start the flow from the the very beginning. This is because the rekognition service does not allow re-using session ids. I noticed in your code you have overwritten the onUserCancel logic to send a message but in this case it would be helpful to add logic so that you re-fetch a session id and start over the flow from the beginning

[reesscot]

@zhengjie28 Do you have any further questions or did that answer your question?

[reesscot]

Closing this out as we haven't heard back. Please open a new ticket if you are still unable to rerender the component using the onUserCancel prop. We've updated the props documentation to make it more clear when this handler is fired:
https://ui.docs.amplify.aws/react/connected-components/liveness#facelivenessdetectorprops

[LingXiongDev]

Hi @zhengjie28 ,

Did you configure the aws-exports file on the frontend? Besides your part of the code, is there anything else for the frontend? I'm currently not sure how to configure the aws-exports file. Looking forward to your response.