Merge branch 'auth0-connection-and-secret-rotation' into feat/azureClientSecretsRotation

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";