chore(liveness): add region prop to component (#779)

* chore(liveness): add region prop to component * chore: update comment to not list out regions and instead add a link in future
aws-amplify · Mar 10, 2023 · f864e27 · f864e27
1 parent 5f7bfa1
commit f864e27
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 3 deletions.
diff --git a/examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx b/examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx
@@ -59,6 +59,7 @@ export default function LivenessDefault({
  {!getLivenessResponse ? (
  <FaceLivenessDetector
  sessionId={createLivenessSessionApiData.sessionId}
+ region={'us-east-1'}
  onUserCancel={onUserCancel}
  onAnalysisComplete={async () => {
  const response = await handleGetLivenessDetection(

diff --git a/packages/ui/src/helpers/liveness/__tests__/liveness-stream-provider.test.ts b/packages/ui/src/helpers/liveness/__tests__/liveness-stream-provider.test.ts
@@ -116,6 +116,7 @@ describe('LivenessStreamProvider', () => {
  test('happy case', () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -126,6 +127,7 @@ describe('LivenessStreamProvider', () => {
  test('happy case', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -137,6 +139,7 @@ describe('LivenessStreamProvider', () => {
  test('happy case', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -149,6 +152,7 @@ describe('LivenessStreamProvider', () => {
  test('yield video chunk events', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -165,6 +169,7 @@ describe('LivenessStreamProvider', () => {
  test('does not yield empty video chunks', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -185,6 +190,7 @@ describe('LivenessStreamProvider', () => {
  test('happy case', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -198,6 +204,7 @@ describe('LivenessStreamProvider', () => {
  test('should stop sending video events', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -211,6 +218,7 @@ describe('LivenessStreamProvider', () => {
  test('should dispatch an empty video chunk', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );
@@ -224,6 +232,7 @@ describe('LivenessStreamProvider', () => {
  test('should stop video and end the stream and return a promise if cancelled successfully', async () => {
  const provider = new LivenessStreamProvider(
  'sessionId',
+ 'us-east-1',
  mockVideoMediaStream,
  mockVideoEl
  );

diff --git a/packages/ui/src/helpers/liveness/liveness-event-utils.ts b/packages/ui/src/helpers/liveness/liveness-event-utils.ts
@@ -68,3 +68,12 @@ export const isServiceQuotaExceededExceptionEvent = (
 ): event is LivenessResponseStream.ServiceQuotaExceededExceptionMember => {
  return !!event?.ServiceQuotaExceededException;
 };
+
+export const isInvalidSignatureRegionException = (
+ error: any
+): error is Error => {
+ return (
+ error.name === 'InvalidSignatureException' &&
+ (error.message as string).includes('valid region')
+ );
+};
diff --git a/packages/ui/src/helpers/liveness/liveness-stream-provider.ts b/packages/ui/src/helpers/liveness/liveness-stream-provider.ts
@@ -22,7 +22,6 @@ export interface StartLivenessStreamOutput {
 const ENDPOINT =
  process.env.NEXT_PUBLIC_STREAMING_API_URL ||
  'wss://streaming-rekognition.us-east-1.amazonaws.com:443';
-const REGION = process.env.NEXT_PUBLIC_BACKEND_API_REGION || 'us-east-1';
 export const TIME_SLICE = 1000;
 
 export interface Credentials {
@@ -33,6 +32,7 @@ export interface Credentials {
 
 export class LivenessStreamProvider extends AmazonAIInterpretPredictionsProvider {
  public sessionId: string;
+ public region: string;
  public videoRecorder: VideoRecorder;
  public responseStream: AsyncIterable<LivenessResponseStream>;
 
@@ -44,11 +44,13 @@ export class LivenessStreamProvider extends AmazonAIInterpretPredictionsProvider
 
  constructor(
  sessionId: string,
+ region: string,
  stream: MediaStream,
  videoEl: HTMLVideoElement
  ) {
  super();
  this.sessionId = sessionId;
+ this.region = region;
  this._stream = stream;
  this.videoEl = videoEl;
  this.videoRecorder = new VideoRecorder(stream);
@@ -68,7 +70,7 @@ export class LivenessStreamProvider extends AmazonAIInterpretPredictionsProvider
  const url = new URL(ENDPOINT);
  return { url };
  },
- region: REGION,
+ region: this.region,
  customUserAgent: getAmplifyUserAgent(),
  });
 

diff --git a/packages/ui/src/helpers/liveness/liveness-test-helpers.ts b/packages/ui/src/helpers/liveness/liveness-test-helpers.ts
@@ -102,6 +102,7 @@ export const mockContext = (): LivenessContext => {
  failedAttempts: 0,
  componentProps: {
  sessionId: 'foobar',
+ region: 'us-east-1',
  onAnalysisComplete: jest.fn(),
  },
  videoAssociatedParams: {

diff --git a/packages/ui/src/machines/liveness/__tests__/index.test.ts b/packages/ui/src/machines/liveness/__tests__/index.test.ts
@@ -42,6 +42,7 @@ describe('Liveness Machine', () => {
 
  const mockcomponentProps: FaceLivenessDetectorProps = {
  sessionId: 'some-sessionId',
+ region: 'us-east-1',
  onAnalysisComplete: jest.fn(),
  onError: jest.fn(),
  onUserCancel: jest.fn(),

diff --git a/packages/ui/src/machines/liveness/index.ts b/packages/ui/src/machines/liveness/index.ts
@@ -38,6 +38,7 @@ import {
  isInternalServerExceptionEvent,
  isServerSesssionInformationEvent,
  isDisconnectionEvent,
+ isInvalidSignatureRegionException,
 } from '../../helpers/liveness/liveness-event-utils';
 import {
  ClientSessionInformationEvent,
@@ -923,6 +924,7 @@ export const livenessMachine = createMachine<LivenessContext, LivenessEvent>(
  async openLivenessStreamConnection(context) {
  const livenessStreamProvider = new LivenessStreamProvider(
  context.componentProps.sessionId,
+ context.componentProps.region,
  context.videoAssociatedParams.videoMediaStream,
  context.videoAssociatedParams.videoEl
  );
@@ -1245,9 +1247,16 @@ const responseStreamActor = async (callback) => {
  }
  }
  } catch (error) {
+ let returnedError = error;
+ if (isInvalidSignatureRegionException(error)) {
+ returnedError = new Error(
+ 'Invalid region in FaceLivenessDetector or credentials are scoped to the wrong region.'
+ );
+ }
+
  callback({
  type: 'SERVER_ERROR',
- data: { error },
+ data: { error: returnedError },
  });
  }
 };
diff --git a/packages/ui/src/types/liveness/liveness.ts b/packages/ui/src/types/liveness/liveness.ts
@@ -13,6 +13,11 @@ export interface FaceLivenessDetectorProps {
  */
  onAnalysisComplete: () => Promise<void>;
 
+ /**
+ * The AWS region to stream the video to, for current regional support see the documentation here: FIXME LINK
+ */
+ region: string;
+
  /**
  * Callback called when the user cancels the flow
  */