Merge pull request #3397 from Infisical/auth0-connection-and-secret-rotation

Feature: Auth0 Connection and Client Secret Rotation

frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretRotationV2Form } from "@app/components/secret-rotations-v2/forms";
 import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
@@ -54,7 +56,24 @@ export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }:
           selectedRotation ? (
             <SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
           ) : (
-            "Add Secret Rotation"
+            <div className="flex items-center text-mineshaft-300">
+              Add Secret Rotation
+              <a
+                target="_blank"
+                href="https://infisical.com/docs/documentation/platform/secret-rotation/overview"
+                className="mb-1 ml-1"
+                rel="noopener noreferrer"
+              >
+                <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+                  <span>Docs</span>
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="mb-[0.07rem] ml-1 text-[10px]"
+                  />
+                </div>
+              </a>
+            </div>
           )
         }
         onPointerDownOutside={(e) => e.preventDefault()}

frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx

@@ -24,7 +24,7 @@ export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
           {destinationDetails.name} Rotation
           <a
             target="_blank"
-            href={`https://infisical.com/docs/platform/secret-rotations/${type}`}
+            href={`https://infisical.com/docs/documentation/platform/secret-rotation/${type}`}
             className="mb-1 ml-1"
             rel="noopener noreferrer"
           >

frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx

@@ -24,17 +24,7 @@ export const SecretRotationV2Select = ({ onSelect }: Props) => {
   return (
     <div className="grid grid-cols-3 gap-2">
       {secretRotationOptions?.map(({ type }) => {
-        const { image, name } = SECRET_ROTATION_MAP[type];
-
-        let size: number;
-
-        switch (type) {
-          case SecretRotation.MsSqlCredentials:
-            size = 50;
-            break;
-          default:
-            size = 45;
-        }
+        const { image, name, size } = SECRET_ROTATION_MAP[type];
 
         return (
           <button

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAuth0ClientSecretRotationGeneratedCredentials.tsx

@@ -0,0 +1,56 @@
+import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { TAuth0ClientSecretRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/auth0-client-secret-rotation";
+
+import { ViewRotationGeneratedCredentialsDisplay } from "./shared";
+
+type Props = {
+  generatedCredentialsResponse: TAuth0ClientSecretRotationGeneratedCredentialsResponse;
+};
+
+export const ViewAuth0ClientSecretRotationGeneratedCredentials = ({
+  generatedCredentialsResponse: { generatedCredentials, activeIndex }
+}: Props) => {
+  const inactiveIndex = activeIndex === 0 ? 1 : 0;
+
+  const activeCredentials = generatedCredentials[activeIndex];
+  const inactiveCredentials = generatedCredentials[inactiveIndex];
+
+  return (
+    <>
+      <ViewRotationGeneratedCredentialsDisplay
+        activeCredentials={
+          <>
+            <CredentialDisplay label="Client ID">{activeCredentials?.clientId}</CredentialDisplay>
+            <CredentialDisplay isSensitive label="Client Secret">
+              {activeCredentials?.clientSecret}
+            </CredentialDisplay>
+          </>
+        }
+        inactiveCredentials={
+          <>
+            <CredentialDisplay label="Client ID">{inactiveCredentials?.clientId}</CredentialDisplay>
+            <CredentialDisplay isSensitive label="Client Secret">
+              {inactiveCredentials?.clientSecret}
+            </CredentialDisplay>
+          </>
+        }
+      />
+      <NoticeBannerV2 title="Auth0 Retired Credentials Behavior">
+        <p className="text-sm text-mineshaft-300">
+          Due to how Auth0 client secrets are rotated, retired credentials will not be able to
+          authenticate with Auth0 during their{" "}
+          <a
+            target="_blank"
+            href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
+            rel="noopener noreferrer"
+            className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+          >
+            inactive period
+          </a>
+          . This is a limitation of the Auth0 platform and cannot be rectified by Infisical.
+        </p>
+      </NoticeBannerV2>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -3,6 +3,7 @@ import { faRotate } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
+import { ViewAuth0ClientSecretRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAuth0ClientSecretRotationGeneratedCredentials";
 import { Modal, ModalContent, Spinner } from "@app/components/v2";
 import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
 import {
@@ -11,7 +12,7 @@ import {
   useViewSecretRotationV2GeneratedCredentials
 } from "@app/hooks/api/secretRotationsV2";
 
-import { ViewSqlRotationGeneratedCredentials } from "./shared";
+import { ViewSqlCredentialsRotationGeneratedCredentials } from "./shared";
 
 type Props = {
   secretRotation?: TSecretRotationV2;
@@ -54,7 +55,14 @@ const Content = ({ secretRotation }: ContentProps) => {
     case SecretRotation.PostgresCredentials:
     case SecretRotation.MsSqlCredentials:
       Component = (
-        <ViewSqlRotationGeneratedCredentials
+        <ViewSqlCredentialsRotationGeneratedCredentials
+          generatedCredentialsResponse={generatedCredentialsResponse}
+        />
+      );
+      break;
+    case SecretRotation.Auth0ClientSecret:
+      Component = (
+        <ViewAuth0ClientSecretRotationGeneratedCredentials
           generatedCredentialsResponse={generatedCredentialsResponse}
         />
       );

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay.tsx

@@ -0,0 +1,48 @@
+import { ReactNode } from "react";
+import { faCheck, faClockRotateLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  activeCredentials: ReactNode;
+  inactiveCredentials?: ReactNode;
+};
+
+export const ViewRotationGeneratedCredentialsDisplay = ({
+  activeCredentials,
+  inactiveCredentials
+}: Props) => {
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-100">
+            <FontAwesomeIcon icon={faCheck} className="mr-1.5 text-green" />
+            Current Credentials
+          </span>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          The active credential set currently mapped to the rotation secrets.
+        </p>
+        <div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
+          {activeCredentials}
+        </div>
+      </div>
+      {inactiveCredentials && (
+        <div className="flex flex-col gap-2">
+          <div className="w-full border-b border-mineshaft-600">
+            <span className="text-sm text-mineshaft-100">
+              <FontAwesomeIcon icon={faClockRotateLeft} className="mr-1.5 text-yellow" />
+              Retired Credentials
+            </span>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            The retired credential set that will be revoked during the next rotation cycle.
+          </p>
+          <div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
+            {inactiveCredentials}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewSqlCredentialsRotationGeneratedCredentials.tsx

@@ -0,0 +1,40 @@
+import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
+import { ViewRotationGeneratedCredentialsDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewRotationGeneratedCredentialsDisplay";
+import { TMsSqlCredentialsRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/mssql-credentials-rotation";
+import { TPostgresCredentialsRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/postgres-credentials-rotation";
+
+type Props = {
+  generatedCredentialsResponse:
+    | TMsSqlCredentialsRotationGeneratedCredentialsResponse
+    | TPostgresCredentialsRotationGeneratedCredentialsResponse;
+};
+
+export const ViewSqlCredentialsRotationGeneratedCredentials = ({
+  generatedCredentialsResponse: { generatedCredentials, activeIndex }
+}: Props) => {
+  const inactiveIndex = activeIndex === 0 ? 1 : 0;
+
+  const activeCredentials = generatedCredentials[activeIndex];
+  const inactiveCredentials = generatedCredentials[inactiveIndex];
+
+  return (
+    <ViewRotationGeneratedCredentialsDisplay
+      activeCredentials={
+        <>
+          <CredentialDisplay label="Username">{activeCredentials?.username}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {activeCredentials?.password}
+          </CredentialDisplay>
+        </>
+      }
+      inactiveCredentials={
+        <>
+          <CredentialDisplay label="Username">{inactiveCredentials?.username}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {inactiveCredentials?.password}
+          </CredentialDisplay>
+        </>
+      }
+    />
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewSqlRotationGeneratedCredentials.tsx

@@ -1,57 +0,0 @@
-import { faCheck, faClockRotateLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
-import { TViewSecretRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2";
-
-type Props = {
-  generatedCredentialsResponse: TViewSecretRotationGeneratedCredentialsResponse;
-};
-
-export const ViewSqlRotationGeneratedCredentials = ({
-  generatedCredentialsResponse: { generatedCredentials, activeIndex }
-}: Props) => {
-  const inactiveIndex = activeIndex === 0 ? 1 : 0;
-
-  const activeCredentials = generatedCredentials[activeIndex];
-  const inactiveCredentials = generatedCredentials[inactiveIndex];
-
-  return (
-    <>
-      <div className="flex flex-col gap-2">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-100">
-            <FontAwesomeIcon icon={faCheck} className="mr-1.5 text-green" />
-            Current Credentials
-          </span>
-        </div>
-        <p className="text-sm text-mineshaft-300">
-          The active credential set currently mapped to the rotation secrets.
-        </p>
-        <div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
-          <CredentialDisplay label="Username">{activeCredentials?.username}</CredentialDisplay>
-          <CredentialDisplay isSensitive label="Password">
-            {activeCredentials?.password}
-          </CredentialDisplay>
-        </div>
-      </div>
-      <div className="flex flex-col gap-2">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-100">
-            <FontAwesomeIcon icon={faClockRotateLeft} className="mr-1.5 text-yellow" />
-            Retired Credentials
-          </span>
-        </div>
-        <p className="text-sm text-mineshaft-300">
-          The retired credential set that will be revoked during the next rotation cycle.
-        </p>
-        <div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
-          <CredentialDisplay label="Username">{inactiveCredentials?.username}</CredentialDisplay>
-          <CredentialDisplay isSensitive label="Password">
-            {inactiveCredentials?.password}
-          </CredentialDisplay>
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/index.ts

@@ -1 +1,3 @@
-export * from "./ViewSqlRotationGeneratedCredentials";
+export * from "./CredentialDisplay";
+export * from "./ViewRotationGeneratedCredentialsDisplay";
+export * from "./ViewSqlCredentialsRotationGeneratedCredentials";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx

@@ -1,8 +1,14 @@
 import { Controller, useFormContext } from "react-hook-form";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format, setHours, setMinutes } from "date-fns";
 
 import { FilterableSelect, FormControl, Input, Switch } from "@app/components/v2";
-import { getRotateAtLocal } from "@app/helpers/secretRotationsV2";
+import {
+  getRotateAtLocal,
+  IS_ROTATION_DUAL_CREDENTIALS,
+  SECRET_ROTATION_MAP
+} from "@app/helpers/secretRotationsV2";
 import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
 
 import { TSecretRotationV2Form } from "./schemas";
@@ -14,7 +20,9 @@ type Props = {
 };
 
 export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }: Props) => {
-  const { control } = useFormContext<TSecretRotationV2Form>();
+  const { control, watch } = useFormContext<TSecretRotationV2Form>();
+
+  const [type, isAutoRotationEnabled] = watch(["type", "isAutoRotationEnabled"]);
 
   return (
     <>
@@ -117,6 +125,23 @@ export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }:
           );
         }}
       />
+      {!IS_ROTATION_DUAL_CREDENTIALS[type] && isAutoRotationEnabled && (
+        <div className="rounded border border-yellow bg-yellow/10 p-2 px-3 text-xs text-yellow">
+          <FontAwesomeIcon icon={faWarning} className="mr-1" /> Due to{" "}
+          {SECRET_ROTATION_MAP[type].name} Rotations rotating a single credential set, auto-rotation
+          may result in service interruptions. If you need to ensure service continuity, we
+          recommend disabling this option. <br />
+          <a
+            href="https://infisical.com/docs/documentation/platform/secret-rotation/overview#how-rotation-works"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline decoration-yellow underline-offset-2 hover:text-mineshaft-200"
+          >
+            Read more
+          </a>
+          .
+        </div>
+      )}
     </>
   );
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx

@@ -12,7 +12,7 @@ import { SecretRotationV2ReviewFields } from "@app/components/secret-rotations-v
 import { SecretRotationV2SecretsMappingFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields";
 import { Button } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { IS_ROTATION_DUAL_CREDENTIALS, SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
 import {
   SecretRotation,
   TSecretRotationV2,
@@ -84,7 +84,7 @@ export const SecretRotationV2Form = ({
         }
       : {
           type,
-          isAutoRotationEnabled: true,
+          isAutoRotationEnabled: IS_ROTATION_DUAL_CREDENTIALS[type],
           rotationInterval: DEFAULT_ROTATION_INTERVAL,
           rotateAtUtc: {
             hours: 0,
@@ -92,7 +92,7 @@ export const SecretRotationV2Form = ({
           },
           environment: currentWorkspace?.environments.find((env) => env.slug === envSlug),
           secretPath,
-          ...rotationOption!.template
+          ...(rotationOption!.template as object) // can't infer type since we don't know which specific type it is
         },
     reValidateMode: "onChange"
   });
@@ -142,7 +142,11 @@ export const SecretRotationV2Form = ({
     setSelectedTabIndex((prev) => prev - 1);
   };
 
-  const { handleSubmit, trigger } = formMethods;
+  const {
+    handleSubmit,
+    trigger,
+    formState: { isSubmitting }
+  } = formMethods;
 
   const isStepValid = async (index: number) => trigger(FORM_TABS[index].fields);
 
@@ -219,7 +223,12 @@ export const SecretRotationV2Form = ({
         </Tab.Group>
       </FormProvider>
       <div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
-        <Button onClick={handleNext} colorSchema="secondary">
+        <Button
+          onClick={handleNext}
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+          colorSchema="secondary"
+        >
           {isFinalStep ? `${secretRotation ? "Update" : "Create"} Secret Rotation` : "Next"}
         </Button>
         <Button onClick={handlePrev} colorSchema="secondary">

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/Auth0ClientSecretRotationParametersFields.tsx

@@ -0,0 +1,70 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { useAuth0ConnectionListClients } from "@app/hooks/api/appConnections/auth0";
+import { TAuth0Client } from "@app/hooks/api/appConnections/auth0/types";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const Auth0ClientSecretRotationParametersFields = () => {
+  const { control, watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.Auth0ClientSecret;
+    }
+  >();
+
+  const connectionId = watch("connection.id");
+
+  const { data: clients, isPending: isClientsPending } = useAuth0ConnectionListClients(
+    connectionId,
+    { enabled: Boolean(connectionId) }
+  );
+
+  return (
+    <Controller
+      name="parameters.clientId"
+      control={control}
+      render={({ field: { value, onChange }, fieldState: { error } }) => (
+        <FormControl
+          isError={Boolean(error)}
+          errorText={error?.message}
+          label="Application"
+          helperText={
+            <Tooltip
+              className="max-w-md"
+              content={
+                <>
+                  Ensure that your connection has the{" "}
+                  <span className="font-semibold">read_clients</span> permission and the application
+                  exists in the connection&#39;s audience.
+                </>
+              }
+            >
+              <div>
+                <span>Don&#39;t see the application you&#39;re looking for?</span>{" "}
+                <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+              </div>
+            </Tooltip>
+          }
+        >
+          <FilterableSelect
+            menuPlacement="top"
+            isLoading={isClientsPending && Boolean(connectionId)}
+            isDisabled={!connectionId}
+            value={clients?.find((client) => client.id === value) ?? null}
+            onChange={(option) => {
+              onChange((option as SingleValue<TAuth0Client>)?.id ?? null);
+            }}
+            options={clients}
+            placeholder="Select an application..."
+            getOptionLabel={(option) => option.name}
+            getOptionValue={(option) => option.id}
+          />
+        </FormControl>
+      )}
+    />
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx

@@ -3,11 +3,13 @@ import { useFormContext } from "react-hook-form";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
 import { TSecretRotationV2Form } from "../schemas";
-import { SqlRotationParametersFields } from "./shared";
+import { Auth0ClientSecretRotationParametersFields } from "./Auth0ClientSecretRotationParametersFields";
+import { SqlCredentialsRotationParametersFields } from "./shared";
 
 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
-  [SecretRotation.PostgresCredentials]: SqlRotationParametersFields,
-  [SecretRotation.MsSqlCredentials]: SqlRotationParametersFields
+  [SecretRotation.PostgresCredentials]: SqlCredentialsRotationParametersFields,
+  [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationParametersFields,
+  [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationParametersFields
 };
 
 export const SecretRotationV2ParametersFields = () => {

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlCredentialsRotationParametersFields.tsx

@@ -5,10 +5,10 @@ import { FormControl, Input } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
 
-export const SqlRotationParametersFields = () => {
+export const SqlCredentialsRotationParametersFields = () => {
   const { control, watch } = useFormContext<
     TSecretRotationV2Form & {
-      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
+      type: SecretRotation.PostgresCredentials | SecretRotation.MsSqlCredentials;
     }
   >();
 

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/index.ts

@@ -1 +1 @@
-export * from "./SqlRotationParametersFields";
+export * from "./SqlCredentialsRotationParametersFields";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/Auth0ClientSecretRotationReviewFields.tsx

@@ -0,0 +1,29 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationReviewSection } from "./shared";
+
+export const Auth0ClientSecretRotationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.Auth0ClientSecret;
+    }
+  >();
+
+  const [parameters, { clientId, clientSecret }] = watch(["parameters", "secretsMapping"]);
+
+  return (
+    <>
+      <SecretRotationReviewSection label="Parameters">
+        <GenericFieldLabel label="Client ID">{parameters.clientId}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+      <SecretRotationReviewSection label="Secrets Mapping">
+        <GenericFieldLabel label="Client ID">{clientId}</GenericFieldLabel>
+        <GenericFieldLabel label="Client Secret">{clientSecret}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx

@@ -2,14 +2,17 @@ import { useFormContext } from "react-hook-form";
 import { format } from "date-fns";
 
 import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
-import { SqlRotationReviewFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared";
 import { GenericFieldLabel } from "@app/components/v2";
 import { getRotateAtLocal } from "@app/helpers/secretRotationsV2";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
+import { Auth0ClientSecretRotationReviewFields } from "./Auth0ClientSecretRotationReviewFields";
+import { SqlCredentialsRotationReviewFields } from "./shared";
+
 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
-  [SecretRotation.PostgresCredentials]: SqlRotationReviewFields,
-  [SecretRotation.MsSqlCredentials]: SqlRotationReviewFields
+  [SecretRotation.PostgresCredentials]: SqlCredentialsRotationReviewFields,
+  [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationReviewFields,
+  [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationReviewFields
 };
 
 export const SecretRotationV2ReviewFields = () => {

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SecretRotationReviewSection.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+type Props = {
+  label: "Parameters" | "Secrets Mapping";
+  children: ReactNode;
+};
+
+export const SecretRotationReviewSection = ({ label, children }: Props) => {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="w-full border-b border-mineshaft-600">
+        <span className="text-sm text-mineshaft-300">{label}</span>
+      </div>
+      <div className="flex flex-wrap gap-x-8 gap-y-2">{children}</div>
+    </div>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SqlCredentialsRotationReviewFields.tsx

@@ -0,0 +1,33 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationReviewSection } from "./SecretRotationReviewSection";
+
+export const SqlCredentialsRotationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.PostgresCredentials | SecretRotation.MsSqlCredentials;
+    }
+  >();
+
+  const [{ username1, username2 }, { username, password }] = watch([
+    "parameters",
+    "secretsMapping"
+  ]);
+
+  return (
+    <>
+      <SecretRotationReviewSection label="Parameters">
+        <GenericFieldLabel label="Database Username 1">{username1}</GenericFieldLabel>
+        <GenericFieldLabel label="Database Username 2">{username2}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+      <SecretRotationReviewSection label="Secrets Mapping">
+        <GenericFieldLabel label="Username">{username}</GenericFieldLabel>
+        <GenericFieldLabel label="Password">{password}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SqlRotationReviewFields.tsx

@@ -1,41 +0,0 @@
-import { useFormContext } from "react-hook-form";
-
-import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
-import { GenericFieldLabel } from "@app/components/v2";
-import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
-
-export const SqlRotationReviewFields = () => {
-  const { watch } = useFormContext<
-    TSecretRotationV2Form & {
-      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
-    }
-  >();
-
-  const [{ username1, username2 }, { username, password }] = watch([
-    "parameters",
-    "secretsMapping"
-  ]);
-
-  return (
-    <>
-      <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Parameters</span>
-        </div>
-        <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <GenericFieldLabel label="Database Username 1">{username1}</GenericFieldLabel>
-          <GenericFieldLabel label="Database Username 2">{username2}</GenericFieldLabel>
-        </div>
-      </div>
-      <div className="flex flex-col gap-3">
-        <div className="w-full border-b border-mineshaft-600">
-          <span className="text-sm text-mineshaft-300">Secrets Mapping</span>
-        </div>
-        <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <GenericFieldLabel label="Username">{username}</GenericFieldLabel>
-          <GenericFieldLabel label="Password">{password}</GenericFieldLabel>
-        </div>
-      </div>
-    </>
-  );
-};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/index.ts

@@ -1 +1,2 @@
-export * from "./SqlRotationReviewFields";
+export * from "./SecretRotationReviewSection";
+export * from "./SqlCredentialsRotationReviewFields";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/Auth0ClientSecretRotationSecretsMappingFields.tsx

@@ -0,0 +1,58 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretsMappingTable } from "./shared";
+
+export const Auth0ClientSecretRotationSecretsMappingFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.Auth0ClientSecret;
+    }
+  >();
+
+  const { rotationOption } = useSecretRotationV2Option(SecretRotation.Auth0ClientSecret);
+
+  const items = [
+    {
+      name: "Client ID",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.clientId}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.clientId"
+        />
+      )
+    },
+    {
+      name: "Client Secret",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.clientSecret}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.clientSecret"
+        />
+      )
+    }
+  ];
+
+  return <SecretsMappingTable items={items} />;
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx

@@ -3,11 +3,13 @@ import { useFormContext } from "react-hook-form";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
 import { TSecretRotationV2Form } from "../schemas";
-import { SqlRotationSecretsMappingFields } from "./shared";
+import { Auth0ClientSecretRotationSecretsMappingFields } from "./Auth0ClientSecretRotationSecretsMappingFields";
+import { SqlCredentialsRotationSecretsMappingFields } from "./shared";
 
 const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
-  [SecretRotation.PostgresCredentials]: SqlRotationSecretsMappingFields,
-  [SecretRotation.MsSqlCredentials]: SqlRotationSecretsMappingFields
+  [SecretRotation.PostgresCredentials]: SqlCredentialsRotationSecretsMappingFields,
+  [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationSecretsMappingFields,
+  [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationSecretsMappingFields
 };
 
 export const SecretRotationV2SecretsMappingFields = () => {

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SecretsMappingTable.tsx

@@ -1,49 +1,14 @@
-import { Controller, useFormContext } from "react-hook-form";
+import { ReactNode } from "react";
 import { faArrowRight, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
-import { Badge, FormControl, FormLabel, Input } from "@app/components/v2";
-import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import { Badge, FormLabel } from "@app/components/v2";
 
-export const SqlRotationSecretsMappingFields = () => {
-  const { control } = useFormContext<
-    TSecretRotationV2Form & {
-      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
-    }
-  >();
-
-  const items = [
-    {
-      name: "Username",
-      input: (
-        <Controller
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl isError={Boolean(error)} errorText={error?.message}>
-              <Input value={value} onChange={onChange} placeholder="DB_USERNAME" />
-            </FormControl>
-          )}
-          control={control}
-          name="secretsMapping.username"
-        />
-      )
-    },
-    {
-      name: "Password",
-      input: (
-        <Controller
-          render={({ field: { value, onChange }, fieldState: { error } }) => (
-            <FormControl isError={Boolean(error)} errorText={error?.message}>
-              <Input value={value} onChange={onChange} placeholder="DB_PASSWORD" />
-            </FormControl>
-          )}
-          control={control}
-          name="secretsMapping.password"
-        />
-      )
-    }
-  ];
+type Props = {
+  items: { name: string; input: ReactNode }[];
+};
 
+export const SecretsMappingTable = ({ items }: Props) => {
   return (
     <div className="w-full overflow-hidden">
       <table className="w-full table-auto">

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SqlCredentialsRotationSecretsMappingFields.tsx

@@ -0,0 +1,60 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretsMappingTable } from "./SecretsMappingTable";
+
+export const SqlCredentialsRotationSecretsMappingFields = () => {
+  const { control, watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.PostgresCredentials | SecretRotation.MsSqlCredentials;
+    }
+  >();
+
+  const type = watch("type");
+
+  const { rotationOption } = useSecretRotationV2Option(type);
+
+  const items = [
+    {
+      name: "Username",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.username}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.username"
+        />
+      )
+    },
+    {
+      name: "Password",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.password}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.password"
+        />
+      )
+    }
+  ];
+
+  return <SecretsMappingTable items={items} />;
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/index.ts

@@ -1 +1,2 @@
-export * from "./SqlRotationSecretsMappingFields";
+export * from "./SecretsMappingTable";
+export * from "./SqlCredentialsRotationSecretsMappingFields";

frontend/src/components/secret-rotations-v2/forms/schemas/auth0-client-secret-rotation-schema.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const Auth0ClientSecretRotationSchema = z
+  .object({
+    type: z.literal(SecretRotation.Auth0ClientSecret),
+    parameters: z.object({
+      clientId: z.string().trim().min(1, "Client ID required")
+    }),
+    secretsMapping: z.object({
+      clientId: z.string().trim().min(1, "Client ID required"),
+      clientSecret: z.string().trim().min(1, "Client Secret required")
+    })
+  })
+  .merge(BaseSecretRotationSchema);

frontend/src/components/secret-rotations-v2/forms/schemas/index.ts

@@ -1,11 +1,13 @@
 import { z } from "zod";
 
+import { Auth0ClientSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/auth0-client-secret-rotation-schema";
 import { MsSqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/mssql-credentials-rotation-schema";
 import { PostgresCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/postgres-credentials-rotation-schema";
 
 const SecretRotationUnionSchema = z.discriminatedUnion("type", [
   PostgresCredentialsRotationSchema,
-  MsSqlCredentialsRotationSchema
+  MsSqlCredentialsRotationSchema,
+  Auth0ClientSecretRotationSchema
 ]);
 
 export const SecretRotationV2FormSchema = SecretRotationUnionSchema;

frontend/src/helpers/appConnections.ts

@@ -1,8 +1,9 @@
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { faKey, faLock, faPassport, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faKey, faLock, faPassport, faServer, faUser } from "@fortawesome/free-solid-svg-icons";
 
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import {
+  Auth0ConnectionMethod,
   AwsConnectionMethod,
   AzureAppConfigurationConnectionMethod,
   AzureKeyVaultConnectionMethod,
@@ -18,7 +19,10 @@ import {
   VercelConnectionMethod
 } from "@app/hooks/api/appConnections/types";
 
-export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: string }> = {
+export const APP_CONNECTION_MAP: Record<
+  AppConnection,
+  { name: string; image: string; size?: number }
+> = {
   [AppConnection.AWS]: { name: "AWS", image: "Amazon Web Services.png" },
   [AppConnection.GitHub]: { name: "GitHub", image: "GitHub.png" },
   [AppConnection.GCP]: {
@@ -36,7 +40,8 @@ export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: st
   [AppConnection.Vercel]: { name: "Vercel", image: "Vercel.png" },
   [AppConnection.Postgres]: { name: "PostgreSQL", image: "Postgres.png" },
   [AppConnection.MsSql]: { name: "Microsoft SQL Server", image: "MsSql.png" },
-  [AppConnection.Camunda]: { name: "Camunda", image: "Camunda.png" }
+  [AppConnection.Camunda]: { name: "Camunda", image: "Camunda.png" },
+  [AppConnection.Auth0]: { name: "Auth0", image: "Auth0.png", size: 40 }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
@@ -64,6 +69,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
     case PostgresConnectionMethod.UsernameAndPassword:
     case MsSqlConnectionMethod.UsernameAndPassword:
       return { name: "Username & Password", icon: faLock };
+    case Auth0ConnectionMethod.ClientCredentials:
+      return { name: "Client Credentials", icon: faServer };
     default:
       throw new Error(`Unhandled App Connection Method: ${method}`);
   }

frontend/src/helpers/secretRotationsV2.ts

@@ -1,17 +1,38 @@
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 
-export const SECRET_ROTATION_MAP: Record<SecretRotation, { name: string; image: string }> = {
-  [SecretRotation.PostgresCredentials]: { name: "PostgreSQL Credentials", image: "Postgres.png" },
+export const SECRET_ROTATION_MAP: Record<
+  SecretRotation,
+  { name: string; image: string; size: number }
+> = {
+  [SecretRotation.PostgresCredentials]: {
+    name: "PostgreSQL Credentials",
+    image: "Postgres.png",
+    size: 45
+  },
   [SecretRotation.MsSqlCredentials]: {
     name: "Microsoft SQL Server Credentials",
-    image: "MsSql.png"
+    image: "MsSql.png",
+    size: 50
+  },
+  [SecretRotation.Auth0ClientSecret]: {
+    name: "Auth0 Client Secret",
+    image: "Auth0.png",
+    size: 35
   }
 };
 
 export const SECRET_ROTATION_CONNECTION_MAP: Record<SecretRotation, AppConnection> = {
   [SecretRotation.PostgresCredentials]: AppConnection.Postgres,
-  [SecretRotation.MsSqlCredentials]: AppConnection.MsSql
+  [SecretRotation.MsSqlCredentials]: AppConnection.MsSql,
+  [SecretRotation.Auth0ClientSecret]: AppConnection.Auth0
+};
+
+// if a rotation can potentially have downtime due to rotating a single credential set this to false
+export const IS_ROTATION_DUAL_CREDENTIALS: Record<SecretRotation, boolean> = {
+  [SecretRotation.PostgresCredentials]: true,
+  [SecretRotation.MsSqlCredentials]: true,
+  [SecretRotation.Auth0ClientSecret]: false
 };
 
 export const getRotateAtLocal = ({ hours, minutes }: TSecretRotationV2["rotateAtUtc"]) => {

frontend/src/hooks/api/appConnections/auth0/index.ts

@@ -0,0 +1 @@
+export * from "./queries";

frontend/src/hooks/api/appConnections/auth0/queries.tsx

@@ -0,0 +1,37 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { appConnectionKeys } from "../queries";
+import { TAuth0Client } from "./types";
+
+const auth0ConnectionKeys = {
+  all: [...appConnectionKeys.all, "auth0"] as const,
+  listClients: (connectionId: string) =>
+    [...auth0ConnectionKeys.all, "clients", connectionId] as const
+};
+
+export const useAuth0ConnectionListClients = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TAuth0Client[],
+      unknown,
+      TAuth0Client[],
+      ReturnType<typeof auth0ConnectionKeys.listClients>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: auth0ConnectionKeys.listClients(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ clients: TAuth0Client[] }>(
+        `/api/v1/app-connections/auth0/${connectionId}/clients`
+      );
+
+      return data.clients;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/auth0/types.ts

@@ -0,0 +1,4 @@
+export type TAuth0Client = {
+  name: string;
+  id: string;
+};

frontend/src/hooks/api/appConnections/enums.ts

@@ -10,5 +10,6 @@ export enum AppConnection {
   Vercel = "vercel",
   Postgres = "postgres",
   MsSql = "mssql",
-  Camunda = "camunda"
+  Camunda = "camunda",
+  Auth0 = "auth0"
 }

frontend/src/hooks/api/appConnections/queries.tsx

@@ -59,7 +59,7 @@ export const useGetAppConnectionOption = <T extends AppConnection>(app: T) => {
       option: (options.find((opt) => opt.app === app) as TAppConnectionOptionMap[T]) ?? {},
       isLoading: isPending
     }),
-    [options, app]
+    [options, app, isPending]
   );
 };
 

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -59,6 +59,10 @@ export type TCamundaConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Camunda;
 };
 
+export type TAuth0ConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Auth0;
+};
+
 export type TAppConnectionOption =
   | TAwsConnectionOption
   | TGitHubConnectionOption
@@ -71,7 +75,8 @@ export type TAppConnectionOption =
   | TVercelConnectionOption
   | TPostgresConnectionOption
   | TMsSqlConnectionOption
-  | TCamundaConnectionOption;
+  | TCamundaConnectionOption
+  | TAuth0ConnectionOption;
 
 export type TAppConnectionOptionMap = {
   [AppConnection.AWS]: TAwsConnectionOption;
@@ -86,4 +91,5 @@ export type TAppConnectionOptionMap = {
   [AppConnection.Postgres]: TPostgresConnectionOption;
   [AppConnection.MsSql]: TMsSqlConnectionOption;
   [AppConnection.Camunda]: TCamundaConnectionOption;
+  [AppConnection.Auth0]: TAuth0ConnectionOption;
 };

frontend/src/hooks/api/appConnections/types/auth0-connection.ts

@@ -0,0 +1,17 @@
+import { AppConnection } from "../enums";
+import { TRootAppConnection } from "./root-connection";
+
+export enum Auth0ConnectionMethod {
+  ClientCredentials = "client-credentials"
+}
+
+export type TAuth0Connection = TRootAppConnection & {
+  app: AppConnection.Auth0;
+} & {
+  method: Auth0ConnectionMethod.ClientCredentials;
+  credentials: {
+    domain: string;
+    clientId: string;
+    audience: string;
+  };
+};

frontend/src/hooks/api/appConnections/types/index.ts

@@ -1,5 +1,6 @@
 import { AppConnection } from "../enums";
 import { TAppConnectionOption } from "./app-options";
+import { TAuth0Connection } from "./auth0-connection";
 import { TAwsConnection } from "./aws-connection";
 import { TAzureAppConfigurationConnection } from "./azure-app-configuration-connection";
 import { TAzureKeyVaultConnection } from "./azure-key-vault-connection";
@@ -13,6 +14,7 @@ import { TPostgresConnection } from "./postgres-connection";
 import { TTerraformCloudConnection } from "./terraform-cloud-connection";
 import { TVercelConnection } from "./vercel-connection";
 
+export * from "./auth0-connection";
 export * from "./aws-connection";
 export * from "./azure-app-configuration-connection";
 export * from "./azure-key-vault-connection";
@@ -38,7 +40,8 @@ export type TAppConnection =
   | TVercelConnection
   | TPostgresConnection
   | TMsSqlConnection
-  | TCamundaConnection;
+  | TCamundaConnection
+  | TAuth0Connection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id">;
 
@@ -78,4 +81,5 @@ export type TAppConnectionMap = {
   [AppConnection.Postgres]: TPostgresConnection;
   [AppConnection.MsSql]: TMsSqlConnection;
   [AppConnection.Camunda]: TCamundaConnection;
+  [AppConnection.Auth0]: TAuth0Connection;
 };

frontend/src/hooks/api/secretRotationsV2/enums.ts

@@ -1,6 +1,7 @@
 export enum SecretRotation {
   PostgresCredentials = "postgres-credentials",
-  MsSqlCredentials = "mssql-credentials"
+  MsSqlCredentials = "mssql-credentials",
+  Auth0ClientSecret = "auth0-client-secret"
 }
 
 export enum SecretRotationStatus {

frontend/src/hooks/api/secretRotationsV2/queries.tsx

@@ -1,9 +1,12 @@
+import { useMemo } from "react";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2/enums";
 import {
   TListSecretRotationV2Options,
+  TSecretRotationGeneratedCredentialsResponseMap,
+  TSecretRotationOptionMap,
   TSecretRotationV2Option,
   TViewSecretRotationGeneratedCredentialsResponse,
   TViewSecretRotationV2GeneratedCredentialsDTO
@@ -40,15 +43,21 @@ export const useSecretRotationV2Options = (
   });
 };
 
-export const useSecretRotationV2Option = (type: SecretRotation) => {
+export const useSecretRotationV2Option = <T extends SecretRotation>(type: T) => {
   const { data: rotationOptions, isPending } = useSecretRotationV2Options();
-  const rotationOption = rotationOptions?.find((option) => option.type === type);
-
-  return { rotationOption, isPending };
+  return useMemo(
+    () => ({
+      rotationOption:
+        (rotationOptions?.find((opt) => opt.type === type) as TSecretRotationOptionMap[T]) ??
+        undefined,
+      isLoading: isPending
+    }),
+    [rotationOptions, type, isPending]
+  );
 };
 
-export const useViewSecretRotationV2GeneratedCredentials = (
-  { rotationId, type }: TViewSecretRotationV2GeneratedCredentialsDTO,
+export const useViewSecretRotationV2GeneratedCredentials = <T extends SecretRotation>(
+  { rotationId, type }: { rotationId: string; type: T },
   options?: Omit<
     UseQueryOptions<
       TViewSecretRotationGeneratedCredentialsResponse,
@@ -66,7 +75,7 @@ export const useViewSecretRotationV2GeneratedCredentials = (
         `/api/v2/secret-rotations/${type}/${rotationId}/generated-credentials`
       );
 
-      return data;
+      return data as TSecretRotationGeneratedCredentialsResponseMap[T];
     },
     ...options
   });

frontend/src/hooks/api/secretRotationsV2/types/auth0-client-secret-rotation.ts

@@ -0,0 +1,37 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import {
+  TSecretRotationV2Base,
+  TSecretRotationV2GeneratedCredentialsResponseBase
+} from "@app/hooks/api/secretRotationsV2/types/shared";
+
+export type TAuth0ClientSecretRotation = TSecretRotationV2Base & {
+  type: SecretRotation.Auth0ClientSecret;
+  parameters: {
+    clientId: string;
+  };
+  secretsMapping: {
+    clientId: string;
+    clientSecret: string;
+  };
+};
+
+export type TAuth0ClientSecretRotationGeneratedCredentials = {
+  clientId: string;
+  clientSecret: string;
+};
+
+export type TAuth0ClientSecretRotationGeneratedCredentialsResponse =
+  TSecretRotationV2GeneratedCredentialsResponseBase<
+    SecretRotation.Auth0ClientSecret,
+    TAuth0ClientSecretRotationGeneratedCredentials
+  >;
+
+export type TAuth0ClientSecretRotationOption = {
+  name: string;
+  type: SecretRotation.Auth0ClientSecret;
+  connection: AppConnection.Auth0;
+  template: {
+    secretsMapping: TAuth0ClientSecretRotation["secretsMapping"];
+  };
+};

frontend/src/hooks/api/secretRotationsV2/types/index.ts

@@ -1,5 +1,9 @@
-import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import {
+  TAuth0ClientSecretRotation,
+  TAuth0ClientSecretRotationGeneratedCredentialsResponse,
+  TAuth0ClientSecretRotationOption
+} from "@app/hooks/api/secretRotationsV2/types/auth0-client-secret-rotation";
 import {
   TMsSqlCredentialsRotation,
   TMsSqlCredentialsRotationGeneratedCredentialsResponse
@@ -8,20 +12,21 @@ import {
   TPostgresCredentialsRotation,
   TPostgresCredentialsRotationGeneratedCredentialsResponse
 } from "@app/hooks/api/secretRotationsV2/types/postgres-credentials-rotation";
-import { TSqlOptionTemplate } from "@app/hooks/api/secretRotationsV2/types/shared";
+import { TSqlCredentialsRotationOption } from "@app/hooks/api/secretRotationsV2/types/shared";
 import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 import { DiscriminativePick } from "@app/types";
 
-export type TSecretRotationV2 = (TPostgresCredentialsRotation | TMsSqlCredentialsRotation) & {
+export type TSecretRotationV2 = (
+  | TPostgresCredentialsRotation
+  | TMsSqlCredentialsRotation
+  | TAuth0ClientSecretRotation
+) & {
   secrets: (SecretV3RawSanitized | null)[];
 };
 
-export type TSecretRotationV2Option = {
-  name: string;
-  type: SecretRotation;
-  connection: AppConnection;
-  template: TSqlOptionTemplate;
-};
+export type TSecretRotationV2Option =
+  | TSqlCredentialsRotationOption
+  | TAuth0ClientSecretRotationOption;
 
 export type TListSecretRotationV2Options = { secretRotationOptions: TSecretRotationV2Option[] };
 
@@ -29,7 +34,8 @@ export type TSecretRotationV2Response = { secretRotation: TSecretRotationV2 };
 
 export type TViewSecretRotationGeneratedCredentialsResponse =
   | TPostgresCredentialsRotationGeneratedCredentialsResponse
-  | TMsSqlCredentialsRotationGeneratedCredentialsResponse;
+  | TMsSqlCredentialsRotationGeneratedCredentialsResponse
+  | TAuth0ClientSecretRotationGeneratedCredentialsResponse;
 
 export type TCreateSecretRotationV2DTO = DiscriminativePick<
   TSecretRotationV2,
@@ -71,3 +77,15 @@ export type TViewSecretRotationV2GeneratedCredentialsDTO = {
   rotationId: string;
   type: SecretRotation;
 };
+
+export type TSecretRotationOptionMap = {
+  [SecretRotation.PostgresCredentials]: TSqlCredentialsRotationOption;
+  [SecretRotation.MsSqlCredentials]: TSqlCredentialsRotationOption;
+  [SecretRotation.Auth0ClientSecret]: TAuth0ClientSecretRotationOption;
+};
+
+export type TSecretRotationGeneratedCredentialsResponseMap = {
+  [SecretRotation.PostgresCredentials]: TPostgresCredentialsRotationGeneratedCredentialsResponse;
+  [SecretRotation.MsSqlCredentials]: TMsSqlCredentialsRotationGeneratedCredentialsResponse;
+  [SecretRotation.Auth0ClientSecret]: TAuth0ClientSecretRotationGeneratedCredentialsResponse;
+};

frontend/src/hooks/api/secretRotationsV2/types/shared/sql-credentials-rotation.ts

@@ -1,3 +1,6 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
 export type TSqlCredentialsRotationProperties = {
   parameters: {
     username1: string;
@@ -9,9 +12,14 @@ export type TSqlCredentialsRotationProperties = {
   };
 };
 
-export type TSqlOptionTemplate = {
-  secretsMapping: TSqlCredentialsRotationProperties["secretsMapping"];
-  createUserStatement: string;
+export type TSqlCredentialsRotationOption = {
+  name: string;
+  type: SecretRotation.PostgresCredentials | SecretRotation.MsSqlCredentials;
+  connection: AppConnection.Postgres | AppConnection.MsSql;
+  template: {
+    secretsMapping: TSqlCredentialsRotationProperties["secretsMapping"];
+    createUserStatement: string;
+  };
 };
 
 export type TSqlCredentialsRotationGeneratedCredentials = {

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -9,6 +9,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { DiscriminativePick } from "@app/types";
 
 import { AppConnectionHeader } from "../AppConnectionHeader";
+import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
 import { AwsConnectionForm } from "./AwsConnectionForm";
 import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
 import { AzureKeyVaultConnectionForm } from "./AzureKeyVaultConnectionForm";
@@ -83,6 +84,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <MsSqlConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Camunda:
       return <CamundaConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Auth0:
+      return <Auth0ConnectionForm onSubmit={onSubmit} />;
     default:
       throw new Error(`Unhandled App ${app}`);
   }
@@ -143,6 +146,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <MsSqlConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Camunda:
       return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Auth0:
+      return <Auth0ConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     default:
       throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
   }

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/Auth0ConnectionForm.tsx

@@ -0,0 +1,179 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { Auth0ConnectionMethod, TAuth0Connection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TAuth0Connection;
+  onSubmit: (formData: FormData) => Promise<void>;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Auth0)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(Auth0ConnectionMethod.ClientCredentials),
+    credentials: z.object({
+      domain: z.string().trim().min(1, "Domain required"),
+      clientId: z.string().trim().min(1, "Client ID required"),
+      clientSecret: z.string().trim().min(1, "Client Secret required"),
+      audience: z.string().url().trim().min(1, "Audience required")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const Auth0ConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Auth0,
+      method: Auth0ConnectionMethod.ClientCredentials
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.Auth0].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(Auth0ConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.domain"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Domain"
+            >
+              <Input {...field} placeholder="xxxxxxxxxxxx.xx.auth0.com" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.clientId"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Client ID"
+            >
+              <Input {...field} placeholder="djfh67bpCZAw7HBCPoNml3CcYEUrU0os" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.clientSecret"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Client Secret"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.audience"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Audience"
+              tooltipText="The unique identifier of the target API you want to access."
+            >
+              <Input {...field} placeholder="Your API identifier" />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Auth0"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx

@@ -24,27 +24,30 @@ export const AppConnectionsSelect = ({ onSelect }: Props) => {
 
   return (
     <div className="grid grid-cols-4 gap-2">
-      {appConnectionOptions?.map((option) => (
-        <button
-          type="button"
-          key={option.app}
-          onClick={() => onSelect(option.app)}
-          className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
-        >
-          <img
-            src={`/images/integrations/${APP_CONNECTION_MAP[option.app].image}`}
-            style={{
-              height: "50px",
-              width: "50px"
-            }}
-            className="mt-auto"
-            alt={`${APP_CONNECTION_MAP[option.app].name} logo`}
-          />
-          <div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
-            {APP_CONNECTION_MAP[option.app].name}
-          </div>
-        </button>
-      ))}
+      {appConnectionOptions?.map((option) => {
+        const { image, name, size = 50 } = APP_CONNECTION_MAP[option.app];
+
+        return (
+          <button
+            type="button"
+            key={option.app}
+            onClick={() => onSelect(option.app)}
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+          >
+            <img
+              src={`/images/integrations/${image}`}
+              style={{
+                width: `${size}px`
+              }}
+              className="mt-auto"
+              alt={`${name} logo`}
+            />
+            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              {name}
+            </div>
+          </button>
+        );
+      })}
       <Tooltip
         side="bottom"
         className="max-w-sm py-4"

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionRow.tsx

@@ -75,7 +75,7 @@ export const AppConnectionRow = ({
           <img
             alt={`${APP_CONNECTION_MAP[app].name} integration`}
             src={`/images/integrations/${APP_CONNECTION_MAP[app].image}`}
-            className="mr-0.5 h-5 w-5"
+            className="mr-0.5 w-5"
           />
           <span className="hidden lg:inline">{APP_CONNECTION_MAP[app].name}</span>
         </div>