deconflict merge

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/components/v2/PasswordGenerator/PasswordGenerator.tsx

@@ -112,9 +112,8 @@ const PasswordGeneratorModal = ({
         className="w-full max-w-lg rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-xl"
       >
         <div className="p-6">
-          <h2 className="mb-1 text-xl font-semibold text-bunker-200">Password Generator</h2>
-          <p className="mb-6 text-sm text-bunker-400">Generate strong unique passwords</p>
-
+          <h2 className="mb-1 text-xl font-semibold text-bunker-200">Generate Random Value</h2>
+          <p className="mb-6 text-sm text-bunker-400">Generate strong unique values</p>
           <div className="relative mb-4 rounded-md bg-mineshaft-900 p-4">
             <div className="flex items-center justify-between">
               <div className="w-4/5 select-all break-all pr-2 font-mono text-lg">{password}</div>
@@ -146,18 +145,18 @@ const PasswordGeneratorModal = ({
 
           <div className="mb-6">
             <div className="mb-1 flex items-center justify-between">
-              <label htmlFor="password-length" className="text-sm text-bunker-300">
-                Password length: {passwordOptions.length}
+              <label htmlFor="value-length" className="text-sm text-bunker-300">
+                Length: {passwordOptions.length}
               </label>
             </div>
             <Slider
-              id="password-length"
+              id="value-length"
               min={minLength}
               max={maxLength}
               value={passwordOptions.length}
               onChange={(value) => setPasswordOptions({ ...passwordOptions, length: value })}
               className="mb-1"
-              aria-labelledby="password-length-label"
+              aria-labelledby="value-length-label"
             />
           </div>
 
@@ -219,7 +218,7 @@ const PasswordGeneratorModal = ({
                 onClick={usePassword}
                 className="ml-2"
               >
-                Use Password
+                Use Value
               </Button>
             )}
           </div>
@@ -251,12 +250,13 @@ export const PasswordGenerator = ({
   return (
     <>
       <IconButton
-        ariaLabel="generate password"
-        colorSchema="secondary"
+        ariaLabel="generate value"
+        colorSchema="primary"
+        variant="outline_bg"
         size="sm"
         onClick={toggleGenerator}
         isDisabled={isDisabled}
-        className="rounded text-bunker-400 transition-colors duration-150 hover:bg-mineshaft-700 hover:text-bunker-200"
+        className="rounded"
       >
         <FontAwesomeIcon icon={faKey} />
       </IconButton>