diff --git a/.github/workflows/reusable-e2e.yml b/.github/workflows/reusable-e2e.yml
index 95f932af153..807c26634fb 100644
--- a/.github/workflows/reusable-e2e.yml
+++ b/.github/workflows/reusable-e2e.yml
@@ -71,7 +71,7 @@ jobs:
- example: next
package: react
- tags: '@react and not @todo-react'
+ tags: '@react and not @todo-react and not @liveness-react'
- example: vue
package: vue
@@ -319,6 +319,231 @@ jobs:
packages/e2e/cypress/screenshots/**
retention-days: 5
+ e2e-liveness:
+ # Only run e2e tests if unit tests pass
+ runs-on: ubuntu-latest
+ environment: ci
+ env:
+ NODE_ENV: test
+
+ strategy:
+ # Run each examples (e.g. `next-example`) which uses a library (e.g. `@aws-amplify/ui-react`)
+ # BUT, Exclude `@todo-${{ package }}` tests in PRs
+ # See: https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#using-environment-variables-in-a-matrix
+ matrix:
+ include:
+ - example: next
+ package: react
+ tags: '@liveness-react and not @react and not @todo-react'
+
+ steps:
+ - name: Checkout Amplify UI
+ uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f
+ with:
+ # For `pull_request_target`, we want ref to point to `pull_request.head.ref` because `github.ref`
+ # always points to the target branch.
+ # See: https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows
+ ref: ${{ inputs.commit }}
+ repository: ${{ inputs.repository }}
+ persist-credentials: false
+
+ - name: Next.js Cache
+ uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
+ with:
+ path: ${{ github.workspace }}/.next/cache
+ key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
+ env:
+ SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+ - name: Setup Node.js 16
+ uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c
+ with:
+ node-version: 16
+ cache: 'yarn'
+ env:
+ SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2
+
+ - name: Restore cypress runner Cache
+ uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
+ id: restore-cypress-cache
+ with:
+ path: ~/.cache/Cypress
+ key: ${{ runner.os }}-cypress-${{ hashFiles('yarn.lock') }}
+ env:
+ SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+ - name: Restore node_modules cache
+ uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
+ id: restore-cache
+ with:
+ path: |
+ ./node_modules
+ **/node_modules
+ key: ${{ runner.os }}-nodemodules-${{ inputs.commit }}
+ env:
+ SEGMENT_DOWNLOAD_TIMEOUT_MINS: 3
+
+ - name: Restore ui/dist cache
+ uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
+ id: restore-ui-cache
+ with:
+ path: ./packages/ui/dist
+ key: ${{ runner.os }}-ui-${{ inputs.commit }}
+
+ - name: Restore ${{ matrix.package }}/dist cache
+ id: restore-package-cache
+ uses: actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8 # v3.3.1 https://github.com/actions/cache/commit/88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8
+ with:
+ path: ./packages/${{ matrix.package }}/dist
+ key: ${{ runner.os }}-${{ matrix.package }}-${{ inputs.commit }}
+ env:
+ SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1
+
+ - name: Install packages
+ if: steps.restore-cache.outputs.cache-hit != 'true' || steps.restore-cypress-cache.outputs.cache-hit != 'true'
+ uses: ./.github/actions/install-with-retries
+ with:
+ skip-cypress-binary: false
+
+ - name: Build @aws-amplify/ui package
+ if: steps.restore-ui-cache.outputs.cache-hit != 'true'
+ run: yarn ui build
+
+ - name: Build react-core package
+ if: ${{ matrix.package == 'react' }}
+ run: yarn react-core build
+
+ - name: Build ${{ matrix.package }} package
+ if: steps.restore-package-cache.outputs.cache-hit != 'true'
+ run: yarn ${{ matrix.package }} build
+
+ - name: Build react-liveness package
+ if: ${{ matrix.package == 'react' }}
+ run: yarn react-liveness build
+
+ - name: Add Amplify CLI
+ run: yarn global add @aws-amplify/cli
+
+ - name: Configure auth credentials
+ uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
+ with:
+ aws-region: us-east-2
+ role-to-assume: ${{ secrets.AUTH_E2E_ROLE_ARN }}
+
+ # Amplify CLI does not support headless pull with temporary credentials
+ # when useProfile is false.
+ # See: https://github.com/aws-amplify/amplify-cli/issues/11009.
+ - name: Create temp AWS Profile
+ run: |
+ aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
+ aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
+ aws configure set aws_session_token $AWS_SESSION_TOKEN && \
+ aws configure set default.region $AWS_REGION
+
+ - name: Pull down Auth AWS environments
+ run: yarn environments auth pull
+
+ - name: Create temp AWS profile
+ run: |
+ aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
+ aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
+ aws configure set aws_session_token $AWS_SESSION_TOKEN && \
+ aws configure set default.region $AWS_REGION
+
+ - name: Configure AWS Credentials
+ uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
+ with:
+ aws-region: us-east-2
+ role-to-assume: ${{ secrets.STORAGE_E2E_ROLE_ARN }}
+
+ - name: Create temp AWS profile
+ run: |
+ aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
+ aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
+ aws configure set aws_session_token $AWS_SESSION_TOKEN && \
+ aws configure set default.region $AWS_REGION
+
+ - name: Pull down Storage AWS environments
+ run: yarn environments storage pull
+
+ - name: Configure datastore credentials
+ uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
+ with:
+ aws-region: us-east-2
+ role-to-assume: ${{ secrets.DATASTORE_E2E_ROLE_ARN }}
+
+ - name: Create temp AWS profile
+ run: |
+ aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
+ aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
+ aws configure set aws_session_token $AWS_SESSION_TOKEN && \
+ aws configure set default.region $AWS_REGION
+
+ - name: Pull down Datastore AWS environments
+ run: yarn environments datastore pull
+
+ - name: Configure liveness credentials
+ uses: aws-actions/configure-aws-credentials@e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef # v2.0.0 https://github.com/aws-actions/configure-aws-credentials/commit/e1e17a757e536f70e52b5a12b2e8d1d1c60e04ef
+ with:
+ aws-region: us-east-2
+ role-to-assume: ${{ secrets.LIVENESS_E2E_ROLE_ARN }}
+
+ - name: Create temp AWS profile
+ run: |
+ aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
+ aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
+ aws configure set aws_session_token $AWS_SESSION_TOKEN && \
+ aws configure set default.region $AWS_REGION
+
+ - name: Pull down Liveness AWS environments
+ run: yarn environments liveness pull
+
+ # Amplify CLI does not support headless pull with temporary credentials
+ # when useProfile is false.
+ # See: https://github.com/aws-amplify/amplify-cli/issues/11009.
+ - name: Create temp AWS Profile
+ run: |
+ aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID && \
+ aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY && \
+ aws configure set aws_session_token $AWS_SESSION_TOKEN && \
+ aws configure set default.region $AWS_REGION
+
+ - name: Delete AWS profile
+ run: rm -rf ~/.aws
+
+ - name: Build ${{ matrix.example }} example
+ run: yarn ${{ matrix.example }}-example-liveness build
+
+ - name: Start ${{ matrix.example }} example
+ run: yarn ${{ matrix.example }}-example-liveness start & npx wait-on -c waitOnConfig.json -t 20000 http-get://localhost:3000/ui/components/liveness/
+ env:
+ # Setting this value temporarily since the beta liveness sample app hits the gamma endpoint
+ NEXT_PUBLIC_STREAMING_API_URL: wss://streaming-rekognition-gamma.us-east-1.amazonaws.com
+
+ - name: Run E2E tests against ${{ matrix.example }} example
+ id: e2e
+ run: yarn e2e test:liveness
+ env:
+ # Override on the default value in `cypress.json` with framework-specific tag
+ TAGS: '${{ matrix.tags }}'
+
+ # Env values for testing flows
+ DOMAIN: ${{ secrets.DOMAIN }}
+ PHONE_NUMBER: ${{ secrets.PHONE_NUMBER }}
+ USERNAME: ${{ secrets.USERNAME }}
+ NEW_PASSWORD: ${{ secrets.NEW_PASSWORD }}
+ VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}
+
+ - name: Upload failure screenshots and errors
+ uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
+ if: ${{ failure() && steps.e2e.outcome != 'success' }}
+ with:
+ name: e2e-cypress-error-${{ matrix.package }}
+ path: |
+ packages/e2e/cypress/videos/**
+ packages/e2e/cypress/screenshots/**
+ retention-days: 5
+
check-changed-packages:
runs-on: ubuntu-latest
outputs:
diff --git a/examples/next-liveness/.env.example b/examples/next-liveness/.env.example
new file mode 100644
index 00000000000..5c6a3029059
--- /dev/null
+++ b/examples/next-liveness/.env.example
@@ -0,0 +1,3 @@
+# Set this .env to the beta/gamma endpoints to test locally
+NEXT_PUBLIC_STREAMING_API_URL=
+NEXT_PUBLIC_BACKEND_API_REGION=
diff --git a/examples/next-liveness/.eslintrc b/examples/next-liveness/.eslintrc
new file mode 100644
index 00000000000..e4f9606ab48
--- /dev/null
+++ b/examples/next-liveness/.eslintrc
@@ -0,0 +1,3 @@
+{
+ "extends": ["next", "next/babel", "next/core-web-vitals"]
+}
diff --git a/examples/next-liveness/.gitignore b/examples/next-liveness/.gitignore
new file mode 100644
index 00000000000..1437c53f70b
--- /dev/null
+++ b/examples/next-liveness/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/next-liveness/README.md b/examples/next-liveness/README.md
new file mode 100644
index 00000000000..15a696d2660
--- /dev/null
+++ b/examples/next-liveness/README.md
@@ -0,0 +1,36 @@
+# Next.js + Amplify UI Example
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. e.g. Authenticator Sign In With Email is at "http://localhost:3000/ui/components/authenticator/sign-in-with-email".
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/examples/next-liveness/next-env.d.ts b/examples/next-liveness/next-env.d.ts
new file mode 100644
index 00000000000..4f11a03dc6c
--- /dev/null
+++ b/examples/next-liveness/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/next-liveness/next.config.js b/examples/next-liveness/next.config.js
new file mode 100644
index 00000000000..3e860428ba2
--- /dev/null
+++ b/examples/next-liveness/next.config.js
@@ -0,0 +1,26 @@
+const path = require('path');
+const { patchWebpackConfig } = require('next-global-css');
+
+module.exports = {
+ reactStrictMode: true,
+ /**
+ * Setting trailingSlash to true to resolve known bug with federated sign in redirect + next.js
+ * https://github.com/aws-amplify/amplify-cli/issues/7359#issuecomment-812821315
+ */
+ trailingSlash: true,
+ pageExtensions: ['page.tsx'],
+ webpack: (config, options) => {
+ // allows importing of css files inside modules
+ patchWebpackConfig(config, options);
+
+ // resolve react and react-dom from project node_modules
+ config.resolve.alias = {
+ ...config.resolve.alias,
+ react: path.resolve(__dirname, 'node_modules/react'),
+ 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+ 'react-map-gl': path.resolve(__dirname, 'node_modules/react-map-gl'),
+ };
+
+ return config;
+ },
+};
diff --git a/examples/next-liveness/package.json b/examples/next-liveness/package.json
new file mode 100644
index 00000000000..e388618da22
--- /dev/null
+++ b/examples/next-liveness/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "@aws-amplify/ui-next-example-liveness",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "rimraf node_modules .next",
+ "start": "next start",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "@aws-amplify/ui-react": "5.2.0",
+ "@aws-amplify/ui-react-liveness": "^2.0.6",
+ "@aws-sdk/credential-providers": "^3.370.0",
+ "aws-amplify": "5",
+ "next": "^13.4.19",
+ "next-global-css": "^1.1.1",
+ "react": "18",
+ "react-copy-to-clipboard": "^5.1.0",
+ "react-dom": "18",
+ "react-icons": "^4.4.0",
+ "react-map-gl": "7.0.23",
+ "swr": "^2.0.0"
+ },
+ "devDependencies": {
+ "@types/node": "^15.12.4",
+ "@types/react": "^18.2.22",
+ "eslint": "^8.44.0",
+ "eslint-config-next": "11.0.1",
+ "rimraf": "^3.0.2"
+ },
+ "workspaces": {
+ "nohoist": [
+ "aws-amplify",
+ "**/aws-amplify/**",
+ "**/react/",
+ "**/react/**",
+ "react-dom",
+ "**/react-dom/**"
+ ]
+ }
+}
diff --git a/examples/next-liveness/pages/_app.page.tsx b/examples/next-liveness/pages/_app.page.tsx
new file mode 100644
index 00000000000..6a31228a60d
--- /dev/null
+++ b/examples/next-liveness/pages/_app.page.tsx
@@ -0,0 +1,13 @@
+// This file only exists to expose `Amplify` & its categories on `window` for e2e testing
+
+// https://nextjs.org/docs/advanced-features/custom-app
+import App from 'next/app';
+import { AmplifyProvider } from '@aws-amplify/ui-react';
+
+export default function MyApp(props: any) {
+ return (
+
+
+
+ );
+}
diff --git a/examples/next-liveness/pages/_document.page.tsx b/examples/next-liveness/pages/_document.page.tsx
new file mode 100644
index 00000000000..05393254e10
--- /dev/null
+++ b/examples/next-liveness/pages/_document.page.tsx
@@ -0,0 +1,33 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+ static async getInitialProps(ctx: any) {
+ const initialProps = await Document.getInitialProps(ctx);
+ return { ...initialProps };
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+ React Example App
+ React Example App
+
+
+
+
+
+ );
+ }
+}
+
+export default MyDocument;
diff --git a/examples/next/pages/ui/components/liveness/components/GetLivenessResultCard.tsx b/examples/next-liveness/pages/ui/components/liveness/components/GetLivenessResultCard.tsx
similarity index 100%
rename from examples/next/pages/ui/components/liveness/components/GetLivenessResultCard.tsx
rename to examples/next-liveness/pages/ui/components/liveness/components/GetLivenessResultCard.tsx
diff --git a/examples/next/pages/ui/components/liveness/components/Layout.tsx b/examples/next-liveness/pages/ui/components/liveness/components/Layout.tsx
similarity index 92%
rename from examples/next/pages/ui/components/liveness/components/Layout.tsx
rename to examples/next-liveness/pages/ui/components/liveness/components/Layout.tsx
index e0fdf490203..a82fb1d373b 100644
--- a/examples/next/pages/ui/components/liveness/components/Layout.tsx
+++ b/examples/next-liveness/pages/ui/components/liveness/components/Layout.tsx
@@ -11,7 +11,7 @@ import '@aws-amplify/ui-react-liveness/styles.css';
import '../style.css';
import NavBar from './NavBar';
-export default function Layout({ children }) {
+export default function Layout({ children }: { children: React.ReactNode }) {
const [colorMode, setColorMode] = React.useState('system');
const [navOpen, toggleNavOpen] = React.useState(false);
diff --git a/examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx b/examples/next-liveness/pages/ui/components/liveness/components/LivenessDefault.tsx
similarity index 97%
rename from examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx
rename to examples/next-liveness/pages/ui/components/liveness/components/LivenessDefault.tsx
index 6555e0bc99b..0633f89cea4 100644
--- a/examples/next/pages/ui/components/liveness/components/LivenessDefault.tsx
+++ b/examples/next-liveness/pages/ui/components/liveness/components/LivenessDefault.tsx
@@ -11,6 +11,10 @@ export default function LivenessDefault({
disableInstructionScreen = false,
components = undefined,
credentialProvider = undefined,
+}: {
+ disableInstructionScreen?: boolean;
+ components?: any;
+ credentialProvider?: any;
}) {
const {
getLivenessResponse,
diff --git a/examples/next/pages/ui/components/liveness/components/LivenessInlineResults.tsx b/examples/next-liveness/pages/ui/components/liveness/components/LivenessInlineResults.tsx
similarity index 92%
rename from examples/next/pages/ui/components/liveness/components/LivenessInlineResults.tsx
rename to examples/next-liveness/pages/ui/components/liveness/components/LivenessInlineResults.tsx
index ed39dced0cd..e8554c4c7b6 100644
--- a/examples/next/pages/ui/components/liveness/components/LivenessInlineResults.tsx
+++ b/examples/next-liveness/pages/ui/components/liveness/components/LivenessInlineResults.tsx
@@ -1,7 +1,7 @@
import { Flex, Text, Image } from '@aws-amplify/ui-react';
import { Badge, Button } from '@aws-amplify/ui-react';
-function truncateNumber(number, digitsAfterDot) {
+function truncateNumber(number: number, digitsAfterDot: number) {
const str = `${number}`;
const truncated = str.slice(0, str.indexOf('.') + digitsAfterDot + 1);
return Math.max(parseFloat(truncated), 0.0001);
@@ -10,6 +10,9 @@ function truncateNumber(number, digitsAfterDot) {
export default function LivenessInlineResults({
getLivenessResponse,
onUserCancel,
+}: {
+ getLivenessResponse: any;
+ onUserCancel: any;
}) {
const { isLive, confidenceScore, auditImageBytes } = getLivenessResponse;
diff --git a/examples/next/pages/ui/components/liveness/components/NavBar.tsx b/examples/next-liveness/pages/ui/components/liveness/components/NavBar.tsx
similarity index 96%
rename from examples/next/pages/ui/components/liveness/components/NavBar.tsx
rename to examples/next-liveness/pages/ui/components/liveness/components/NavBar.tsx
index 796ab2f39d2..0e75067de53 100644
--- a/examples/next/pages/ui/components/liveness/components/NavBar.tsx
+++ b/examples/next-liveness/pages/ui/components/liveness/components/NavBar.tsx
@@ -8,6 +8,7 @@ import {
Icon,
Flex,
Link,
+ ColorMode,
} from '@aws-amplify/ui-react';
export default function NavBar({
@@ -15,6 +16,11 @@ export default function NavBar({
setColorMode,
navOpen,
handleNav,
+}: {
+ colorMode: ColorMode;
+ setColorMode: any;
+ navOpen: boolean;
+ handleNav: () => void;
}) {
return (
diff --git a/examples/next/pages/ui/components/liveness/components/SessionIdAlert.tsx b/examples/next-liveness/pages/ui/components/liveness/components/SessionIdAlert.tsx
similarity index 79%
rename from examples/next/pages/ui/components/liveness/components/SessionIdAlert.tsx
rename to examples/next-liveness/pages/ui/components/liveness/components/SessionIdAlert.tsx
index 06bced77150..02301474fad 100644
--- a/examples/next/pages/ui/components/liveness/components/SessionIdAlert.tsx
+++ b/examples/next-liveness/pages/ui/components/liveness/components/SessionIdAlert.tsx
@@ -1,15 +1,15 @@
import * as React from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import CopyToClipboard from 'react-copy-to-clipboard';
import { Alert, Button, Flex, Icon, Text } from '@aws-amplify/ui-react';
-export const SessionIdAlert = ({ sessionId }) => {
+export const SessionIdAlert = ({ sessionId }: { sessionId: string }) => {
return (
SessionId: {sessionId}
-
+