@aws-amplify/ui-react-liveness 3.0.13 → 3.0.15

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var auth = require('aws-amplify/auth');
 var react = require('@xstate/react');
+var nanoid = require('nanoid');
 var xstate = require('xstate');
 var tfjsCore = require('@tensorflow/tfjs-core');
 var faceDetection = require('@tensorflow-models/face-detection');
@@ -16,7 +17,7 @@ var utilFormatUrl = require('@aws-sdk/util-format-url');
 var eventstreamSerdeBrowser = require('@smithy/eventstream-serde-browser');
 var fetchHttpHandler = require('@smithy/fetch-http-handler');
 var protocolHttp = require('@smithy/protocol-http');
-var nanoid = require('nanoid');
+var signatureV4 = require('@smithy/signature-v4');
 var uiReact = require('@aws-amplify/ui-react');
 var ui = require('@aws-amplify/ui');
 var internal = require('@aws-amplify/ui-react/internal');
@@ -113,7 +114,6 @@ const WS_CLOSURE_CODE = {
     USER_ERROR_DURING_CONNECTION: 4007,
 };
 
-/* eslint-disable */
 /**
  * Returns the random number between min and max
  * seeded with the provided random seed.
@@ -204,31 +204,6 @@ function getStaticLivenessOvalDetails({ width, height, widthSeed = 1.0, centerXS
         height: Math.floor(ovalHeight),
     };
 }
-function drawStaticOval(canvasEl, videoEl, videoMediaStream) {
-    const { width, height } = videoMediaStream.getTracks()[0].getSettings();
-    // Get width/height of video element so we can compute scaleFactor
-    // and set canvas width/height.
-    const { width: videoScaledWidth, height: videoScaledHeight } = videoEl.getBoundingClientRect();
-    canvasEl.width = Math.ceil(videoScaledWidth);
-    canvasEl.height = Math.ceil(videoScaledHeight);
-    const ovalDetails = getStaticLivenessOvalDetails({
-        width: width,
-        height: height,
-        ratioMultiplier: 0.5,
-    });
-    ovalDetails.flippedCenterX = width - ovalDetails.centerX;
-    // Compute scaleFactor which is how much our video element is scaled
-    // vs the intrinsic video resolution
-    const scaleFactor = videoScaledWidth / videoEl.videoWidth;
-    // Draw oval in canvas using ovalDetails and scaleFactor
-    drawLivenessOvalInCanvas({
-        canvas: canvasEl,
-        oval: ovalDetails,
-        scaleFactor,
-        videoEl: videoEl,
-        isStartScreen: true,
-    });
-}
 /**
  * Draws the provided liveness oval on the canvas.
  */
@@ -273,6 +248,31 @@ function drawLivenessOvalInCanvas({ canvas, oval, scaleFactor, videoEl, isStartS
         throw new Error('Cannot find Canvas.');
     }
 }
+function drawStaticOval(canvasEl, videoEl, videoMediaStream) {
+    const { width, height } = videoMediaStream.getTracks()[0].getSettings();
+    // Get width/height of video element so we can compute scaleFactor
+    // and set canvas width/height.
+    const { width: videoScaledWidth, height: videoScaledHeight } = videoEl.getBoundingClientRect();
+    canvasEl.width = Math.ceil(videoScaledWidth);
+    canvasEl.height = Math.ceil(videoScaledHeight);
+    const ovalDetails = getStaticLivenessOvalDetails({
+        width: width,
+        height: height,
+        ratioMultiplier: 0.5,
+    });
+    ovalDetails.flippedCenterX = width - ovalDetails.centerX;
+    // Compute scaleFactor which is how much our video element is scaled
+    // vs the intrinsic video resolution
+    const scaleFactor = videoScaledWidth / videoEl.videoWidth;
+    // Draw oval in canvas using ovalDetails and scaleFactor
+    drawLivenessOvalInCanvas({
+        canvas: canvasEl,
+        oval: ovalDetails,
+        scaleFactor,
+        videoEl: videoEl,
+        isStartScreen: true,
+    });
+}
 function clearOvalCanvas({ canvas, }) {
     const ctx = canvas.getContext('2d');
     if (ctx) {
@@ -283,9 +283,43 @@ function clearOvalCanvas({ canvas, }) {
         throw new Error('Cannot find Canvas.');
     }
 }
+function getPupilDistanceAndFaceHeight(face) {
+    const { leftEye, rightEye, mouth } = face;
+    const eyeCenter = [];
+    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
+    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
+    const pupilDistance = Math.sqrt((leftEye[0] - rightEye[0]) ** 2 + (leftEye[1] - rightEye[1]) ** 2);
+    const faceHeight = Math.sqrt((eyeCenter[0] - mouth[0]) ** 2 + (eyeCenter[1] - mouth[1]) ** 2);
+    return { pupilDistance, faceHeight };
+}
+function generateBboxFromLandmarks(face, oval) {
+    const { leftEye, rightEye, nose, leftEar, rightEar, top: faceTop, height: faceHeight, } = face;
+    const { height: ovalHeight, centerY } = oval;
+    const ovalTop = centerY - ovalHeight / 2;
+    const eyeCenter = [];
+    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
+    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
+    const { pupilDistance: pd, faceHeight: fh } = getPupilDistanceAndFaceHeight(face);
+    const alpha = 2.0, gamma = 1.8;
+    const ow = (alpha * pd + gamma * fh) / 2;
+    const oh = 1.618 * ow;
+    let cx;
+    if (eyeCenter[1] <= (ovalTop + ovalHeight) / 2) {
+        cx = (eyeCenter[0] + nose[0]) / 2;
+    }
+    else {
+        cx = eyeCenter[0];
+    }
+    const bottom = faceTop + faceHeight;
+    const top = bottom - oh;
+    const left = Math.min(cx - ow / 2, rightEar[0]);
+    const right = Math.max(cx + ow / 2, leftEar[0]);
+    return { bottom, left, right, top };
+}
 /**
  * Returns the state of the provided face with respect to the provided liveness oval.
  */
+// eslint-disable-next-line max-params
 function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersection, sessionInformation) {
     let faceMatchState;
     const challengeConfig = sessionInformation?.Challenge?.FaceMovementAndLightChallenge
@@ -312,7 +346,7 @@ function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersect
     const faceDetectionWidthThreshold = ovalDetails.width * FaceIouWidthThreshold;
     const faceDetectionHeightThreshold = ovalDetails.height * FaceIouHeightThreshold;
     /** From Science
-     * p=max(min(1,0.75∗(si​−s0​)/(st​−s0​)+0.25)),0)
+     * p=max(min(1,0.75∗(si−s0)/(st−s0)+0.25)),0)
      */
     const faceMatchPercentage = Math.max(Math.min(1, (0.75 * (intersection - initialFaceIntersection)) /
         (intersectionThreshold - initialFaceIntersection) +
@@ -339,44 +373,6 @@ function getFaceMatchStateInLivenessOval(face, ovalDetails, initialFaceIntersect
     }
     return { faceMatchState, faceMatchPercentage };
 }
-function getPupilDistanceAndFaceHeight(face) {
-    const { leftEye, rightEye, mouth } = face;
-    const eyeCenter = [];
-    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
-    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
-    const pupilDistance = Math.sqrt((leftEye[0] - rightEye[0]) ** 2 + (leftEye[1] - rightEye[1]) ** 2);
-    const faceHeight = Math.sqrt((eyeCenter[0] - mouth[0]) ** 2 + (eyeCenter[1] - mouth[1]) ** 2);
-    return { pupilDistance, faceHeight };
-}
-function generateBboxFromLandmarks(face, oval) {
-    const { leftEye, rightEye, nose, leftEar, rightEar, top: faceTop, height: faceHeight, } = face;
-    const { height: ovalHeight, centerY } = oval;
-    const ovalTop = centerY - ovalHeight / 2;
-    const eyeCenter = [];
-    eyeCenter[0] = (leftEye[0] + rightEye[0]) / 2;
-    eyeCenter[1] = (leftEye[1] + rightEye[1]) / 2;
-    const { pupilDistance: pd, faceHeight: fh } = getPupilDistanceAndFaceHeight(face);
-    const alpha = 2.0, gamma = 1.8;
-    const ow = (alpha * pd + gamma * fh) / 2;
-    const oh = 1.618 * ow;
-    let cx;
-    if (eyeCenter[1] <= (ovalTop + ovalHeight) / 2) {
-        cx = (eyeCenter[0] + nose[0]) / 2;
-    }
-    else {
-        cx = eyeCenter[0];
-    }
-    const faceBottom = faceTop + faceHeight;
-    const top = faceBottom - oh;
-    const left = Math.min(cx - ow / 2, rightEar[0]);
-    const right = Math.max(cx + ow / 2, leftEar[0]);
-    return {
-        left: left,
-        top: top,
-        right: right,
-        bottom: faceBottom,
-    };
-}
 /**
  * Returns the illumination state in the provided video frame.
  */
@@ -492,7 +488,7 @@ function fillOverlayCanvasFractional({ overlayCanvas, prevColor, nextColor, vide
 const isClientFreshnessColorSequence = (obj) => !!obj;
 function getColorsSequencesFromSessionInformation(sessionInformation) {
     const colorSequenceFromSessionInfo = sessionInformation.Challenge.FaceMovementAndLightChallenge
-        .ColorSequences || [];
+        .ColorSequences ?? [];
     const colorSequences = colorSequenceFromSessionInfo.map(({ FreshnessColor, DownscrollDuration: downscrollDuration, FlatDisplayDuration: flatDisplayDuration, }) => {
         const colorArray = FreshnessColor.RGB;
         const color = `rgb(${colorArray[0]},${colorArray[1]},${colorArray[2]})`;
@@ -550,7 +546,7 @@ async function isFaceDistanceBelowThreshold({ faceDetector, videoEl, ovalDetails
         case 1: {
             //exactly one face detected, match face with oval;
             detectedFace = detectedFaces[0];
-            const width = ovalDetails.width;
+            const { width } = ovalDetails;
             const { pupilDistance, faceHeight } = getPupilDistanceAndFaceHeight(detectedFace);
             const alpha = 2.0, gamma = 1.8;
             const calibratedPupilDistance = (alpha * pupilDistance + gamma * faceHeight) / 2 / alpha;
@@ -694,12 +690,11 @@ class BlazeFaceFaceDetection extends FaceDetection {
  * Helper wrapper class over the native MediaRecorder.
  */
 class VideoRecorder {
-    constructor(stream, options = {}) {
+    constructor(stream) {
         if (typeof MediaRecorder === 'undefined') {
             throw Error('MediaRecorder is not supported by this browser');
         }
         this._stream = stream;
-        this._options = options;
         this._chunks = [];
         this._recorder = new MediaRecorder(stream, { bitsPerSecond: 1000000 });
         this._setupCallbacks();
@@ -787,7 +782,7 @@ class VideoRecorder {
     }
 }
 
-const VERSION = '3.0.13';
+const VERSION = '3.0.15';
 
 const BASE_USER_AGENT = `ui-react-liveness/${VERSION}`;
 const getLivenessUserAgent = () => {
@@ -813,10 +808,10 @@ const getIterator = (stream) => {
         return stream;
     }
     if (isReadableStream(stream)) {
-        //If stream is a ReadableStream, transfer the ReadableStream to async iterable.
+        // If stream is a ReadableStream, transfer the ReadableStream to async iterable.
         return eventstreamSerdeBrowser.readableStreamtoIterable(stream);
     }
-    //For other types, just wrap them with an async iterable.
+    // For other types, just wrap them with an async iterable.
     return {
         [Symbol.asyncIterator]: async function* () {
             yield stream;
@@ -875,8 +870,7 @@ class CustomWebSocketFetchHandler {
         }
         this.sockets[url].push(socket);
         socket.binaryType = 'arraybuffer';
-        const { connectionTimeout = DEFAULT_WS_CONNECTION_TIMEOUT_MS } = await this
-            .configPromise;
+        const { connectionTimeout = DEFAULT_WS_CONNECTION_TIMEOUT_MS } = await this.configPromise;
         await this.waitForReady(socket, connectionTimeout);
         const { body } = request;
         const bodyStream = getIterator(body);
@@ -987,6 +981,75 @@ class CustomWebSocketFetchHandler {
     }
 }
 
+const isCredentialsProvider = (credentialsProvider) => typeof credentialsProvider === 'function';
+// the return interface of `fetchAuthSession` includes `credentials` as
+// optional, but `credentials` is always returned. If `fetchAuthSession`
+// is called for an unauthenticated end user, values of `accessKeyId`
+// and `secretAccessKey` are `undefined`
+const isCredentials = (credentials) => !!(credentials?.accessKeyId && credentials?.secretAccessKey);
+/**
+ * Resolves the `credentials` param to be passed to `RekognitionStreamingClient` which accepts either:
+ * - a `credentials` object
+ * - a `credentialsProvider` callback
+ *
+ * @param credentialsProvider optional `credentialsProvider` callback
+ * @returns {Promise<AwsCredentials | AwsCredentialProvider>} `credentials` object or valid `credentialsProvider` callback
+ */
+async function resolveCredentials(credentialsProvider) {
+    const hasCredentialsProvider = isCredentialsProvider(credentialsProvider);
+    if (hasCredentialsProvider) {
+        return credentialsProvider;
+    }
+    if (credentialsProvider && !hasCredentialsProvider) {
+        throw new Error('Invalid credentialsProvider');
+    }
+    try {
+        const result = (await auth.fetchAuthSession()).credentials;
+        if (isCredentials(result)) {
+            return result;
+        }
+        throw new Error('Missing credentials');
+    }
+    catch (e) {
+        const { message } = e;
+        throw new Error(`Invalid credentials: ${message}`);
+    }
+}
+
+// override aws sdk default value of 60
+const REQUEST_EXPIRY = 299;
+class Signer extends signatureV4.SignatureV4 {
+    presign(request, options) {
+        return super.presign(request, {
+            ...options,
+            expiresIn: REQUEST_EXPIRY,
+            // `headers` that should not be signed. Liveness WebSocket
+            // request omits `headers` except for required `host` header. Signature
+            // could be a mismatch if other `headers` are signed
+            unsignableHeaders: new Set(Object.keys(request.headers).filter((header) => header !== 'host')),
+        });
+    }
+}
+
+const CONNECTION_TIMEOUT = 10000;
+const CUSTOM_USER_AGENT = `${utils.getAmplifyUserAgent()} ${getLivenessUserAgent()}`;
+async function createStreamingClient({ credentialsProvider, endpointOverride, region, }) {
+    const credentials = await resolveCredentials(credentialsProvider);
+    const clientconfig = {
+        credentials,
+        customUserAgent: CUSTOM_USER_AGENT,
+        region,
+        requestHandler: new CustomWebSocketFetchHandler({
+            connectionTimeout: CONNECTION_TIMEOUT,
+        }),
+        signerConstructor: Signer,
+    };
+    if (endpointOverride) {
+        clientconfig.endpointProvider = () => ({ url: new URL(endpointOverride) });
+    }
+    return new clientRekognitionstreaming.RekognitionStreamingClient(clientconfig);
+}
+
 const TIME_SLICE = 1000;
 function isBlob(obj) {
     return obj.arrayBuffer !== undefined;
@@ -1016,9 +1079,7 @@ class LivenessStreamProvider {
         this.videoRecorder.start(TIME_SLICE);
     }
     sendClientInfo(clientInfo) {
-        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', {
-            data: { clientInfo },
-        }));
+        this.videoRecorder.dispatch(new MessageEvent('clientSesssionInfo', { data: { clientInfo } }));
     }
     async stopVideo() {
         await this.videoRecorder.stop();
@@ -1030,32 +1091,15 @@ class LivenessStreamProvider {
         if (this.videoRecorder.getState() === 'recording') {
             await this.stopVideo();
         }
-        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', {
-            data: { code: code },
-        }));
+        this.videoRecorder.dispatch(new MessageEvent('endStreamWithCode', { data: { code } }));
         return;
     }
     async init() {
-        const credentials = this.credentialProvider ?? (await auth.fetchAuthSession()).credentials;
-        if (!credentials) {
-            throw new Error('No credentials');
-        }
-        const clientconfig = {
-            credentials,
+        this._client = await createStreamingClient({
+            credentialsProvider: this.credentialProvider,
+            endpointOverride: this.endpointOverride,
             region: this.region,
-            customUserAgent: `${utils.getAmplifyUserAgent()} ${getLivenessUserAgent()}`,
-            requestHandler: new CustomWebSocketFetchHandler({
-                connectionTimeout: 10000,
-            }),
-        };
-        if (this.endpointOverride) {
-            const override = this.endpointOverride;
-            clientconfig.endpointProvider = () => {
-                const url = new URL(override);
-                return { url };
-            };
-        }
-        this._client = new clientRekognitionstreaming.RekognitionStreamingClient(clientconfig);
+        });
         this.responseStream = await this.startLivenessVideoConnection();
     }
     // Creates a generator from a stream of video chunks and livenessActionDocuments and yields VideoEvent and ClientEvents
@@ -1065,8 +1109,7 @@ class LivenessStreamProvider {
         this._reader = stream.getReader();
         return async function* () {
             while (true) {
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                const { done, value } = await current._reader.read();
+                const { done, value } = (await current._reader.read());
                 if (done) {
                     return;
                 }
@@ -1075,7 +1118,7 @@ class LivenessStreamProvider {
                     // sending an empty video chunk signals that we have ended sending video
                     yield {
                         VideoEvent: {
-                            VideoChunk: [],
+                            VideoChunk: new Uint8Array([]),
                             TimestampMillis: Date.now(),
                         },
                     };
@@ -1102,7 +1145,9 @@ class LivenessStreamProvider {
                 else if (isEndStreamWithCodeEvent(value)) {
                     yield {
                         VideoEvent: {
-                            VideoChunk: [],
+                            VideoChunk: new Uint8Array([]),
+                            // this is a custom type that does not match LivenessRequestStream.
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                             TimestampMillis: { closeCode: value.code },
                         },
                     };
@@ -1293,11 +1338,64 @@ const STATIC_VIDEO_CONSTRAINTS = {
     facingMode: 'user',
 };
 
-/* eslint-disable */
-const MIN_FACE_MATCH_TIME = 1000;
+const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
 const DEFAULT_FACE_FIT_TIMEOUT = 7000;
+const MIN_FACE_MATCH_TIME = 1000;
 let responseStream;
-const CAMERA_ID_KEY = 'AmplifyLivenessCameraId';
+const responseStreamActor = async (callback) => {
+    try {
+        const stream = await responseStream;
+        for await (const event of stream) {
+            if (isServerSesssionInformationEvent(event)) {
+                callback({
+                    type: 'SET_SESSION_INFO',
+                    data: {
+                        sessionInfo: event.ServerSessionInformationEvent.SessionInformation,
+                    },
+                });
+            }
+            else if (isDisconnectionEvent(event)) {
+                callback({ type: 'DISCONNECT_EVENT' });
+            }
+            else if (isValidationExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.ValidationException } },
+                });
+            }
+            else if (isInternalServerExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.InternalServerException } },
+                });
+            }
+            else if (isThrottlingExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.ThrottlingException } },
+                });
+            }
+            else if (isServiceQuotaExceededExceptionEvent(event)) {
+                callback({
+                    type: 'SERVER_ERROR',
+                    data: { error: { ...event.ServiceQuotaExceededException } },
+                });
+            }
+        }
+    }
+    catch (error) {
+        let returnedError = error;
+        if (isInvalidSignatureRegionException(error)) {
+            returnedError = new Error('Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.');
+        }
+        if (returnedError instanceof Error) {
+            callback({
+                type: 'SERVER_ERROR',
+                data: { error: returnedError },
+            });
+        }
+    }
+};
 function getLastSelectedCameraId() {
     return localStorage.getItem(CAMERA_ID_KEY);
 }
@@ -1382,12 +1480,12 @@ const livenessMachine = xstate.createMachine({
     },
     states: {
         cameraCheck: {
-            entry: ['resetErrorState'],
+            entry: 'resetErrorState',
             invoke: {
                 src: 'checkVirtualCameraAndGetStream',
                 onDone: {
                     target: 'waitForDOMAndCameraDetails',
-                    actions: ['updateVideoMediaStream'],
+                    actions: 'updateVideoMediaStream',
                 },
                 onError: {
                     target: 'permissionDenied',
@@ -1420,7 +1518,7 @@ const livenessMachine = xstate.createMachine({
                 src: 'detectFace',
                 onDone: {
                     target: 'checkFaceDetectedBeforeStart',
-                    actions: ['updateFaceMatchBeforeStartDetails'],
+                    actions: 'updateFaceMatchBeforeStartDetails',
                 },
             },
         },
@@ -1438,7 +1536,7 @@ const livenessMachine = xstate.createMachine({
                 src: 'detectFaceDistance',
                 onDone: {
                     target: 'checkFaceDistanceBeforeRecording',
-                    actions: ['updateFaceDistanceBeforeRecording'],
+                    actions: 'updateFaceDistanceBeforeRecording',
                 },
             },
         },
@@ -1482,7 +1580,7 @@ const livenessMachine = xstate.createMachine({
             initial: 'ovalDrawing',
             states: {
                 ovalDrawing: {
-                    entry: ['sendTimeoutAfterOvalDrawingDelay'],
+                    entry: 'sendTimeoutAfterOvalDrawingDelay',
                     invoke: {
                         src: 'detectInitialFaceAndDrawOval',
                         onDone: {
@@ -1512,13 +1610,13 @@ const livenessMachine = xstate.createMachine({
                         0: {
                             target: 'ovalMatching',
                             cond: 'hasRecordingStarted',
-                            actions: ['updateRecordingStartTimestampMs'],
+                            actions: 'updateRecordingStartTimestampMs',
                         },
                         100: { target: 'checkRecordingStarted' },
                     },
                 },
                 ovalMatching: {
-                    entry: ['cancelOvalDrawingTimeout'],
+                    entry: 'cancelOvalDrawingTimeout',
                     invoke: {
                         src: 'detectFaceAndMatchOval',
                         onDone: {
@@ -1566,7 +1664,7 @@ const livenessMachine = xstate.createMachine({
                     },
                 },
                 success: {
-                    entry: ['stopRecording'],
+                    entry: 'stopRecording',
                     type: 'final',
                 },
             },
@@ -1619,13 +1717,11 @@ const livenessMachine = xstate.createMachine({
         },
         permissionDenied: {
             entry: 'callUserPermissionDeniedCallback',
-            on: {
-                RETRY_CAMERA_CHECK: 'cameraCheck',
-            },
+            on: { RETRY_CAMERA_CHECK: 'cameraCheck' },
         },
         mobileLandscapeWarning: {
             entry: 'callMobileLandscapeWarningCallback',
-            always: [{ target: 'error' }],
+            always: { target: 'error' },
         },
         timeout: {
             entry: ['cleanUpResources', 'callUserTimeoutCallback', 'freezeStream'],
@@ -1642,7 +1738,7 @@ const livenessMachine = xstate.createMachine({
         },
         userCancel: {
             entry: ['cleanUpResources', 'callUserCancelCallback', 'resetContext'],
-            always: [{ target: 'cameraCheck' }],
+            always: { target: 'cameraCheck' },
         },
     },
 }, {
@@ -1651,16 +1747,17 @@ const livenessMachine = xstate.createMachine({
             responseStreamActorRef: () => xstate.spawn(responseStreamActor),
         }),
         updateFailedAttempts: xstate.assign({
-            failedAttempts: (context) => {
-                return context.failedAttempts + 1;
-            },
+            failedAttempts: (context) => context.failedAttempts + 1,
         }),
         updateVideoMediaStream: xstate.assign({
             videoAssociatedParams: (context, event) => ({
                 ...context.videoAssociatedParams,
-                videoMediaStream: event.data?.stream,
-                selectedDeviceId: event.data?.selectedDeviceId,
-                selectableDevices: event.data?.selectableDevices,
+                videoMediaStream: event.data
+                    ?.stream,
+                selectedDeviceId: event.data
+                    ?.selectedDeviceId,
+                selectableDevices: event.data
+                    ?.selectableDevices,
             }),
         }),
         initializeFaceDetector: xstate.assign({
@@ -1669,29 +1766,23 @@ const livenessMachine = xstate.createMachine({
                 const { faceModelUrl, binaryPath } = componentProps.config;
                 const faceDetector = new BlazeFaceFaceDetection(binaryPath, faceModelUrl);
                 faceDetector.triggerModelLoading();
-                return {
-                    ...context.ovalAssociatedParams,
-                    faceDetector,
-                };
+                return { ...context.ovalAssociatedParams, faceDetector };
             },
         }),
         updateLivenessStreamProvider: xstate.assign({
-            livenessStreamProvider: (context, event) => {
-                return event.data?.livenessStreamProvider;
-            },
+            livenessStreamProvider: (context, event) => event.data?.livenessStreamProvider,
         }),
         setDOMAndCameraDetails: xstate.assign({
-            videoAssociatedParams: (context, event) => {
-                return {
-                    ...context.videoAssociatedParams,
-                    videoEl: event.data?.videoEl,
-                    canvasEl: event.data?.canvasEl,
-                    isMobile: event.data?.isMobile,
-                };
-            },
+            videoAssociatedParams: (context, event) => ({
+                ...context.videoAssociatedParams,
+                videoEl: event.data?.videoEl,
+                canvasEl: event.data?.canvasEl,
+                isMobile: event.data?.isMobile,
+            }),
             freshnessColorAssociatedParams: (context, event) => ({
                 ...context.freshnessColorAssociatedParams,
-                freshnessColorEl: event.data?.freshnessColorEl,
+                freshnessColorEl: event.data
+                    ?.freshnessColorEl,
             }),
         }),
         updateDeviceAndStream: xstate.assign({
@@ -1699,8 +1790,10 @@ const livenessMachine = xstate.createMachine({
                 setLastSelectedCameraId(event.data?.newDeviceId);
                 return {
                     ...context.videoAssociatedParams,
-                    selectedDeviceId: event.data?.newDeviceId,
-                    videoMediaStream: event.data?.newStream,
+                    selectedDeviceId: event.data
+                        ?.newDeviceId,
+                    videoMediaStream: event.data
+                        ?.newStream,
                 };
             },
         }),
@@ -1761,50 +1854,49 @@ const livenessMachine = xstate.createMachine({
                         'recording') {
                     context.livenessStreamProvider.startRecordingLivenessVideo();
                 }
-                return {
-                    ...context.videoAssociatedParams,
-                };
+                return { ...context.videoAssociatedParams };
             },
         }),
-        stopRecording: (context) => { },
+        stopRecording: () => { },
         updateFaceMatchBeforeStartDetails: xstate.assign({
-            faceMatchStateBeforeStart: (_, event) => {
-                return event.data.faceMatchState;
-            },
+            faceMatchStateBeforeStart: (_, event) => event.data.faceMatchState,
         }),
         updateFaceDistanceBeforeRecording: xstate.assign({
-            isFaceFarEnoughBeforeRecording: (_, event) => {
-                return event.data.isFaceFarEnoughBeforeRecording;
-            },
+            isFaceFarEnoughBeforeRecording: (_, event) => !!event.data.isFaceFarEnoughBeforeRecording,
         }),
         updateFaceDistanceWhileLoading: xstate.assign({
-            isFaceFarEnoughBeforeRecording: (_, event) => {
-                return event.data.isFaceFarEnoughBeforeRecording;
-            },
-            errorState: (_, event) => {
-                return event.data?.error;
-            },
+            isFaceFarEnoughBeforeRecording: (_, event) => !!event.data.isFaceFarEnoughBeforeRecording,
+            errorState: (_, event) => event.data?.error,
         }),
         updateOvalAndFaceDetailsPostDraw: xstate.assign({
             ovalAssociatedParams: (context, event) => ({
                 ...context.ovalAssociatedParams,
-                initialFace: event.data.initialFace,
-                ovalDetails: event.data.ovalDetails,
-                scaleFactor: event.data.scaleFactor,
+                initialFace: event.data
+                    .initialFace,
+                ovalDetails: event.data
+                    .ovalDetails,
+                scaleFactor: event.data
+                    .scaleFactor,
             }),
             faceMatchAssociatedParams: (context, event) => ({
                 ...context.faceMatchAssociatedParams,
-                faceMatchState: event.data.faceMatchState,
-                illuminationState: event.data.illuminationState,
+                faceMatchState: event.data
+                    .faceMatchState,
+                illuminationState: event.data
+                    .illuminationState,
             }),
         }),
         updateFaceDetailsPostMatch: xstate.assign({
             faceMatchAssociatedParams: (context, event) => ({
                 ...context.faceMatchAssociatedParams,
-                faceMatchState: event.data.faceMatchState,
-                faceMatchPercentage: event.data.faceMatchPercentage,
-                illuminationState: event.data.illuminationState,
-                currentDetectedFace: event.data.detectedFace,
+                faceMatchState: event.data
+                    .faceMatchState,
+                faceMatchPercentage: event.data
+                    .faceMatchPercentage,
+                illuminationState: event.data
+                    .illuminationState,
+                currentDetectedFace: event.data
+                    .detectedFace,
             }),
         }),
         updateEndFaceMatch: xstate.assign({
@@ -1827,40 +1919,30 @@ const livenessMachine = xstate.createMachine({
                 };
             },
         }),
-        resetErrorState: xstate.assign({
-            errorState: (_) => undefined,
-        }),
+        resetErrorState: xstate.assign({ errorState: (_) => undefined }),
         updateErrorStateForTimeout: xstate.assign({
-            errorState: (_, event) => {
-                return event.data?.errorState || LivenessErrorState.TIMEOUT;
-            },
+            errorState: (_, event) => event.data?.errorState || LivenessErrorState.TIMEOUT,
         }),
         updateErrorStateForRuntime: xstate.assign({
-            errorState: (_, event) => {
-                return event.data?.errorState || LivenessErrorState.RUNTIME_ERROR;
-            },
+            errorState: (_, event) => event.data?.errorState ||
+                LivenessErrorState.RUNTIME_ERROR,
         }),
         updateErrorStateForServer: xstate.assign({
             errorState: (_) => LivenessErrorState.SERVER_ERROR,
         }),
-        clearErrorState: xstate.assign({
-            errorState: (_) => undefined,
-        }),
+        clearErrorState: xstate.assign({ errorState: (_) => undefined }),
         updateSessionInfo: xstate.assign({
-            serverSessionInformation: (context, event) => {
+            serverSessionInformation: (_, event) => {
                 return event.data.sessionInfo;
             },
         }),
-        updateShouldDisconnect: xstate.assign({
-            shouldDisconnect: (context) => {
-                return true;
-            },
-        }),
+        updateShouldDisconnect: xstate.assign({ shouldDisconnect: () => true }),
         updateFreshnessDetails: xstate.assign({
             freshnessColorAssociatedParams: (context, event) => {
                 return {
                     ...context.freshnessColorAssociatedParams,
-                    freshnessColorsComplete: event.data.freshnessColorsComplete,
+                    freshnessColorsComplete: event.data
+                        .freshnessColorsComplete,
                 };
             },
         }),
@@ -1885,7 +1967,7 @@ const livenessMachine = xstate.createMachine({
             delay: (context) => {
                 return (context.serverSessionInformation?.Challenge
                     ?.FaceMovementAndLightChallenge?.ChallengeConfig
-                    ?.OvalFitTimeout || DEFAULT_FACE_FIT_TIMEOUT);
+                    ?.OvalFitTimeout ?? DEFAULT_FACE_FIT_TIMEOUT);
             },
             id: 'ovalMatchTimeout',
         }),
@@ -1927,14 +2009,12 @@ const livenessMachine = xstate.createMachine({
             },
         }),
         callMobileLandscapeWarningCallback: xstate.assign({
-            errorState: (context) => {
-                return LivenessErrorState.MOBILE_LANDSCAPE_ERROR;
-            },
+            errorState: () => LivenessErrorState.MOBILE_LANDSCAPE_ERROR,
         }),
-        callUserCancelCallback: async (context) => {
+        callUserCancelCallback: (context) => {
             context.componentProps.onUserCancel?.();
         },
-        callUserTimeoutCallback: async (context) => {
+        callUserTimeoutCallback: (context) => {
             const error = new Error('Client Timeout');
             error.name = context.errorState;
             const livenessError = {
@@ -1943,14 +2023,14 @@ const livenessMachine = xstate.createMachine({
             };
             context.componentProps.onError?.(livenessError);
         },
-        callErrorCallback: async (context, event) => {
+        callErrorCallback: (context, event) => {
             const livenessError = {
                 state: context.errorState,
                 error: event.data?.error || event.data,
             };
             context.componentProps.onError?.(livenessError);
         },
-        cleanUpResources: async (context) => {
+        cleanUpResources: (context) => {
             const { freshnessColorEl } = context.freshnessColorAssociatedParams;
             if (freshnessColorEl) {
                 freshnessColorEl.style.display = 'none';
@@ -1969,9 +2049,9 @@ const livenessMachine = xstate.createMachine({
             else if (context.errorState === undefined) {
                 closureCode = WS_CLOSURE_CODE.USER_CANCEL;
             }
-            await context.livenessStreamProvider?.endStreamWithCode(closureCode);
+            context.livenessStreamProvider?.endStreamWithCode(closureCode);
         },
-        freezeStream: async (context) => {
+        freezeStream: (context) => {
             const { videoMediaStream, videoEl } = context.videoAssociatedParams;
             context.isRecordingStopped = true;
             videoEl?.pause();
@@ -1979,7 +2059,7 @@ const livenessMachine = xstate.createMachine({
                 track.stop();
             });
         },
-        pauseVideoStream: async (context) => {
+        pauseVideoStream: (context) => {
             const { videoEl } = context.videoAssociatedParams;
             context.isRecordingStopped = true;
             videoEl.pause();
@@ -2035,7 +2115,6 @@ const livenessMachine = xstate.createMachine({
         hasNotEnoughFaceDistanceBeforeRecording: (context) => {
             return !context.isFaceFarEnoughBeforeRecording;
         },
-        hasLivenessCheckSucceeded: (_, __, meta) => meta.state.event.data.isLive,
         hasFreshnessColorShown: (context) => context.freshnessColorAssociatedParams.freshnessColorsComplete,
         hasServerSessionInfo: (context) => {
             return context.serverSessionInformation !== undefined;
@@ -2088,14 +2167,15 @@ const livenessMachine = xstate.createMachine({
             // If the initial stream is of real camera, use it otherwise use the first real camera
             const initialStreamDeviceId = tracksWithMoreThan15Fps[0].getSettings().deviceId;
             const isInitialStreamFromRealDevice = realVideoDevices.some((device) => device.deviceId === initialStreamDeviceId);
-            let deviceId = initialStreamDeviceId;
+            const deviceId = isInitialStreamFromRealDevice
+                ? initialStreamDeviceId
+                : realVideoDevices[0].deviceId;
             let realVideoDeviceStream = initialStream;
             if (!isInitialStreamFromRealDevice) {
-                deviceId = realVideoDevices[0].deviceId;
                 realVideoDeviceStream = await navigator.mediaDevices.getUserMedia({
                     video: {
                         ...videoConstraints,
-                        deviceId: { exact: realVideoDevices[0].deviceId },
+                        deviceId: { exact: deviceId },
                     },
                     audio: false,
                 });
@@ -2107,6 +2187,7 @@ const livenessMachine = xstate.createMachine({
                 selectableDevices: realVideoDevices,
             };
         },
+        // eslint-disable-next-line @typescript-eslint/require-await
         async openLivenessStreamConnection(context) {
             const { config } = context.componentProps;
             const { credentialProvider, endpointOverride } = config;
@@ -2129,6 +2210,7 @@ const livenessMachine = xstate.createMachine({
                 await faceDetector.modelLoadingPromise;
             }
             catch (err) {
+                // eslint-disable-next-line no-console
                 console.log({ err });
             }
             // detect face
@@ -2168,10 +2250,11 @@ const livenessMachine = xstate.createMachine({
             });
             const { isDistanceBelowThreshold: isFaceFarEnoughBeforeRecording, error, } = await isFaceDistanceBelowThreshold({
                 faceDetector: faceDetector,
-                videoEl: videoEl,
+                isMobile,
                 ovalDetails,
+                videoEl: videoEl,
+                // if this is the second face distance check reduce the threshold
                 reduceThreshold: faceDistanceCheckBeforeRecording,
-                isMobile,
             });
             return { isFaceFarEnoughBeforeRecording, error };
         },
@@ -2185,6 +2268,7 @@ const livenessMachine = xstate.createMachine({
                 await livenessStreamProvider.videoRecorder.recorderStarted;
             }
             catch (err) {
+                // eslint-disable-next-line no-console
                 console.log({ err });
             }
             // detect face
@@ -2200,6 +2284,7 @@ const livenessMachine = xstate.createMachine({
                     break;
                 }
                 case 1: {
+                    //exactly one face detected;
                     faceMatchState = FaceMatchState.FACE_IDENTIFIED;
                     initialFace = detectedFaces[0];
                     break;
@@ -2346,7 +2431,7 @@ const livenessMachine = xstate.createMachine({
                 throw new Error('Video chunks not recorded successfully.');
             }
             livenessStreamProvider.sendClientInfo(livenessActionDocument);
-            await livenessStreamProvider.dispatchStopVideoEvent();
+            livenessStreamProvider.dispatchStopVideoEvent();
         },
         async getLiveness(context) {
             const { onAnalysisComplete } = context.componentProps;
@@ -2355,60 +2440,6 @@ const livenessMachine = xstate.createMachine({
         },
     },
 });
-const responseStreamActor = async (callback) => {
-    try {
-        const stream = await responseStream;
-        for await (const event of stream) {
-            if (isServerSesssionInformationEvent(event)) {
-                callback({
-                    type: 'SET_SESSION_INFO',
-                    data: {
-                        sessionInfo: event.ServerSessionInformationEvent.SessionInformation,
-                    },
-                });
-            }
-            else if (isDisconnectionEvent(event)) {
-                callback({ type: 'DISCONNECT_EVENT' });
-            }
-            else if (isValidationExceptionEvent(event)) {
-                callback({
-                    type: 'SERVER_ERROR',
-                    data: { error: { ...event.ValidationException } },
-                });
-            }
-            else if (isInternalServerExceptionEvent(event)) {
-                callback({
-                    type: 'SERVER_ERROR',
-                    data: { error: { ...event.InternalServerException } },
-                });
-            }
-            else if (isThrottlingExceptionEvent(event)) {
-                callback({
-                    type: 'SERVER_ERROR',
-                    data: { error: { ...event.ThrottlingException } },
-                });
-            }
-            else if (isServiceQuotaExceededExceptionEvent(event)) {
-                callback({
-                    type: 'SERVER_ERROR',
-                    data: { error: { ...event.ServiceQuotaExceededException } },
-                });
-            }
-        }
-    }
-    catch (error) {
-        let returnedError = error;
-        if (isInvalidSignatureRegionException(error)) {
-            returnedError = new Error('Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.');
-        }
-        if (returnedError instanceof Error) {
-            callback({
-                type: 'SERVER_ERROR',
-                data: { error: returnedError },
-            });
-        }
-    }
-};
 
 const FaceLivenessDetectorContext = React__default["default"].createContext(null);
 function FaceLivenessDetectorProvider({ children, ...props }) {
@@ -2488,11 +2519,6 @@ var LivenessClassNames;
     LivenessClassNames["FreshnessCanvas"] = "amplify-liveness-freshness-canvas";
     LivenessClassNames["InstructionList"] = "amplify-liveness-instruction-list";
     LivenessClassNames["InstructionOverlay"] = "amplify-liveness-instruction-overlay";
-    LivenessClassNames["Figure"] = "amplify-liveness-figure";
-    LivenessClassNames["FigureCaption"] = "amplify-liveness-figure__caption";
-    LivenessClassNames["FigureIcon"] = "amplify-liveness-figure__icon";
-    LivenessClassNames["FigureImage"] = "amplify-liveness-figure__image";
-    LivenessClassNames["Figures"] = "amplify-liveness-figures";
     LivenessClassNames["Hint"] = "amplify-liveness-hint";
     LivenessClassNames["HintText"] = "amplify-liveness-hint__text";
     LivenessClassNames["LandscapeErrorModal"] = "amplify-liveness-landscape-error-modal";
@@ -2918,22 +2944,15 @@ const LivenessCameraModule = (props) => {
     const [mediaHeight, setMediaHeight] = React.useState(videoHeight);
     const [aspectRatio, setAspectRatio] = React.useState(() => videoWidth && videoHeight ? videoWidth / videoHeight : 0);
     React__default["default"].useEffect(() => {
-        if (canvasRef &&
-            videoRef &&
-            canvasRef.current &&
-            videoRef.current &&
-            videoStream &&
-            isStartView) {
+        if (canvasRef?.current && videoRef?.current && videoStream && isStartView) {
             drawStaticOval(canvasRef.current, videoRef.current, videoStream);
         }
     }, [canvasRef, videoRef, videoStream, colorMode, isStartView]);
     React__default["default"].useEffect(() => {
         const updateColorModeHandler = (e) => {
             if (e.matches &&
-                canvasRef &&
-                videoRef &&
-                canvasRef.current &&
-                videoRef.current &&
+                canvasRef?.current &&
+                videoRef?.current &&
                 videoStream &&
                 isStartView) {
                 drawStaticOval(canvasRef.current, videoRef.current, videoStream);