Feat/location spoofing use case demo

.env.example

@@ -1,6 +1,4 @@
-PRIVATE_API_KEY=<SECRET_API_KEY>
+SERVER_API_KEY=<SECRET_API_KEY>
 NEXT_PUBLIC_API_KEY=<PUBLIC_API_KEY>
 # "eu" or "ap", "us" is default
-BACKEND_REGION=<REGION>
-# "eu" or "ap", "us" is default
-NEXT_PUBLIC_FRONTEND_REGION=<REGION>
+NEXT_PUBLIC_REGION=<REGION>

README.md

@@ -88,6 +88,12 @@ Prevent financial losses from SMS pumping. Link every verification text message
 
 [📱 SMS Pumping Protection Live Demo](https://demo.fingerprint.com/sms-pumping)
 
+### VPN Detection and Location Spoofing Protection
+
+Detect when visitors are using VPN to access your application. Prevent people spoofing their location from accessing geo-restricted content or pricing.
+
+[🌍 VPN Detection Live Demo](https://demo.fingerprint.com/vpn-detection)
+
 ## Documentation and Support
 
 To dive deeper into Fingerprint Pro, see our [Documentation](https://dev.fingerprint.com/docs). For questions or suggestions specific to this repository, you can [create an issue](https://github.com/fingerprintjs/fingerprintjs-pro-use-cases/issues/new). For general questions and community vibes, visit our [Discord server](https://discord.gg/39EpE2neBg). If you require private support, you can email us at [[email protected]](mailto:[email protected]).

e2e/coupon-fraud.spec.ts

@@ -1,7 +1,7 @@
 import { Page, test, expect } from '@playwright/test';
 import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
-import { COUPON_FRAUD_COPY } from '../src/pages/api/coupon-fraud/claim';
+import { COUPON_FRAUD_COPY } from '../src/server/coupon-fraud/copy';
 
 const insertCoupon = async (page: Page, coupon: string) => {
   await page.getByTestId(TEST_IDS.couponFraud.couponCode).fill(coupon);

e2e/credential-stuffing.spec.ts

@@ -1,7 +1,7 @@
 import { Page, test } from '@playwright/test';
 import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
-import { CREDENTIAL_STUFFING_COPY } from '../src/pages/api/credential-stuffing/authenticate';
+import { CREDENTIAL_STUFFING_COPY } from '../src/server/credentialStuffing/copy';
 
 const submitForm = async (page: Page) => {
   // Waits for the button to be clickable out of the box

e2e/loan-risk.spec.ts

@@ -1,7 +1,7 @@
 import { Page, expect, test } from '@playwright/test';
 import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
-import { LOAN_RISK_COPY } from '../src/pages/api/loan-risk/request-loan';
+import { LOAN_RISK_COPY } from '../src/server/loan-risk/copy';
 
 const testIds = TEST_IDS.loanRisk;
 

e2e/payment-fraud.spec.ts

@@ -1,7 +1,7 @@
 import { Page, test } from '@playwright/test';
 import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
-import { PAYMENT_FRAUD_COPY } from '../src/pages/api/payment-fraud/place-order';
 import { TEST_IDS } from '../src/client/testIDs';
+import { PAYMENT_FRAUD_COPY } from '../src/server/paymentFraud/copy';
 
 const submit = (page: Page) => page.getByTestId(TEST_IDS.paymentFraud.submitPayment).click();
 

e2e/playground.spec.ts

@@ -1,8 +1,6 @@
-import { SCRIPT_URL_PATTERN } from './../src/server/const';
 import { Page, expect, test } from '@playwright/test';
 import { PLAYGROUND_TAG } from '../src/client/components/playground/playgroundTags';
 import { isAgentResponse, isServerResponse } from './zodUtils';
-import { ENDPOINT } from '../src/server/const';
 import { blockGoogleTagManager } from './e2eTestUtils';
 
 const getAgentResponse = async (page: Page) => {
@@ -86,23 +84,29 @@ test.describe('Playground page', () => {
 });
 
 test.describe('Proxy integration', () => {
+  const proxyIntegrations = [
+    'https://metrics.fingerprinthub.com',
+    'https://demo.fingerprint.com/DBqbMN7zXxwl4Ei8',
+    process.env.NEXT_PUBLIC_ENDPOINT ?? 'NO_CUSTOM_PROXY_IN_ENV',
+  ];
+
+  /**
+   * If any JS agent network request fails, fail the test.
+   * This captures proxy integration failures that would otherwise go unnoticed thanks to default endpoint fallbacks.
+   */
   test('Proxy integration works on Playground, no network errors', async ({ page }) => {
-    // If any JS agent network request fails, fails the test
-    // This captures proxy integration failures that would otherwise go unnoticed thanks to default endpoint fallbacks
-    const endpointOrigin = new URL(ENDPOINT).origin;
-    const scriptUrlPatternOrigin = new URL(SCRIPT_URL_PATTERN).origin;
-
     page.on('requestfailed', (request) => {
-      console.error(request.url(), request.failure()?.errorText);
-      const requestOrigin = new URL(request.url()).origin;
-
-      if (requestOrigin === endpointOrigin || requestOrigin === scriptUrlPatternOrigin) {
-        // This fails the test
-        expect(request.failure()).toBeUndefined();
-      }
+      const url = request.url();
+      const failure = request.failure()?.errorText;
+
+      proxyIntegrations.forEach((proxy) => {
+        if (url.includes(proxy)) {
+          // This fails the test and prints the relevant info in test result
+          expect(url + ' ' + failure).toBeUndefined();
+        }
+      });
     });
 
-    await page.goto('/playground');
     await clickPlaygroundRefreshButton(page);
   });
 });

e2e/sms-pumping/bot-unprotected.spec.ts

@@ -4,11 +4,11 @@ import {
   MAX_SMS_ATTEMPTS,
   SMS_ATTEMPT_TIMEOUT_MAP,
   SMS_FRAUD_COPY,
-  TEST_BUILD,
   TEST_PHONE_NUMBER,
 } from '../../src/server/sms-pumping/smsPumpingConst';
 import { assertAlert, assertSnackbar, blockGoogleTagManager, resetScenarios } from '../e2eTestUtils';
 import { ONE_MINUTE_MS } from '../../src/shared/timeUtils';
+import { TEST_BUILD } from '../../src/envShared';
 
 const TEST_ID = TEST_IDS.smsFraud;
 

e2e/vpn-detection.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect, Page } from '@playwright/test';
+import { TEST_IDS } from '../src/client/testIDs';
+import { VPN_DETECTION_COPY } from '../src/app/vpn-detection/copy';
+import { assertAlert } from './e2eTestUtils';
+
+const getActivateButton = (page: Page) => page.getByTestId(TEST_IDS.vpnDetection.activateRegionalPricing);
+
+test.describe('VPN Detection demo', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/vpn-detection');
+  });
+
+  test('should personalize UI copy based on user location', async ({ page }) => {
+    await expect(page.getByTestId(TEST_IDS.vpnDetection.callout)).toContainText(VPN_DETECTION_COPY.personalizedCallout);
+
+    const button = await page.getByTestId(TEST_IDS.vpnDetection.activateRegionalPricing);
+    await expect(button).toContainText(/\d+% off with/);
+  });
+
+  test('should allow to activate regional pricing without VPN', async ({ page }) => {
+    await getActivateButton(page).click();
+    await assertAlert({
+      page,
+      severity: 'success',
+      text: VPN_DETECTION_COPY.success({ discount: 20, country: 'Test Country' }).substring(0, 20),
+    });
+
+    const discountLineItem = await page.getByTestId(TEST_IDS.common.cart.discount);
+    await expect(discountLineItem).toContainText(VPN_DETECTION_COPY.discountName);
+  });
+
+  test('should not allow to activate regional pricing with VPN', async ({ page }) => {
+    // Mock positive VPN detection result
+    const vpnError = 'You are using a VPN.';
+    await page.route('/vpn-detection/api/activate-ppp', (route) =>
+      route.fulfill({ status: 403, body: JSON.stringify({ severity: 'error', message: vpnError }) }),
+    );
+
+    await getActivateButton(page).click();
+    await assertAlert({ page, severity: 'error', text: vpnError });
+    await expect(page.getByTestId(TEST_IDS.common.cart.discount)).toBeAttached({ attached: false });
+  });
+});

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",
+    "@t3-oss/env-nextjs": "^0.9.2",
     "classnames": "^2.5.1",
     "cors": "^2.8.5",
     "framer-motion": "^11.0.8",

src/Layout.tsx

@@ -0,0 +1,17 @@
+import './styles/global-styles.scss';
+import { FunctionComponent, PropsWithChildren } from 'react';
+import Footer from './client/components/common/Footer/Footer';
+import Header from './client/components/common/Header/Header';
+import styles from './styles/layout.module.scss';
+import DeploymentUtils from './client/DeploymentUtils';
+
+export const Layout: FunctionComponent<PropsWithChildren<{ embed: boolean }>> = ({ children, embed }) => {
+  return (
+    <div className={styles.layout}>
+      {embed ? null : <Header />}
+      <DeploymentUtils />
+      <div>{children}</div>
+      {embed ? null : <Footer />}
+    </div>
+  );
+};

src/Providers.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { SnackbarProvider } from 'notistack';
+import { PropsWithChildren } from 'react';
+import { CloseSnackbarButton, CustomSnackbar } from './client/components/common/Alert/Alert';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+function Providers({ children }: PropsWithChildren) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SnackbarProvider
+        action={(snackbarId) => <CloseSnackbarButton snackbarId={snackbarId} />}
+        maxSnack={4}
+        autoHideDuration={5000}
+        anchorOrigin={{
+          horizontal: 'left',
+          vertical: 'bottom',
+        }}
+        Components={{
+          default: CustomSnackbar,
+          success: CustomSnackbar,
+          error: CustomSnackbar,
+          warning: CustomSnackbar,
+          info: CustomSnackbar,
+        }}
+      >
+        {children}
+      </SnackbarProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default Providers;

src/app/api/decrypt/route.ts

@@ -0,0 +1,19 @@
+import { EventResponse } from '@fingerprintjs/fingerprintjs-pro-server-api';
+import { decryptSealedResult } from '../../../server/decryptSealedResult';
+
+export type DecryptPayload = {
+  sealedResult: string;
+};
+
+export type DecryptResponse = EventResponse;
+
+export async function POST(request: Request) {
+  try {
+    const sealedData = ((await request?.json()) as DecryptPayload).sealedResult;
+    const data = await decryptSealedResult(sealedData);
+    return Response.json(data);
+  } catch (e) {
+    console.error(e);
+    return Response.json({ error: e }, { status: 500, statusText: String(e) });
+  }
+}

src/app/appLayout.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { useSelectedLayoutSegments } from 'next/navigation';
+import { Layout } from '../Layout';
+
+export default function LayoutUiInsideApp({ children }: { children: React.ReactNode }) {
+  const segments = useSelectedLayoutSegments();
+  return <Layout embed={segments.includes('embed')}>{children}</Layout>;
+}

src/app/layout.tsx

@@ -0,0 +1,20 @@
+import Providers from '../Providers';
+import LayoutUiInsideApp from './appLayout';
+
+export const metadata = {
+  title: 'Fingerprint Pro Use Cases',
+  description:
+    'Explore the wide range of major use cases supported by Fingerprint, including a comprehensive demo that showcases both frontend and backend sample implementations with a persistent data layer for each use case.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang='en'>
+      <body>
+        <Providers>
+          <LayoutUiInsideApp>{children}</LayoutUiInsideApp>
+        </Providers>
+      </body>
+    </html>
+  );
+}