search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
919 stars 297 forks source link

[Face Liveness] Cannot complete check due to server issue. Try again #5289

Closed doantruongminh closed 5 months ago

doantruongminh commented 5 months ago

Before creating a new issue, please confirm:

On which framework/platform are you having an issue?

React

Which UI component?

Liveness

How is your app built?

Next.js

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

ap-northeast-1

Please describe your bug.

I tried to implement FaceLiveness but it didn't work. It shows this error: Screenshot_2024-06-03_at_16 07 28 And warning in my console: An error was encountered in a non-retryable streaming request. I'm using Next.js Page Router's latest version and Amplify UI's latest version.

What's the expected behaviour?

Resolve this issue

Help us reproduce the bug!

Please check my code

Code Snippet

_app.tsx

import { useEffect, useState } from "react";
import type { AppProps } from "next/app";
import Head from "next/head";
import { appWithTranslation } from "next-i18next";
import { AppCacheProvider } from "@mui/material-nextjs/v13-pagesRouter";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import { Amplify } from "aws-amplify";

import { initI18n } from "@/helpers/i18n";
import nextI18nextConfig from "../../next-i18next.config";
import "@/styles/globals.css";
import theme from "@/styles/theme";
import awsexport from "@/aws-exports";

Amplify.configure(awsexport);

function App(props: AppProps) {
  const { Component, pageProps } = props;
  const [status, setStatus] = useState<"loading" | "loaded">("loading");

  useEffect(() => {
    initI18n().finally(() => {
      setStatus("loaded");
    });
  }, []);

  return (
    <AppCacheProvider {...props}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component key={status} {...pageProps} />
      </ThemeProvider>
    </AppCacheProvider>
  );
}

export default appWithTranslation(App, nextI18nextConfig);

FaceLivenessDetector.tsx

import { FC, useState, useCallback } from "react";
import { ThemeProvider, Loader } from "@aws-amplify/ui-react";
import {
  AwsCredentialProvider,
  FaceLivenessDetectorCore,
} from "@aws-amplify/ui-react-liveness";

import "@aws-amplify/ui-react/styles.css";
import { LivenessError } from "@/types/liveness";
import { getLivenessSessionApi } from "@/apis/auth.api";

interface Props {
  sessionId?: string;
  region: string;
  credentials: {
    accessKeyId: string;
    secretAccessKey: string;
    sessionToken: string;
    expiration: Date;
  };
  handleComplete: () => Promise<void>;
  handleError?: (error: LivenessError) => void;
}

const FaceLivenessDetector: FC<Props> = ({
  sessionId,
  region,
  credentials,
  handleComplete,
  handleError,
}) => {
  const credentialProvider = useCallback<AwsCredentialProvider>(async () => {
    return credentials;
  }, [credentials]);

  return (
    <ThemeProvider>
      {!sessionId ? (
        <Loader />
      ) : (
        <FaceLivenessDetectorCore
          sessionId={sessionId}
          region={region}
          config={{
            credentialProvider,
          }}
          onAnalysisComplete={handleComplete}
          onError={handleError}
        />
      )}
    </ThemeProvider>
  );
};

export default FaceLivenessDetector;

Console log output

An error was encountered in a non-retryable streaming request.

Additional information and screenshots

{
  "name": "bitcastle-kyc-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3002",
    "build": "next build",
    "build:dev": "NEXT_PUBLIC_APP_STAGE=dev next build",
    "build:staging": "NEXT_PUBLIC_APP_STAGE=staging next build",
    "build:release": "NEXT_PUBLIC_APP_STAGE=release next build",
    "start": "next start -p 3002",
    "start:dev": "NEXT_PUBLIC_APP_STAGE=dev next start -p 3002",
    "start:staging": "NEXT_PUBLIC_APP_STAGE=staging next start -p 3002",
    "start:release": "NEXT_PUBLIC_APP_STAGE=release next start -p 3002",
    "lint": "next lint",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.1.12",
    "@aws-amplify/ui-react-liveness": "^3.0.22",
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.5",
    "@mui/material": "^5.15.16",
    "@mui/material-nextjs": "^5.15.11",
    "aws-amplify": "^6.3.4",
    "axios": "^1.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "i18next": "^23.11.5",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "next": "14.2.3",
    "next-i18next": "^15.3.0",
    "query-string": "^9.0.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.5",
    "react-i18next": "^14.1.1",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@svgr/webpack": "^8.1.0",
    "@types/date-fns": "^2.6.0",
    "@types/js-cookie": "^3.0.6",
    "@types/lodash": "^4.17.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "patch-package": "^8.0.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}
thaddmt commented 5 months ago

Is this similar to this issue? https://github.com/aws-amplify/amplify-ui/issues/5272

doantruongminh commented 5 months ago

Is this similar to this issue? #5272

It's different. My logs show only a warning: An error was encountered in a non-retryable streaming request.

doantruongminh commented 5 months ago

Because I get both a session and credentials from our server so I defined credential provider like this:

const credentialProvider = useCallback<AwsCredentialProvider>(async () => {
    return credentials;
  }, [credentials]);

Is this code valid?

thaddmt commented 5 months ago

Do you have any session ids we could look at?

doantruongminh commented 5 months ago

@thaddmt You can try

{
   region: "ap-northeast-1"
   session_id: "392ca4f2-470a-448d-be9d-60427c4eb0d4"
}
doantruongminh commented 5 months ago

I have a question. Currently, my API response has both session ID and credential. Does that cause problems with my credential declaration? Because as far as I know, it is asynchronous.

zchenwei commented 5 months ago

I have a question. Currently, my API response has both session ID and credential. Does that cause problems with my credential declaration? Because as far as I know, it is asynchronous.

Hi @doantruongminh, I have requested the server team to help check the logs per the session id you provided. As for your credentials setup, I think that looks good based on the code snippet you shared. Thanks!

doantruongminh commented 5 months ago

@zchenwei Sorry to bother. Have you given a checking result for my issue yet?

zchenwei commented 5 months ago

@zchenwei Sorry to bother. Have you given a checking result for my issue yet?

Hey @doantruongminh, the team checked the logs with the provided session id. Create Liveness was successful but we don’t see any logs for StartFaceLIveness call. Did you see any errors related to StartFaceLIveness call and/or ensure the call was invoked in your application code?

doantruongminh commented 5 months ago

@zchenwei Sorry to bother. Have you given a checking result for my issue yet?

Hey @doantruongminh, the team checked the logs with the provided session id. Create Liveness was successful but we don’t see any logs for StartFaceLIveness call. Did you see any errors related to StartFaceLIveness call and/or ensure the call was invoked in your application code?

I didn't see any errors. My log just shows a warning: An error was encountered in a non-retryable streaming request. Can you let me know how to check if StartFaceLIveness is working?

esauerbo commented 5 months ago

@doantruongminh I see that you're passing onError={handleError} but didn't see the implementation of handleError. Does your handleError actually print out the error? Something like 

onError={(error) => {
   console.error(error);
}}

If not, try adding that and let us know what the output is. Typically, when Create Session is successful but Start Session isn't, it indicates a mismatch in the regions or endpoints used in the respective calls.

doantruongminh commented 5 months ago

@doantruongminh I see that you're passing onError={handleError} but didn't see the implementation of handleError. Does your handleError actually print out the error? Something like

onError={(error) => {
   console.error(error);
}}

If not, try adding that and let us know what the output is. Typically, when Create Session is successful but Start Session isn't, it indicates a mismatch in the regions or endpoints used in the respective calls.

I saw an error: Screenshot 2024-06-17 at 11 05 02 It seems my server response did not return the correct datetime format. I will try to format it.

doantruongminh commented 5 months ago

@eeatonaws @zchenwei I resolved my issue. Thank you for supporting me. I will close this issue.