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>

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,
@@ -19,7 +20,10 @@ import {
   WindmillConnectionMethod
 } 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]: {
@@ -38,7 +42,8 @@ export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: st
   [AppConnection.Postgres]: { name: "PostgreSQL", image: "Postgres.png" },
   [AppConnection.MsSql]: { name: "Microsoft SQL Server", image: "MsSql.png" },
   [AppConnection.Camunda]: { name: "Camunda", image: "Camunda.png" },
-  [AppConnection.Windmill]: { name: "Windmill", image: "Windmill.png" }
+  [AppConnection.Windmill]: { name: "Windmill", image: "Windmill.png" },
+  [AppConnection.Auth0]: { name: "Auth0", image: "Auth0.png", size: 40 }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
@@ -68,6 +73,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
       return { name: "Username & Password", icon: faLock };
     case WindmillConnectionMethod.AccessToken:
       return { name: "Access Token", icon: faKey };
+    case Auth0ConnectionMethod.ClientCredentials:
+      return { name: "Client Credentials", icon: faServer };
     default:
       throw new Error(`Unhandled App Connection Method: ${method}`);
   }

frontend/src/helpers/roles.ts

@@ -1,6 +1,6 @@
 import { ProjectMembershipRole, TOrgRole } from "@app/hooks/api/roles/types";
 
-enum OrgMembershipRole {
+export enum OrgMembershipRole {
   Admin = "admin",
   Member = "member",
   NoAccess = "no-access"

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

@@ -11,5 +11,6 @@ export enum AppConnection {
   Postgres = "postgres",
   MsSql = "mssql",
   Camunda = "camunda",
-  Windmill = "windmill"
+  Windmill = "windmill",
+  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

@@ -63,6 +63,10 @@ export type TWindmillConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Windmill;
 };
 
+export type TAuth0ConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Auth0;
+};
+
 export type TAppConnectionOption =
   | TAwsConnectionOption
   | TGitHubConnectionOption
@@ -76,7 +80,8 @@ export type TAppConnectionOption =
   | TPostgresConnectionOption
   | TMsSqlConnectionOption
   | TCamundaConnectionOption
-  | TWindmillConnectionOption;
+  | TWindmillConnectionOption
+  | TAuth0ConnectionOption;
 
 export type TAppConnectionOptionMap = {
   [AppConnection.AWS]: TAwsConnectionOption;
@@ -92,4 +97,5 @@ export type TAppConnectionOptionMap = {
   [AppConnection.MsSql]: TMsSqlConnectionOption;
   [AppConnection.Camunda]: TCamundaConnectionOption;
   [AppConnection.Windmill]: TWindmillConnectionOption;
+  [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";
@@ -14,6 +15,7 @@ import { TTerraformCloudConnection } from "./terraform-cloud-connection";
 import { TVercelConnection } from "./vercel-connection";
 import { TWindmillConnection } from "./windmill-connection";
 
+export * from "./auth0-connection";
 export * from "./aws-connection";
 export * from "./azure-app-configuration-connection";
 export * from "./azure-key-vault-connection";
@@ -41,7 +43,8 @@ export type TAppConnection =
   | TPostgresConnection
   | TMsSqlConnection
   | TCamundaConnection
-  | TWindmillConnection;
+  | TWindmillConnection
+  | TAuth0Connection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id">;
 
@@ -82,4 +85,5 @@ export type TAppConnectionMap = {
   [AppConnection.MsSql]: TMsSqlConnection;
   [AppConnection.Camunda]: TCamundaConnection;
   [AppConnection.Windmill]: TWindmillConnection;
+  [AppConnection.Auth0]: TAuth0Connection;
 };

frontend/src/hooks/api/oidcConfig/mutations.tsx

@@ -4,6 +4,7 @@ import { apiRequest } from "@app/config/request";
 
 import { organizationKeys } from "../organization/queries";
 import { oidcConfigKeys } from "./queries";
+import { OIDCJWTSignatureAlgorithm } from "./types";
 
 export const useUpdateOIDCConfig = () => {
   const queryClient = useQueryClient();
@@ -21,7 +22,8 @@ export const useUpdateOIDCConfig = () => {
       clientSecret,
       isActive,
       orgSlug,
-      manageGroupMemberships
+      manageGroupMemberships,
+      jwtSignatureAlgorithm
     }: {
       allowedEmailDomains?: string;
       issuer?: string;
@@ -36,6 +38,7 @@ export const useUpdateOIDCConfig = () => {
       configurationType?: string;
       orgSlug: string;
       manageGroupMemberships?: boolean;
+      jwtSignatureAlgorithm?: OIDCJWTSignatureAlgorithm;
     }) => {
       const { data } = await apiRequest.patch("/api/v1/sso/oidc/config", {
         issuer,
@@ -50,7 +53,8 @@ export const useUpdateOIDCConfig = () => {
         orgSlug,
         clientSecret,
         isActive,
-        manageGroupMemberships
+        manageGroupMemberships,
+        jwtSignatureAlgorithm
       });
 
       return data;
@@ -78,7 +82,8 @@ export const useCreateOIDCConfig = () => {
       clientSecret,
       isActive,
       orgSlug,
-      manageGroupMemberships
+      manageGroupMemberships,
+      jwtSignatureAlgorithm
     }: {
       issuer?: string;
       configurationType: string;
@@ -93,6 +98,7 @@ export const useCreateOIDCConfig = () => {
       orgSlug: string;
       allowedEmailDomains?: string;
       manageGroupMemberships?: boolean;
+      jwtSignatureAlgorithm?: OIDCJWTSignatureAlgorithm;
     }) => {
       const { data } = await apiRequest.post("/api/v1/sso/oidc/config", {
         issuer,
@@ -107,7 +113,8 @@ export const useCreateOIDCConfig = () => {
         clientSecret,
         isActive,
         orgSlug,
-        manageGroupMemberships
+        manageGroupMemberships,
+        jwtSignatureAlgorithm
       });
 
       return data;

frontend/src/hooks/api/oidcConfig/types.ts

@@ -13,4 +13,11 @@ export type OIDCConfigData = {
   clientSecret: string;
   allowedEmailDomains?: string;
   manageGroupMemberships: boolean;
+  jwtSignatureAlgorithm: OIDCJWTSignatureAlgorithm;
 };
+
+export enum OIDCJWTSignatureAlgorithm {
+  RS256 = "RS256",
+  HS256 = "HS256",
+  RS512 = "RS512"
+}

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

@@ -110,7 +110,8 @@ export const useUpdateOrg = () => {
       defaultMembershipRoleSlug,
       enforceMfa,
       selectedMfaMethod,
-      allowSecretSharingOutsideOrganization
+      allowSecretSharingOutsideOrganization,
+      bypassOrgAuthEnabled
     }) => {
       return apiRequest.patch(`/api/v1/organization/${orgId}`, {
         name,
@@ -120,7 +121,8 @@ export const useUpdateOrg = () => {
         defaultMembershipRoleSlug,
         enforceMfa,
         selectedMfaMethod,
-        allowSecretSharingOutsideOrganization
+        allowSecretSharingOutsideOrganization,
+        bypassOrgAuthEnabled
       });
     },
     onSuccess: () => {

frontend/src/hooks/api/organization/types.ts

@@ -9,6 +9,7 @@ export type Organization = {
   createAt: string;
   updatedAt: string;
   authEnforced: boolean;
+  bypassOrgAuthEnabled: boolean;
   orgAuthMethod: string;
   scimEnabled: boolean;
   slug: string;
@@ -17,6 +18,7 @@ export type Organization = {
   selectedMfaMethod?: MfaMethod;
   shouldUseNewPrivilegeSystem: boolean;
   allowSecretSharingOutsideOrganization?: boolean;
+  userRole: string;
 };
 
 export type UpdateOrgDTO = {
@@ -29,6 +31,7 @@ export type UpdateOrgDTO = {
   enforceMfa?: boolean;
   selectedMfaMethod?: MfaMethod;
   allowSecretSharingOutsideOrganization?: boolean;
+  bypassOrgAuthEnabled?: boolean;
 };
 
 export type BillingDetails = {

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/hooks/api/workspace/queries.tsx

@@ -33,6 +33,7 @@ import {
   TGetUpgradeProjectStatusDTO,
   TListProjectIdentitiesDTO,
   ToggleAutoCapitalizationDTO,
+  ToggleDeleteProjectProtectionDTO,
   TSearchProjectsDTO,
   TUpdateWorkspaceIdentityRoleDTO,
   TUpdateWorkspaceUserRoleDTO,
@@ -306,6 +307,25 @@ export const useToggleAutoCapitalization = () => {
   });
 };
 
+export const useToggleDeleteProjectProtection = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<Workspace, object, ToggleDeleteProjectProtectionDTO>({
+    mutationFn: async ({ workspaceID, state }) => {
+      const { data } = await apiRequest.post<{ workspace: Workspace }>(
+        `/api/v1/workspace/${workspaceID}/delete-protection`,
+        {
+          hasDeleteProtection: state
+        }
+      );
+      return data.workspace;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
+    }
+  });
+};
+
 export const useUpdateWorkspaceVersionLimit = () => {
   const queryClient = useQueryClient();
 
@@ -316,8 +336,8 @@ export const useUpdateWorkspaceVersionLimit = () => {
       });
       return data.workspace;
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
+    onSuccess: (dto) => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.getAllUserWorkspace(dto.type) });
     }
   });
 };

frontend/src/hooks/api/workspace/types.ts

@@ -36,6 +36,7 @@ export type Workspace = {
   slug: string;
   createdAt: string;
   roles?: TProjectRole[];
+  hasDeleteProtection: boolean;
 };
 
 export type WorkspaceEnv = {
@@ -80,6 +81,7 @@ export type UpdateProjectDTO = {
 export type UpdatePitVersionLimitDTO = { projectSlug: string; pitVersionLimit: number };
 export type UpdateAuditLogsRetentionDTO = { projectSlug: string; auditLogsRetentionDays: number };
 export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };
+export type ToggleDeleteProjectProtectionDTO = { workspaceID: string; state: boolean };
 
 export type DeleteWorkspaceDTO = { workspaceID: string };
 

frontend/src/pages/auth/AdminLoginPage/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { LoginPage } from "../LoginPage/LoginPage";
+
+export const Route = createFileRoute("/_restrict-login-signup/login/admin")({
+  component: () => <LoginPage isAdmin />
+});

frontend/src/pages/auth/LoginPage/Login.utils.tsx

@@ -33,14 +33,21 @@ export const useNavigateToSelectOrganization = () => {
   const { config } = useServerConfig();
   const navigate = useNavigate();
 
-  const navigateToSelectOrganization = async (cliCallbackPort?: string) => {
+  const navigateToSelectOrganization = async (
+    cliCallbackPort?: string,
+    isFromAdminLogin?: boolean
+  ) => {
     if (!config.defaultAuthOrgId) {
       queryClient.invalidateQueries({ queryKey: userKeys.getUser });
     }
 
     navigate({
       to: "/login/select-organization",
-      search: { callback_port: cliCallbackPort, org_id: config.defaultAuthOrgId }
+      search: {
+        callback_port: cliCallbackPort,
+        org_id: config.defaultAuthOrgId,
+        is_admin_login: isFromAdminLogin
+      }
     });
   };
 

frontend/src/pages/auth/LoginPage/LoginPage.tsx

@@ -8,7 +8,7 @@ import { isLoggedIn } from "@app/hooks/api/reactQuery";
 import { InitialStep, SSOStep } from "./components";
 import { useNavigateToSelectOrganization } from "./Login.utils";
 
-export const LoginPage = () => {
+export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
   const { t } = useTranslation();
   const [step, setStep] = useState(0);
   const [email, setEmail] = useState("");
@@ -44,6 +44,7 @@ export const LoginPage = () => {
       case 0:
         return (
           <InitialStep
+            isAdmin={isAdmin}
             setStep={setStep}
             email={email}
             setEmail={setEmail}

frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx

@@ -26,9 +26,17 @@ type Props = {
   setEmail: (email: string) => void;
   password: string;
   setPassword: (email: string) => void;
+  isAdmin?: boolean;
 };
 
-export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
+export const InitialStep = ({
+  setStep,
+  email,
+  setEmail,
+  password,
+  setPassword,
+  isAdmin
+}: Props) => {
   const navigate = useNavigate();
 
   const { t } = useTranslation();
@@ -62,7 +70,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   };
 
   useEffect(() => {
-    if (serverDetails?.samlDefaultOrgSlug) redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    if (serverDetails?.samlDefaultOrgSlug && !isAdmin) {
+      redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    }
   }, [serverDetails?.samlDefaultOrgSlug]);
 
   const handleSaml = () => {
@@ -82,7 +92,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   };
 
   const shouldDisplayLoginMethod = (method: LoginMethod) =>
-    !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
+    isAdmin || !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -120,7 +130,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
 
         if (isLoginSuccessful && isLoginSuccessful.success) {
           // case: login was successful
-          navigateToSelectOrganization();
+          navigateToSelectOrganization(undefined, isAdmin);
           createNotification({
             text: "Successfully logged in",
             type: "success"
@@ -160,7 +170,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
     setIsLoading(false);
   };
 
-  if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod) {
+  if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod && !isAdmin) {
     return (
       <form
         onSubmit={handleLogin}

frontend/src/pages/auth/SelectOrgPage/SelectOrgPage.tsx

@@ -14,6 +14,7 @@ import { IsCliLoginSuccessful } from "@app/components/utilities/attemptCliLogin"
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { Button, Spinner } from "@app/components/v2";
 import { SessionStorageKeys } from "@app/const";
+import { OrgMembershipRole } from "@app/helpers/roles";
 import { useToggle } from "@app/hooks";
 import {
   useGetOrganizations,
@@ -53,6 +54,7 @@ export const SelectOrganizationPage = () => {
   const queryParams = new URLSearchParams(window.location.search);
   const orgId = queryParams.get("org_id");
   const callbackPort = queryParams.get("callback_port");
+  const isAdminLogin = queryParams.get("is_admin_login") === "true";
   const defaultSelectedOrg = organizations.data?.find((org) => org.id === orgId);
 
   const logout = useLogoutUser(true);
@@ -68,7 +70,12 @@ export const SelectOrganizationPage = () => {
 
   const handleSelectOrganization = useCallback(
     async (organization: Organization) => {
-      if (organization.authEnforced) {
+      const canBypassOrgAuth =
+        organization.bypassOrgAuthEnabled &&
+        organization.userRole === OrgMembershipRole.Admin &&
+        isAdminLogin;
+
+      if (organization.authEnforced && !canBypassOrgAuth) {
         // org has an org-level auth method enabled (e.g. SAML)
         // -> logout + redirect to SAML SSO
         await logout.mutateAsync();

frontend/src/pages/auth/SelectOrgPage/route.tsx

@@ -6,13 +6,16 @@ import { SelectOrganizationPage } from "./SelectOrgPage";
 
 export const SelectOrganizationPageQueryParams = z.object({
   org_id: z.string().optional().catch(""),
-  callback_port: z.coerce.number().optional().catch(undefined)
+  callback_port: z.coerce.number().optional().catch(undefined),
+  is_admin_login: z.boolean().optional().catch(false)
 });
 
 export const Route = createFileRoute("/_restrict-login-signup/login/select-organization")({
   component: SelectOrganizationPage,
   validateSearch: zodValidator(SelectOrganizationPageQueryParams),
   search: {
-    middlewares: [stripSearchParams({ org_id: "", callback_port: undefined })]
+    middlewares: [
+      stripSearchParams({ org_id: "", callback_port: undefined, is_admin_login: false })
+    ]
   }
 });

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";
@@ -86,6 +87,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <CamundaConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Windmill:
       return <WindmillConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Auth0:
+      return <Auth0ConnectionForm onSubmit={onSubmit} />;
     default:
       throw new Error(`Unhandled App ${app}`);
   }
@@ -148,6 +151,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Windmill:
       return <WindmillConnectionForm 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>

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OIDCModal.tsx

@@ -18,6 +18,7 @@ import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetOIDCConfig } from "@app/hooks/api";
 import { useCreateOIDCConfig, useUpdateOIDCConfig } from "@app/hooks/api/oidcConfig/mutations";
+import { OIDCJWTSignatureAlgorithm } from "@app/hooks/api/oidcConfig/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 enum ConfigurationType {
@@ -43,7 +44,8 @@ const schema = z
     userinfoEndpoint: z.string().optional(),
     clientId: z.string().min(1),
     clientSecret: z.string().min(1),
-    allowedEmailDomains: z.string().optional()
+    allowedEmailDomains: z.string().optional(),
+    jwtSignatureAlgorithm: z.nativeEnum(OIDCJWTSignatureAlgorithm).optional()
   })
   .superRefine((data, ctx) => {
     if (data.configurationType === ConfigurationType.CUSTOM) {
@@ -159,6 +161,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
       setValue("clientSecret", data.clientSecret);
       setValue("allowedEmailDomains", data.allowedEmailDomains);
       setValue("configurationType", data.configurationType);
+      setValue("jwtSignatureAlgorithm", data.jwtSignatureAlgorithm);
     }
   }, [data]);
 
@@ -172,7 +175,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
     configurationType,
     discoveryURL,
     clientId,
-    clientSecret
+    clientSecret,
+    jwtSignatureAlgorithm
   }: OIDCFormData) => {
     try {
       if (!currentOrg) {
@@ -192,7 +196,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
           clientId,
           clientSecret,
           isActive: true,
-          orgSlug: currentOrg.slug
+          orgSlug: currentOrg.slug,
+          jwtSignatureAlgorithm
         });
       } else {
         await updateMutateAsync({
@@ -207,7 +212,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
           clientId,
           clientSecret,
           isActive: true,
-          orgSlug: currentOrg.slug
+          orgSlug: currentOrg.slug,
+          jwtSignatureAlgorithm
         });
       }
 
@@ -362,6 +368,29 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
                 />
               </>
             )}
+            <Controller
+              control={control}
+              defaultValue={OIDCJWTSignatureAlgorithm.RS256}
+              name="jwtSignatureAlgorithm"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  className="w-full"
+                  label="JWT Signature Algorithm"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.RS256}>RS256</SelectItem>
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.RS512}>RS512</SelectItem>
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.HS256}>HS256</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
             <Controller
               control={control}
               name="allowedEmailDomains"

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx

@@ -1,7 +1,10 @@
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Switch } from "@app/components/v2";
+import { Switch, Tooltip } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -52,6 +55,28 @@ export const OrgGeneralAuthSection = () => {
     }
   };
 
+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return (
     <>
       {/* <div className="py-4">
@@ -72,7 +97,9 @@ export const OrgGeneralAuthSection = () => {
             </div> */}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce SAML SSO</span>
+          </div>
           <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
             {(isAllowed) => (
               <Switch
@@ -85,9 +112,62 @@ export const OrgGeneralAuthSection = () => {
           </OrgPermissionCan>
         </div>
         <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via SAML to access this organization
+          Enforce users to authenticate via SAML to access this organization
         </p>
       </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass SAML enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx

@@ -82,6 +82,28 @@ export const OrgOIDCSection = (): JSX.Element => {
     }
   };
 
+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.oidcSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await updateOrg({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   const handleOIDCGroupManagement = async (value: boolean) => {
     try {
       if (!currentOrg?.id) return;
@@ -158,7 +180,9 @@ export const OrgOIDCSection = (): JSX.Element => {
       )}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce OIDC SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce OIDC SSO</span>
+          </div>
           <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
             {(isAllowed) => (
               <Switch
@@ -171,9 +195,62 @@ export const OrgOIDCSection = (): JSX.Element => {
           </OrgPermissionCan>
         </div>
         <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via OIDC to access this organization
+          <span>Enforce users to authenticate via OIDC to access this organization.</span>
         </p>
       </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass OIDC enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
           <div className="text-md flex items-center text-mineshaft-100">

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/SSOModal.tsx

@@ -20,6 +20,8 @@ import { useToggle } from "@app/hooks";
 import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { SSOModalHeader } from "./SSOModalHeader";
+
 enum AuthProvider {
   OKTA_SAML = "okta-saml",
   AZURE_SAML = "azure-saml",
@@ -30,12 +32,32 @@ enum AuthProvider {
 }
 
 const ssoAuthProviders = [
-  { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
-  { label: "Azure / Entra SAML", value: AuthProvider.AZURE_SAML },
-  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML },
-  { label: "Keycloak SAML", value: AuthProvider.KEYCLOAK_SAML },
-  { label: "Google SAML", value: AuthProvider.GOOGLE_SAML },
-  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML }
+  { label: "Okta SAML", value: AuthProvider.OKTA_SAML, image: "Okta.png", docsUrl: "okta" },
+  {
+    label: "Azure / Entra SAML",
+    value: AuthProvider.AZURE_SAML,
+    image: "Microsoft Azure.png",
+    docsUrl: "azure"
+  },
+  {
+    label: "JumpCloud SAML",
+    value: AuthProvider.JUMPCLOUD_SAML,
+    image: "JumpCloud.png",
+    docsUrl: "jumpcloud"
+  },
+  {
+    label: "Keycloak SAML",
+    value: AuthProvider.KEYCLOAK_SAML,
+    image: "Keycloak.png",
+    docsUrl: "keycloak-saml"
+  },
+  {
+    label: "Google SAML",
+    value: AuthProvider.GOOGLE_SAML,
+    image: "Google.png",
+    docsUrl: "google-saml"
+  },
+  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML, image: "Auth0.png", docsUrl: "auth0-saml" }
 ];
 
 const schema = z
@@ -231,6 +253,10 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
         }}
       >
         <ModalContent title="Manage SAML configuration">
+          <SSOModalHeader
+            providerDetails={ssoAuthProviders.find((provider) => provider.value === authProvider)!}
+            isConnected={Boolean(data)}
+          />
           <form onSubmit={handleSubmit(onSSOModalSubmit)}>
             <Controller
               control={control}

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/SSOModalHeader.tsx

@@ -0,0 +1,53 @@
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type ProviderDetails = {
+  label: string;
+  image: string;
+  value: string;
+  docsUrl: string;
+};
+
+type Props = {
+  providerDetails: ProviderDetails;
+  isConnected: boolean;
+};
+
+const docsBaseUrl = "https://infisical.com/docs/documentation/platform/sso";
+
+export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
+  return (
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+      <img
+        alt={`${providerDetails.label} logo`}
+        src={`/images/sso/${providerDetails.image}`}
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+      />
+      <div>
+        <div className="flex items-center text-mineshaft-300">
+          {providerDetails.label}
+          <a
+            href={`${docsBaseUrl}/${providerDetails.docsUrl}`}
+            target="_blank"
+            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>
+        <p className="text-sm leading-4 text-mineshaft-400">
+          {isConnected
+            ? `${providerDetails.label} Connection`
+            : `Connect to ${providerDetails.label}`}
+        </p>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectProtection/DeleteProjectProtection.tsx

@@ -0,0 +1,57 @@
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Checkbox } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useToggleDeleteProjectProtection } from "@app/hooks/api/workspace/queries";
+
+export const DeleteProjectProtection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync } = useToggleDeleteProjectProtection();
+
+  const handleToggleDeleteProjectProtection = async (state: boolean) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        workspaceID: currentWorkspace.id,
+        state
+      });
+
+      const text = `Successfully ${state ? "enabled" : "disabled"} delete protection`;
+      createNotification({
+        text,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update delete protection",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-3 text-xl font-semibold">Delete Protection</p>
+      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+        {(isAllowed) => (
+          <div className="w-max">
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="hasDeleteProtection"
+              isDisabled={!isAllowed}
+              isChecked={currentWorkspace?.hasDeleteProtection ?? false}
+              onCheckedChange={(state) => {
+                handleToggleDeleteProjectProtection(state as boolean);
+              }}
+            >
+              Protects the project from being deleted accidentally. While this option is enabled,
+              you can&apos;t delete the project.
+            </Checkbox>
+          </div>
+        )}
+      </ProjectPermissionCan>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectProtection/index.tsx

@@ -0,0 +1 @@
+export { DeleteProjectProtection } from "./DeleteProjectProtection";

frontend/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -144,7 +144,7 @@ export const DeleteProjectSection = () => {
           {(isAllowed) => (
             <Button
               isLoading={isDeleting}
-              isDisabled={!isAllowed || isDeleting}
+              isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
               colorSchema="danger"
               variant="outline_bg"
               type="submit"

frontend/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -5,6 +5,7 @@ import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
 import { AutoCapitalizationSection } from "../AutoCapitalizationSection";
 import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSection";
+import { DeleteProjectProtection } from "../DeleteProjectProtection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
 import { EnvironmentSection } from "../EnvironmentSection";
 import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
@@ -27,6 +28,7 @@ export const ProjectGeneralTab = () => {
       {currentWorkspace?.version !== ProjectVersion.V3 && isSecretManager && (
         <RebuildSecretIndicesSection />
       )}
+      <DeleteProjectProtection />
       <DeleteProjectSection />
     </div>
   );

frontend/src/routeTree.gen.ts

@@ -33,6 +33,7 @@ import { Route as authSignUpSsoPageRouteImport } from './pages/auth/SignUpSsoPag
 import { Route as authLoginSsoPageRouteImport } from './pages/auth/LoginSsoPage/route'
 import { Route as authSelectOrgPageRouteImport } from './pages/auth/SelectOrgPage/route'
 import { Route as authLoginLdapPageRouteImport } from './pages/auth/LoginLdapPage/route'
+import { Route as authAdminLoginPageRouteImport } from './pages/auth/AdminLoginPage/route'
 import { Route as adminSignUpPageRouteImport } from './pages/admin/SignUpPage/route'
 import { Route as organizationNoOrgPageRouteImport } from './pages/organization/NoOrgPage/route'
 import { Route as authSignUpPageRouteImport } from './pages/auth/SignUpPage/route'
@@ -393,6 +394,12 @@ const authLoginLdapPageRouteRoute = authLoginLdapPageRouteImport.update({
   getParentRoute: () => RestrictLoginSignupLoginRoute,
 } as any)
 
+const authAdminLoginPageRouteRoute = authAdminLoginPageRouteImport.update({
+  id: '/admin',
+  path: '/admin',
+  getParentRoute: () => RestrictLoginSignupLoginRoute,
+} as any)
+
 const adminSignUpPageRouteRoute = adminSignUpPageRouteImport.update({
   id: '/admin/signup',
   path: '/admin/signup',
@@ -1775,6 +1782,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof adminSignUpPageRouteImport
       parentRoute: typeof middlewaresRestrictLoginSignupImport
     }
+    '/_restrict-login-signup/login/admin': {
+      id: '/_restrict-login-signup/login/admin'
+      path: '/admin'
+      fullPath: '/login/admin'
+      preLoaderRoute: typeof authAdminLoginPageRouteImport
+      parentRoute: typeof RestrictLoginSignupLoginImport
+    }
     '/_restrict-login-signup/login/ldap': {
       id: '/_restrict-login-signup/login/ldap'
       path: '/ldap'
@@ -3655,6 +3669,7 @@ const middlewaresAuthenticateRouteWithChildren =
 
 interface RestrictLoginSignupLoginRouteChildren {
   authLoginPageRouteRoute: typeof authLoginPageRouteRoute
+  authAdminLoginPageRouteRoute: typeof authAdminLoginPageRouteRoute
   authLoginLdapPageRouteRoute: typeof authLoginLdapPageRouteRoute
   authSelectOrgPageRouteRoute: typeof authSelectOrgPageRouteRoute
   authLoginSsoPageRouteRoute: typeof authLoginSsoPageRouteRoute
@@ -3665,6 +3680,7 @@ interface RestrictLoginSignupLoginRouteChildren {
 const RestrictLoginSignupLoginRouteChildren: RestrictLoginSignupLoginRouteChildren =
   {
     authLoginPageRouteRoute: authLoginPageRouteRoute,
+    authAdminLoginPageRouteRoute: authAdminLoginPageRouteRoute,
     authLoginLdapPageRouteRoute: authLoginLdapPageRouteRoute,
     authSelectOrgPageRouteRoute: authSelectOrgPageRouteRoute,
     authLoginSsoPageRouteRoute: authLoginSsoPageRouteRoute,
@@ -3739,6 +3755,7 @@ export interface FileRoutesByFullPath {
   '/signup/': typeof authSignUpPageRouteRoute
   '/organization/none': typeof organizationNoOrgPageRouteRoute
   '/admin/signup': typeof adminSignUpPageRouteRoute
+  '/login/admin': typeof authAdminLoginPageRouteRoute
   '/login/ldap': typeof authLoginLdapPageRouteRoute
   '/login/select-organization': typeof authSelectOrgPageRouteRoute
   '/login/sso': typeof authLoginSsoPageRouteRoute
@@ -3918,6 +3935,7 @@ export interface FileRoutesByTo {
   '/signup': typeof authSignUpPageRouteRoute
   '/organization/none': typeof organizationNoOrgPageRouteRoute
   '/admin/signup': typeof adminSignUpPageRouteRoute
+  '/login/admin': typeof authAdminLoginPageRouteRoute
   '/login/ldap': typeof authLoginLdapPageRouteRoute
   '/login/select-organization': typeof authSelectOrgPageRouteRoute
   '/login/sso': typeof authLoginSsoPageRouteRoute
@@ -4096,6 +4114,7 @@ export interface FileRoutesById {
   '/_restrict-login-signup/signup/': typeof authSignUpPageRouteRoute
   '/_authenticate/organization/none': typeof organizationNoOrgPageRouteRoute
   '/_restrict-login-signup/admin/signup': typeof adminSignUpPageRouteRoute
+  '/_restrict-login-signup/login/admin': typeof authAdminLoginPageRouteRoute
   '/_restrict-login-signup/login/ldap': typeof authLoginLdapPageRouteRoute
   '/_restrict-login-signup/login/select-organization': typeof authSelectOrgPageRouteRoute
   '/_restrict-login-signup/login/sso': typeof authLoginSsoPageRouteRoute
@@ -4286,6 +4305,7 @@ export interface FileRouteTypes {
     | '/signup/'
     | '/organization/none'
     | '/admin/signup'
+    | '/login/admin'
     | '/login/ldap'
     | '/login/select-organization'
     | '/login/sso'
@@ -4464,6 +4484,7 @@ export interface FileRouteTypes {
     | '/signup'
     | '/organization/none'
     | '/admin/signup'
+    | '/login/admin'
     | '/login/ldap'
     | '/login/select-organization'
     | '/login/sso'
@@ -4640,6 +4661,7 @@ export interface FileRouteTypes {
     | '/_restrict-login-signup/signup/'
     | '/_authenticate/organization/none'
     | '/_restrict-login-signup/admin/signup'
+    | '/_restrict-login-signup/login/admin'
     | '/_restrict-login-signup/login/ldap'
     | '/_restrict-login-signup/login/select-organization'
     | '/_restrict-login-signup/login/sso'
@@ -4928,6 +4950,7 @@ export const routeTree = rootRoute
       "parent": "/_restrict-login-signup",
       "children": [
         "/_restrict-login-signup/login/",
+        "/_restrict-login-signup/login/admin",
         "/_restrict-login-signup/login/ldap",
         "/_restrict-login-signup/login/select-organization",
         "/_restrict-login-signup/login/sso",
@@ -4959,6 +4982,10 @@ export const routeTree = rootRoute
       "filePath": "admin/SignUpPage/route.tsx",
       "parent": "/_restrict-login-signup"
     },
+    "/_restrict-login-signup/login/admin": {
+      "filePath": "auth/AdminLoginPage/route.tsx",
+      "parent": "/_restrict-login-signup/login"
+    },
     "/_restrict-login-signup/login/ldap": {
       "filePath": "auth/LoginLdapPage/route.tsx",
       "parent": "/_restrict-login-signup/login"

frontend/src/routes.ts

@@ -328,6 +328,7 @@ export const routes = rootRoute("root.tsx", [
     route("/admin/signup", "admin/SignUpPage/route.tsx"),
     route("/login", [
       index("auth/LoginPage/route.tsx"),
+      route("/admin", "auth/AdminLoginPage/route.tsx"),
       route("/select-organization", "auth/SelectOrgPage/route.tsx"),
       route("/sso", "auth/LoginSsoPage/route.tsx"),
       route("/ldap", "auth/LoginLdapPage/route.tsx"),