Added multi auth cluster (#952)

* Added new search param for client_id

* Added authProvider component

* Added apiDomain prop to liveconfig

* Added test utils for authProvider component

* Added US cluster to demo app

* Changed getAuthConfig function to check url param in this order: token > client_id

Hooks removed from pure function

* Made thumbnail optional in liveconfig fetched and instead passed as props

* Made apiDomain and thumbnailDomain optional in configValidator

* Changed mock global

* Added thumbnail to env and demo app

* Fixed wording

Author: dlymonkai

apps/demo-app/.env-cmdrc.json

@@ -6,46 +6,91 @@
     "REACT_APP_ENVIRONMENT": "local",
     "REACT_APP_LIVE_CONFIG_ID": "demo-app-development",
     "REACT_APP_USE_LOCAL_CONFIG": "true",
-    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
+    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN": "api.preview.monk.ai/image_resize",
+
+    "REACT_APP_AUTH_DOMAIN_US": "acv-staging.us.auth0.com",
+    "REACT_APP_AUTH_CLIENT_ID_US": "0tIBBTLd4uP52jtF2PcXawWYxW12mUfZ",
+    "REACT_APP_API_DOMAIN_US": "monk-us-core-api.gateway.staging.acvauctions.com/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN_US": "monk-us-image.gateway.staging.acvauctions.com/image_resize",
+
     "REACT_APP_SENTRY_DSN": "https://74f50bfe6f11de7aefd54acfa5dfed96@o4505669501648896.ingest.us.sentry.io/4506863461662720",
     "REACT_APP_SENTRY_DEBUG": "true",
     "REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
   },
   "development": {
     "REACT_APP_ENVIRONMENT": "development",
     "REACT_APP_LIVE_CONFIG_ID": "demo-app-development",
-    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
+    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN": "api.preview.monk.ai/image_resize",
+
+    "REACT_APP_AUTH_DOMAIN_US": "acv-staging.us.auth0.com",
+    "REACT_APP_AUTH_CLIENT_ID_US": "0tIBBTLd4uP52jtF2PcXawWYxW12mUfZ",
+    "REACT_APP_API_DOMAIN_US": "monk-us-core-api.gateway.staging.acvauctions.com/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN_US": "monk-us-image.gateway.staging.acvauctions.com/image_resize",
+
     "REACT_APP_SENTRY_DSN": "https://74f50bfe6f11de7aefd54acfa5dfed96@o4505669501648896.ingest.us.sentry.io/4506863461662720",
     "REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
   },
   "staging": {
     "REACT_APP_ENVIRONMENT": "staging",
     "REACT_APP_LIVE_CONFIG_ID": "demo-app-staging",
-    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
+    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN": "api.preview.monk.ai/image_resize",
+
+    "REACT_APP_AUTH_DOMAIN_US": "acv-staging.us.auth0.com",
+    "REACT_APP_AUTH_CLIENT_ID_US": "0tIBBTLd4uP52jtF2PcXawWYxW12mUfZ",
+    "REACT_APP_API_DOMAIN_US": "monk-us-core-api.gateway.staging.acvauctions.com/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN_US": "monk-us-image.gateway.staging.acvauctions.com/image_resize",
+
     "REACT_APP_SENTRY_DSN": "https://74f50bfe6f11de7aefd54acfa5dfed96@o4505669501648896.ingest.us.sentry.io/4506863461662720",
     "REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
   },
   "preview": {
     "REACT_APP_ENVIRONMENT": "preview",
     "REACT_APP_LIVE_CONFIG_ID": "demo-app-preview",
-    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
+
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
+    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN": "api.preview.monk.ai/image_resize",
+
+    "REACT_APP_AUTH_DOMAIN_US": "acv-staging.us.auth0.com",
+    "REACT_APP_AUTH_CLIENT_ID_US": "0tIBBTLd4uP52jtF2PcXawWYxW12mUfZ",
+    "REACT_APP_API_DOMAIN_US": "monk-us-core-api.gateway.staging.acvauctions.com/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN_US": "monk-us-image.gateway.staging.acvauctions.com/image_resize",
+
     "REACT_APP_SENTRY_DSN": "https://74f50bfe6f11de7aefd54acfa5dfed96@o4505669501648896.ingest.us.sentry.io/4506863461662720",
     "REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
   },
   "backend-staging-qa": {
     "REACT_APP_ENVIRONMENT": "backend-staging-qa",
     "REACT_APP_LIVE_CONFIG_ID": "demo-app-backend-staging-qa",
-    "REACT_APP_AUTH_DOMAIN": "idp.staging.monk.ai",
+
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
+    "REACT_APP_AUTH_DOMAIN": "idp.staging.monk.ai",
     "REACT_APP_AUTH_CLIENT_ID": "DAeZWqeeOfgItYBcQzFeFwSrlvmUdN7L",
+    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN": "api.staging.dev.monk.ai/image_resize",
+
+    "REACT_APP_AUTH_DOMAIN_US": "acv-staging.us.auth0.com",
+    "REACT_APP_AUTH_CLIENT_ID_US": "0tIBBTLd4uP52jtF2PcXawWYxW12mUfZ",
+    "REACT_APP_API_DOMAIN_US": "monk-us-core-api.gateway.staging.acvauctions.com/v1",
+    "REACT_APP_THUMBNAIL_DOMAIN_US": "monk-us-image.gateway.staging.acvauctions.com/image_resize",
+
     "REACT_APP_SENTRY_DSN": "https://74f50bfe6f11de7aefd54acfa5dfed96@o4505669501648896.ingest.us.sentry.io/4506863461662720",
     "REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.staging.monk.ai"
   }

apps/demo-app/src/auth.ts

@@ -0,0 +1,26 @@
+import { AuthorizationParams } from '@auth0/auth0-react';
+import { getEnvOrThrow } from '@monkvision/common';
+import { AuthConfig } from '@monkvision/network';
+
+export const AUTHORIZATION_PARAMS: AuthorizationParams = {
+  redirect_uri: window.location.origin,
+  audience: getEnvOrThrow('REACT_APP_AUTH_AUDIENCE'),
+  prompt: 'login',
+};
+
+export const authConfigs: AuthConfig[] = [
+  {
+    domain: getEnvOrThrow('REACT_APP_AUTH_DOMAIN'),
+    clientId: getEnvOrThrow('REACT_APP_AUTH_CLIENT_ID'),
+    apiDomain: getEnvOrThrow('REACT_APP_API_DOMAIN'),
+    thumbnailDomain: getEnvOrThrow('REACT_APP_THUMBNAIL_DOMAIN'),
+    authorizationParams: AUTHORIZATION_PARAMS,
+  },
+  {
+    domain: getEnvOrThrow('REACT_APP_AUTH_DOMAIN_US'),
+    clientId: getEnvOrThrow('REACT_APP_AUTH_CLIENT_ID_US'),
+    apiDomain: getEnvOrThrow('REACT_APP_API_DOMAIN_US'),
+    thumbnailDomain: getEnvOrThrow('REACT_APP_THUMBNAIL_DOMAIN_US'),
+    authorizationParams: AUTHORIZATION_PARAMS,
+  },
+];

apps/demo-app/src/components/App.tsx

@@ -3,9 +3,11 @@ import { getEnvOrThrow, MonkProvider } from '@monkvision/common';
 import { useTranslation } from 'react-i18next';
 import { LiveConfigAppProvider } from '@monkvision/common-ui-web';
 import { LiveConfig } from '@monkvision/types';
+import { getAuthConfig } from '@monkvision/network';
 import { Page } from '../pages';
 import * as config from '../local-config.json';
 import { AppContainer } from './AppContainer';
+import { authConfigs } from '../auth';
 
 const localConfig =
   process.env['REACT_APP_USE_LOCAL_CONFIG'] === 'true'
@@ -20,6 +22,8 @@ export function App() {
     <LiveConfigAppProvider
       id={getEnvOrThrow('REACT_APP_LIVE_CONFIG_ID')}
       localConfig={localConfig}
+      apiDomain={getAuthConfig(authConfigs)?.apiDomain}
+      thumbnailDomain={getAuthConfig(authConfigs)?.thumbnailDomain}
       onFetchAuthToken={() => navigate(Page.CREATE_INSPECTION)}
       onFetchLanguage={(lang) => i18n.changeLanguage(lang)}
       lang={i18n.language}

apps/demo-app/src/index.tsx

@@ -1,28 +1,20 @@
 import ReactDOM from 'react-dom';
 import { MonitoringProvider } from '@monkvision/monitoring';
 import { AnalyticsProvider } from '@monkvision/analytics';
-import { Auth0Provider } from '@auth0/auth0-react';
-import { getEnvOrThrow } from '@monkvision/common';
+import { AuthProvider } from '@monkvision/network';
 import { sentryMonitoringAdapter } from './sentry';
 import { posthogAnalyticsAdapter } from './posthog';
 import { AppRouter } from './components';
+import { authConfigs } from './auth';
 import './index.css';
 import './i18n';
 
 ReactDOM.render(
   <MonitoringProvider adapter={sentryMonitoringAdapter}>
     <AnalyticsProvider adapter={posthogAnalyticsAdapter}>
-      <Auth0Provider
-        domain={getEnvOrThrow('REACT_APP_AUTH_DOMAIN')}
-        clientId={getEnvOrThrow('REACT_APP_AUTH_CLIENT_ID')}
-        authorizationParams={{
-          redirect_uri: window.location.origin,
-          audience: getEnvOrThrow('REACT_APP_AUTH_AUDIENCE'),
-          prompt: 'login',
-        }}
-      >
+      <AuthProvider configs={authConfigs}>
         <AppRouter />
-      </Auth0Provider>
+      </AuthProvider>
     </AnalyticsProvider>
   </MonitoringProvider>,
   document.getElementById('root'),

apps/demo-app/src/local-config.json

@@ -12,8 +12,6 @@
   "createInspectionOptions": {
     "tasks": ["damage_detection", "wheel_analysis"]
   },
-  "apiDomain": "api.preview.monk.ai/v1",
-  "thumbnailDomain": "api.preview.monk.ai/image_resize",
   "enableTutorial": "first_time_only",
   "enableSightTutorial": "modern",
   "startTasksOnComplete": true,

configs/test-utils/src/__mocks__/@auth0/auth0-react.ts

@@ -0,0 +1,14 @@
+const mockAuth0Provider = ({ children, ...props }: any) => {
+  (global as any).__auth0ProviderLastProps = props;
+  return <>{children}</>;
+};
+
+export = {
+  /* Actual exports */
+  /* Mocks */
+  useAuth0: jest.fn(() => ({
+    getAccessTokenWithPopup: jest.fn(() => Promise.resolve('')),
+    logout: jest.fn(),
+  })),
+  Auth0Provider: mockAuth0Provider,
+};

configs/test-utils/src/__mocks__/@auth0/auth0-react.tsx

@@ -39,6 +39,7 @@ const {
   email,
   getVehicleModel,
   getAspectRatio,
+  MonkSearchParam,
 } = jest.requireActual('@monkvision/common');
 
 export = {
@@ -71,6 +72,7 @@ export = {
   email,
   getVehicleModel,
   getAspectRatio,
+  MonkSearchParam,
 
   /* Mocks */
   useMonkTheme: jest.fn(() => createTheme()),
@@ -148,4 +150,5 @@ export = {
     requestCompassPermission: jest.fn(() => Promise.resolve()),
   })),
   useSafeTimeout: jest.fn(() => jest.fn()),
+  useMonkSearchParams: jest.fn(() => ({ get: jest.fn(() => null) })),
 };

configs/test-utils/src/__mocks__/@monkvision/common.tsx

@@ -31,6 +31,8 @@ export = {
   decodeMonkJwt: jest.fn((str) => str),
   isUserAuthorized: jest.fn(() => true),
   isTokenExpired: jest.fn(() => false),
+  isTokenValid: jest.fn(() => true),
+  getAuthConfig: jest.fn(),
   useAuth: jest.fn(() => ({
     authToken: null,
     login: jest.fn(() => Promise.resolve('')),

configs/test-utils/src/__mocks__/@monkvision/network.ts

@@ -9,6 +9,7 @@ import {
   MileageUnit,
   MonkApiPermission,
   PhotoCaptureSightGuidelinesOption,
+  PhotoCaptureSightTutorialOption,
   PhotoCaptureTutorialOption,
   SteeringWheelPosition,
   TaskName,
@@ -269,44 +270,57 @@ export const CreateInspectionDiscriminatedUnionSchema = z.discriminatedUnion(
 
 const domainsByEnv = {
   staging: {
-    api: 'api.staging.monk.ai/v1',
-    thumbnail: 'api.staging.monk.ai/image_resize',
+    api: ['api.staging.monk.ai/v1', 'monk-us-core-api.gateway.dev.acvauctions.com/v1'],
+    thumbnail: [
+      'api.staging.monk.ai/image_resize',
+      'monk-us-image.gateway.dev.acvauctions.com/image_resize',
+    ],
   },
   preview: {
-    api: 'api.preview.monk.ai/v1',
-    thumbnail: 'api.preview.monk.ai/image_resize',
+    api: ['api.preview.monk.ai/v1', 'monk-us-core-api.gateway.staging.acvauctions.com/v1'],
+    thumbnail: [
+      'api.preview.monk.ai/image_resize',
+      'monk-us-image.gateway.staging.acvauctions.com/image_resize',
+    ],
   },
   production: {
-    api: 'api.monk.ai/v1',
-    thumbnail: 'api.monk.ai/image_resize',
+    api: ['api.monk.ai/v1', 'monk-us-core-api.gateway.acvauctions.com/v1'],
+    thumbnail: ['api.monk.ai/image_resize', 'monk-us-image.gateway.acvauctions.com/image_resize'],
   },
 };
 
-const apiDomains = Object.values(domainsByEnv).map((env) => env.api) as [string, ...string[]];
-const thumbnailDomains = Object.values(domainsByEnv).map((env) => env.thumbnail) as [
+const apiDomains = [...new Set(Object.values(domainsByEnv).flatMap((env) => env.api))] as [
   string,
   ...string[],
 ];
+const thumbnailDomains = [
+  ...new Set(Object.values(domainsByEnv).flatMap((env) => env.thumbnail)),
+] as [string, ...string[]];
 
 export const DomainsSchema = z
   .object({
-    apiDomain: z.enum(apiDomains),
-    thumbnailDomain: z.enum(thumbnailDomains),
+    apiDomain: z.enum(apiDomains).optional(),
+    thumbnailDomain: z.enum(thumbnailDomains).optional(),
   })
   .refine(
     (data) => {
-      const apiEnv = Object.values(domainsByEnv).find((env) => env.api === data.apiDomain);
-      const thumbnailEnv = Object.values(domainsByEnv).find(
-        (env) => env.thumbnail === data.thumbnailDomain,
+      const { apiDomain, thumbnailDomain } = data;
+
+      if (!apiDomain || !thumbnailDomain) {
+        return true;
+      }
+
+      const apiEnv = Object.values(domainsByEnv).find((env) => env.api.includes(apiDomain));
+      const thumbnailEnv = Object.values(domainsByEnv).find((env) =>
+        env.thumbnail.includes(thumbnailDomain),
       );
-      return !!apiEnv && apiEnv === thumbnailEnv;
+
+      return Boolean(apiEnv && thumbnailEnv && apiEnv === thumbnailEnv);
     },
-    (data) => ({
-      message: `The selected thumbnailDomain must correspond to the selected apiDomain. Please use the corresponding thumbnailDomain: ${
-        thumbnailDomains[apiDomains.indexOf(data.apiDomain)]
-      }`,
+    {
+      message: 'The selected thumbnailDomain must correspond to the selected apiDomain.',
       path: ['thumbnailDomain'],
-    }),
+    },
   );
 
 export const LiveConfigSchema = z
@@ -329,8 +343,8 @@ export const LiveConfigSchema = z
     sightGuidelines: z.array(SightGuidelineSchema).optional(),
     enableTutorial: z.nativeEnum(PhotoCaptureTutorialOption).optional(),
     allowSkipTutorial: z.boolean().optional(),
-    enableSightTutorial: z.boolean().optional(),
-    sightTutorial: z.array(SightGuidelineSchema).optional(),
+    enableSightTutorial: z.nativeEnum(PhotoCaptureSightTutorialOption).optional(),
+    sightTutorial: z.array(SightTutorialSchema).optional(),
     defaultVehicleType: z.nativeEnum(VehicleType),
     allowManualLogin: z.boolean(),
     allowVehicleTypeSelection: z.boolean(),