(Liveness): Cannot complete check due to server issue. Try again

[GeneralLHW]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Liveness

Please describe your feature-request in detail.

When I start to click begin check, sometimes the problems in the picture below appear continuously. Why?

Please describe a solution you'd like.

No response

We love contributors! Is this something you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[ShubhamKumar2802]

Facing the same issue. Logging the error on console prints out a 'SERVER_ERROR' with the message: "The request signature we calculated does not match the signature you provided. Check your AWS Secret Access Key and signing method. Consult the service documentation for details."

[ioanabrooks]

@GeneralLHW, the message shown in the screenshot suggests an error either within the Rekognition streaming API or within the onAnalysisComplete callback function. Please share more information regarding your implementation, any error messages visible in the console, and related details for us to be able to help further.

[GeneralLHW]

@ioanabrooks Hello, I found this error today. The error message is below:

[ioanabrooks]

@GeneralLHW I am not able to repro the issue, would you be able to share a code snippet? Would also be helpful to know what versions of amplify libraries you are using, and the actual error message. Please also make sure to check our troubleshooting guide and double check the configuration following the prerequisites in our quick start guide.

[GeneralLHW]

@ioanabrooks I removed part of the business code, the code is as follows

import React from "react";
import { FaceLivenessDetector } from "@aws-amplify/ui-react-liveness";
import { Loader, ThemeProvider } from "@aws-amplify/ui-react";
import { getQueryString } from "./utils/index";
import "./App.scss";
import { Amplify } from "aws-amplify";
import awsexports from "./aws-exports";
// import Axios from "axios";
Amplify.configure(awsexports);

function App() {
  //人头像
  const [faceUrlImg, setFaceUrlImg] = React.useState("");
  const [loading, setLoading] = React.useState(true);
  const [createLivenessApiData, setCreateLivenessApiData] = React.useState({});

  React.useEffect(() => {
    const fetchCreateLiveness = async () => {
      /*
       * This should be replaced with a real call to your own backend API
       */
      try {
        const res = await window.axios.get(
          "https://www.abc.com/api/web/faceLive/createSession"
        );

        const mockResponse = { sessionId: res.data.data };
        const data = mockResponse;

        setCreateLivenessApiData(data);
        setLoading(false);
      } catch (err) {
        console.error(err);
      }
    };

    fetchCreateLiveness();
  }, []);

  const handleAnalysisComplete = async () => {
    /*
     * This should be replaced with a real call to your own backend API
     */

    try {
      const faceResult = await window.axios.get(
        "https://www.abc.com/api/web/faceLive/getSessionResult?sessionId=" +
          createLivenessApiData.sessionId
      );
    } catch (err) {
      console.error(err);
    }
  };

  const checkAgain = () => {
    // setLoading(false);
    // setFaceUrlImg("");

    window.location.reload();
  };

  return (
    <ThemeProvider>
      {loading ? (
        <Loader />
      ) : (
        <>
          { (
            <FaceLivenessDetector
              sessionId={createLivenessApiData.sessionId}
              region="us-east-1"
              onAnalysisComplete={handleAnalysisComplete}
              config={{
                binaryPath:
                  "https://lswy.s3.ap-northeast-2.amazonaws.com/wbm/web/other/",
                faceModelUrl:
                  "https://lswy.s3.ap-northeast-2.amazonaws.com/wbm/web/other/model.json",
              }}

              onError={(error) => {
                console.error(error);
              }}
            />
          )}
        </>
      )}
    </ThemeProvider>
  );
}

export default App;

"dependencies": {
    "@aws-amplify/ui-react": "^5.3.0",
    "@aws-amplify/ui-react-liveness": "^2.0.6",
    "antd": "^5.8.4",
    "aws-amplify": "^5.3.10",
    "axios": "^1.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vconsole": "^3.15.1"
  }

[fbocolowski]

Hi guys!

I'm getting the same error. I'm trying to do a proof-of-concept of Liveness in React before moving to Android.

I want to use no authentication on the front-end, simply hit my backend, get a SessionID, run the Liveness and tell the backend it's done.

The repo is: https://github.com/fbocolowski/liveness-demo

A pure Next.js repo with amplify-ui and liveness.

The AWS backend are getting 200 but when I click "Start video check" it crashes.

Thanks!

[reesscot]

@fbocolowski In order to call the Rekognition API's, you need to provide AWS Credentials. You can either do this by enabling guest access when setting up Amplify Auth or by requiring customers to authenticate using the Authenticator UI Component. A final option is to use the Custom Credentials Provider to provide the AWS credentials yourself. Please let me know if this solves your issue.

[CodEw47]

I have the same problem, any solution?

[calebpollman]

@CodEw47 Can you please provide any relevant error messages you received? Additionally, you may want to read over the FaceLivenessDetector troubleshooting guide in the Amplify UI documentation

[CodEw47]

I'm returning the failure hooks and I found this in the backend:

[CodEw47]

how can I adjust this

[thaddmt]

@CodEw47 Is it possible the clock on your device is out of sync with the server? It seems like the reported time is more than 5 minutes earlier than the server is expecting. (20:15:06 vs 20:22:25)

[CodEw47]

In this case, do I have to adjust it in the frontend? How do I do this sync?

[thaddmt]

@CodEw47 I'm not exactly sure but it seems like your device is out of sync. Have you tried testing on a different device? or have verified that your date is in sync with the system clock? You can also try manually adjusting your device's clock time to match the servers

[mukul-rai]

@reesscot @ioanabrooks any solution for this?

[CodEw47]

We've been dealing with this problem for a long time here at the company, we haven't found any solution, I'd also like to know, we can't update the customer's time and there's no way to ask them to synchronize it on the device, it's bad for UX.

[esauerbo]

@CodEw47 we've opened a feature request to support clock skews of greater than 5 minutes and will work this into our roadmap planning.

Please +1 (thumbs up) the feature request, and feel free to comment with any additional details about your specific use case. If anyone else is seeing the same error with message Signature Expired ... please do the same to help us gauge interest in this feature.

[reesscot]

@GeneralLHW We've been able to reproduce the statusCode 500 error as being an issue with how we were handling initial connection timeouts. A fix has been released in 3.0.17.

npm install @aws-amplify/ui-react-liveness@latest

Can you please try it out and let us know if it fixes your issue?

[CodEw47]

@esauerbo :+1:

[calebpollman]

Closing this issue, fix was released in @aws-amplify/ui-react-liveness@3.0.17. Please let us know if the issue reoccurs

[reesscot]

@CodEw47 Please see: https://github.com/aws-amplify/amplify-ui/issues/5124#issuecomment-2204693822