Fix merge conflicts, bring oidc auth up to speed with identity ui changes

2026-10-16 21:37:59 +00:00 · 2024-07-10 10:31:48 +07:00
parent 8bc6edd165 ebbccdb857
commit 3913e2f462
207 changed files with 12538 additions and 3922 deletions
@@ -3,7 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

+import { createNotification } from "@app/components/notifications";
 import {
+  DeleteActionModal,
  FormControl,
  Modal,
  ModalContent,
@@ -11,7 +13,17 @@ import {
  SelectItem,
  UpgradePlanModal
 } from "@app/components/v2";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { useOrganization } from "@app/context";
+import {
+  useDeleteIdentityAwsAuth,
+  useDeleteIdentityAzureAuth,
+  useDeleteIdentityGcpAuth,
+  useDeleteIdentityKubernetesAuth,
+  useDeleteIdentityTokenAuth,
+  useDeleteIdentityUniversalAuth,
+  useDeleteIdentityOidcAuth
+} from "@app/hooks/api";
+import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 import { IdentityAwsAuthForm } from "./IdentityAwsAuthForm";
@@ -19,18 +31,20 @@ import { IdentityAzureAuthForm } from "./IdentityAzureAuthForm";
 import { IdentityGcpAuthForm } from "./IdentityGcpAuthForm";
 import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
 import { IdentityOidcAuthForm } from "./IdentityOidcAuthForm";
+import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";

 type Props = {
-  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
+  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan", "revokeAuthMethod"]>;
  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan", "revokeAuthMethod"]>,
    state?: boolean
  ) => void;
 };

 const identityAuthMethods = [
+  { label: "Token Auth", value: IdentityAuthMethod.TOKEN_AUTH },
  { label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH },
  { label: "Kubernetes Auth", value: IdentityAuthMethod.KUBERNETES_AUTH },
  { label: "GCP Auth", value: IdentityAuthMethod.GCP_AUTH },
@@ -48,6 +62,17 @@ const schema = yup
 export type FormData = yup.InferType<typeof schema>;

 export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+
+  const { mutateAsync: revokeUniversalAuth } = useDeleteIdentityUniversalAuth();
+  const { mutateAsync: revokeTokenAuth } = useDeleteIdentityTokenAuth();
+  const { mutateAsync: revokeKubernetesAuth } = useDeleteIdentityKubernetesAuth();
+  const { mutateAsync: revokeGcpAuth } = useDeleteIdentityGcpAuth();
+  const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
+  const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
+  const { mutateAsync: revokeOidcAuth } = useDeleteIdentityOidcAuth();
+
  const { control, watch, setValue } = useForm<FormData>({
    resolver: yupResolver(schema),
    defaultValues: {
@@ -128,12 +153,100 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
          />
        );
      }
+      case IdentityAuthMethod.TOKEN_AUTH: {
+        return (
+          <IdentityTokenAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+          />
+        );
+      }
      default: {
        return <div />;
      }
    }
  };

+  const onRevokeAuthMethodSubmit = async () => {
+    if (!identityAuthMethodData.authMethod) return;
+    if (!orgId) return;
+    try {
+      console.log("onRevokeAuthMethodSubmit identityId: ", identityAuthMethodData);
+      switch (identityAuthMethodData.authMethod) {
+        case IdentityAuthMethod.UNIVERSAL_AUTH: {
+          await revokeUniversalAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
+        case IdentityAuthMethod.TOKEN_AUTH: {
+          await revokeTokenAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
+        case IdentityAuthMethod.KUBERNETES_AUTH: {
+          await revokeKubernetesAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
+        case IdentityAuthMethod.GCP_AUTH: {
+          await revokeGcpAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
+        case IdentityAuthMethod.AWS_AUTH: {
+          await revokeAwsAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
+        case IdentityAuthMethod.AZURE_AUTH: {
+          await revokeAzureAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
+        case IdentityAuthMethod.OIDC_AUTH: {
+          await revokeOidcAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
+        default:
+          break;
+      }
+
+      createNotification({
+        text: `Successfully removed ${
+          identityAuthToNameMap[identityAuthMethodData.authMethod]
+        } on ${identityAuthMethodData.name}`,
+        type: "success"
+      });
+
+      handlePopUpToggle("revokeAuthMethod", false);
+      handlePopUpToggle("identityAuthMethod", false);
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to remove ${identityAuthToNameMap[identityAuthMethodData.authMethod]} on ${
+          identityAuthMethodData.name
+        }`,
+        type: "error"
+      });
+    }
+  };
+
  return (
    <Modal
      isOpen={popUp?.identityAuthMethod?.isOpen}
@@ -174,6 +287,17 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
          text="You can use IP allowlisting if you switch to Infisical's Pro plan."
        />
+        <DeleteActionModal
+          isOpen={popUp?.revokeAuthMethod?.isOpen}
+          title={`Are you sure want to remove ${
+            identityAuthMethodData?.authMethod
+              ? identityAuthToNameMap[identityAuthMethodData.authMethod]
+              : "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => handlePopUpToggle("revokeAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={onRevokeAuthMethodSubmit}
+        />
      </ModalContent>
    </Modal>
  );
@@ -42,7 +42,7 @@ export type FormData = yup.InferType<typeof schema>;
 type Props = {
  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
    state?: boolean
  ) => void;
  identityAuthMethodData: {
@@ -329,23 +329,36 @@ export const IdentityAwsAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -40,7 +40,7 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
    state?: boolean
  ) => void;
  identityAuthMethodData: {
@@ -327,23 +327,36 @@ export const IdentityAzureAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -41,7 +41,7 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
    state?: boolean
  ) => void;
  identityAuthMethodData: {
@@ -361,23 +361,36 @@ export const IdentityGcpAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -17,8 +17,6 @@ import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";

-// TODO: Add CA cert and token reviewer JWT fields
-
 const schema = z
  .object({
    kubernetesHost: z.string(),
@@ -45,7 +43,7 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
    state?: boolean
  ) => void;
  identityAuthMethodData: {
@@ -77,11 +75,11 @@ export const IdentityKubernetesAuthForm = ({
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
-      kubernetesHost: "", // TODO
+      kubernetesHost: "",
      tokenReviewerJwt: "",
-      allowedNames: "", // TODO
-      allowedNamespaces: "", // TODO
-      allowedAudience: "", // TODO
+      allowedNames: "",
+      allowedNamespaces: "",
+      allowedAudience: "",
      caCert: "",
      accessTokenTTL: "2592000",
      accessTokenMaxTTL: "2592000",
@@ -118,7 +116,7 @@ export const IdentityKubernetesAuthForm = ({
      });
    } else {
      reset({
-        kubernetesHost: "", // TODO
+        kubernetesHost: "",
        tokenReviewerJwt: "",
        allowedNames: "",
        allowedNamespaces: "",
@@ -384,23 +382,36 @@ export const IdentityKubernetesAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

@@ -16,8 +17,8 @@ import {
 import { useOrganization } from "@app/context";
 import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
 import {
-  IdentityAuthMethod
-  // useAddIdentityUniversalAuth
+  // IdentityAuthMethod,
+  useAddIdentityUniversalAuth
 } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -32,18 +33,19 @@ export type FormData = yup.InferType<typeof schema>;

 type Props = {
  popUp: UsePopUpState<["identity"]>;
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
-    data: {
-      identityId: string;
-      name: string;
-      authMethod?: IdentityAuthMethod;
-    }
-  ) => void;
+  // handlePopUpOpen: (
+  //   popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+  //   data: {
+  //     identityId: string;
+  //     name: string;
+  //     authMethod?: IdentityAuthMethod;
+  //   }
+  // ) => void;
  handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };

-export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const router = useRouter();
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";

@@ -51,7 +53,7 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro

  const { mutateAsync: createMutateAsync } = useCreateIdentity();
  const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
-  // const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
+  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();

  const {
    control,
@@ -113,32 +115,30 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
      } else {
        // create

-        const {
-          id: createdId,
-          name: createdName,
-          authMethod
-        } = await createMutateAsync({
+        const { id: createdId } = await createMutateAsync({
          name,
          role: role || undefined,
          organizationId: orgId
        });

-        // await addMutateAsync({
-        //   organizationId: orgId,
-        //   identityId: createdId,
-        //   clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
-        //   accessTokenTTL: 2592000,
-        //   accessTokenMaxTTL: 2592000,
-        //   accessTokenNumUsesLimit: 0
-        // });
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId: createdId,
+          clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTTL: 2592000,
+          accessTokenMaxTTL: 2592000,
+          accessTokenNumUsesLimit: 0
+        });

        handlePopUpToggle("identity", false);
-        handlePopUpOpen("identityAuthMethod", {
-          identityId: createdId,
-          name: createdName,
-          authMethod
-        });
+        router.push(`/org/${orgId}/identities/${createdId}`);
+
+        // handlePopUpOpen("identityAuthMethod", {
+        //   identityId: createdId,
+        //   name: createdName,
+        //   authMethod
+        // });
      }

      createNotification({
@@ -43,7 +43,7 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
    state?: boolean
  ) => void;
  identityAuthMethodData: {
@@ -447,23 +447,36 @@ export const IdentityOidcAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );
@@ -15,10 +15,11 @@ import { withPermission } from "@app/hoc";
 import { useDeleteIdentity } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";

-import { IdentityAuthMethodModal } from "./IdentityAuthMethodModal";
+// import { IdentityAuthMethodModal } from "./IdentityAuthMethodModal";
 import { IdentityModal } from "./IdentityModal";
 import { IdentityTable } from "./IdentityTable";
-import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";
+import { IdentityTokenAuthTokenModal } from "./IdentityTokenAuthTokenModal";
+// import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal";

 export const IdentitySection = withPermission(
  () => {
@@ -33,7 +34,8 @@ export const IdentitySection = withPermission(
      "deleteIdentity",
      "universalAuthClientSecret",
      "deleteUniversalAuthClientSecret",
-      "upgradePlan"
+      "upgradePlan",
+      "tokenAuthToken"
    ] as const);

    const isMoreIdentitiesAllowed = subscription?.identityLimit
@@ -106,22 +108,19 @@ export const IdentitySection = withPermission(
            )}
          </OrgPermissionCan>
        </div>
-        <IdentityTable handlePopUpOpen={handlePopUpOpen} />
-        <IdentityModal
+        <IdentityTable />
+        <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        {/* <IdentityAuthMethodModal
          popUp={popUp}
          handlePopUpOpen={handlePopUpOpen}
          handlePopUpToggle={handlePopUpToggle}
-        />
-        <IdentityAuthMethodModal
+        /> */}
+        {/* <IdentityUniversalAuthClientSecretModal
          popUp={popUp}
          handlePopUpOpen={handlePopUpOpen}
          handlePopUpToggle={handlePopUpToggle}
-        />
-        <IdentityUniversalAuthClientSecretModal
-          popUp={popUp}
-          handlePopUpOpen={handlePopUpOpen}
-          handlePopUpToggle={handlePopUpToggle}
-        />
+        /> */}
+        <IdentityTokenAuthTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
        <DeleteActionModal
          isOpen={popUp.deleteIdentity.isOpen}
          title={`Are you sure want to delete ${
@@ -1,22 +1,11 @@
-import {
-  faCopy,
-  faEllipsis,
-  faKey,
-  faLock,
-  faPencil,
-  faServer,
-  faXmark
-} from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faEllipsis, faServer } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";

 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
  EmptyState,
  IconButton,
  Select,
@@ -28,33 +17,13 @@ import {
  Td,
  Th,
  THead,
-  Tooltip,
  Tr
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetIdentityMembershipOrgs, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
-import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
-import { UsePopUpState } from "@app/hooks/usePopUp";

-type Props = {
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<
-      ["deleteIdentity", "identity", "universalAuthClientSecret", "identityAuthMethod"]
-    >,
-    data?: {
-      identityId?: string;
-      name?: string;
-      authMethod?: string;
-      role?: string;
-      customRole?: {
-        name: string;
-        slug: string;
-      };
-    }
-  ) => void;
-};
-
-export const IdentityTable = ({ handlePopUpOpen }: Props) => {
+export const IdentityTable = () => {
+  const router = useRouter();
  const { currentOrg } = useOrganization();
  const orgId = currentOrg?.id || "";

@@ -94,19 +63,22 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
          <Tr>
            <Th>Name</Th>
            <Th>Role</Th>
-            <Th>Auth Method</Th>
            <Th className="w-5" />
          </Tr>
        </THead>
        <TBody>
          {isLoading && <TableSkeleton columns={4} innerKey="org-identities" />}
          {!isLoading &&
-            data &&
-            data.length > 0 &&
-            data.map(({ identity: { id, name, authMethod }, role, customRole }) => {
+            data?.map(({ identity: { id, name }, role, customRole }) => {
              return (
-                <Tr className="h-10" key={`identity-${id}`}>
-                  <Td>{name}</Td>
+                <Tr
+                  className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+                  key={`identity-${id}`}
+                  onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
+                >
+                  <Td>
+                    <Link href={`/org/${orgId}/identities/${id}`}>{name}</Link>
+                  </Td>
                  <Td>
                    <OrgPermissionCan
                      I={OrgPermissionActions.Edit}
@@ -136,124 +108,16 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                      }}
                    </OrgPermissionCan>
                  </Td>
-                  <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
                  <Td>
                    <div className="flex items-center justify-end space-x-4">
-                      {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
-                        <Tooltip content="Manage client ID/secrets">
-                          <IconButton
-                            onClick={async () => {
-                              handlePopUpOpen("universalAuthClientSecret", {
-                                identityId: id,
-                                name
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                          >
-                            <FontAwesomeIcon icon={faKey} />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Edit}
-                        a={OrgPermissionSubjects.Identity}
+                      <IconButton
+                        ariaLabel="copy icon"
+                        variant="plain"
+                        className="group relative"
+                        onClick={() => router.push(`/org/${orgId}/identities/${id}`)}
                      >
-                        {(isAllowed) => (
-                          <Tooltip content="Manage auth method">
-                            <IconButton
-                              onClick={async () => {
-                                handlePopUpOpen("identityAuthMethod", {
-                                  identityId: id,
-                                  name,
-                                  authMethod
-                                });
-                              }}
-                              size="lg"
-                              colorSchema="primary"
-                              variant="plain"
-                              ariaLabel="update"
-                              isDisabled={!isAllowed}
-                            >
-                              <FontAwesomeIcon icon={faLock} />
-                            </IconButton>
-                          </Tooltip>
-                        )}
-                      </OrgPermissionCan>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild className="rounded-lg">
-                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                            <Tooltip content="More options">
-                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
-                            </Tooltip>
-                          </div>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="p-1">
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Edit}
-                            a={OrgPermissionSubjects.Identity}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={async () => {
-                                  if (!isAllowed) return;
-                                  handlePopUpOpen("identity", {
-                                    identityId: id,
-                                    name,
-                                    role,
-                                    customRole
-                                  });
-                                }}
-                                disabled={!isAllowed}
-                                icon={<FontAwesomeIcon icon={faPencil} />}
-                              >
-                                Update identity
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <OrgPermissionCan
-                            I={OrgPermissionActions.Delete}
-                            a={OrgPermissionSubjects.Identity}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                className={twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
-                                )}
-                                onClick={() => {
-                                  if (!isAllowed) return;
-                                  handlePopUpOpen("deleteIdentity", {
-                                    identityId: id,
-                                    name
-                                  });
-                                }}
-                                icon={<FontAwesomeIcon icon={faXmark} />}
-                              >
-                                Delete identity
-                              </DropdownMenuItem>
-                            )}
-                          </OrgPermissionCan>
-                          <DropdownMenuItem
-                            onClick={() => {
-                              navigator.clipboard.writeText(id);
-                              createNotification({
-                                text: "Copied identity internal ID to clipboard",
-                                type: "success"
-                              });
-                            }}
-                            icon={<FontAwesomeIcon icon={faCopy} />}
-                          >
-                            Copy Identity ID
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                        <FontAwesomeIcon icon={faEllipsis} />
+                      </IconButton>
                    </div>
                  </Td>
                </Tr>
@@ -0,0 +1,275 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import {
+  useAddIdentityTokenAuth,
+  useGetIdentityTokenAuth,
+  useUpdateIdentityTokenAuth
+} from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    accessTokenTTL: z.string(),
+    accessTokenMaxTTL: z.string(),
+    accessTokenNumUsesLimit: z.string(),
+    accessTokenTrustedIps: z
+      .array(
+        z.object({
+          ipAddress: z.string().max(50)
+        })
+      )
+      .min(1)
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    authMethod?: IdentityAuthMethod;
+  };
+};
+
+export const IdentityTokenAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityAuthMethodData
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityTokenAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityTokenAuth();
+
+  const { data } = useGetIdentityTokenAuth(identityAuthMethodData?.identityId ?? "");
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      accessTokenTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
+      accessTokenNumUsesLimit: "0",
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+    }
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  const onFormSubmit = async ({
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps
+  }: FormData) => {
+    try {
+      if (!identityAuthMethodData) return;
+
+      if (data) {
+        await updateMutateAsync({
+          organizationId: orgId,
+          identityId: identityAuthMethodData.identityId,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId: identityAuthMethodData.identityId,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${
+          identityAuthMethodData?.authMethod ? "updated" : "configured"
+        } auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      createNotification({
+        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
+            onClick={() => {
+              if (subscription?.ipAllowlisting) {
+                removeAccessTokenTrustedIp(index);
+                return;
+              }
+
+              handlePopUpOpen("upgradePlan");
+            }}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+};
@@ -0,0 +1,53 @@
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, Modal, ModalContent, Tooltip } from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  popUp: UsePopUpState<["tokenAuthToken"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["tokenAuthToken"]>, state?: boolean) => void;
+};
+
+export const IdentityTokenAuthTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [copyTextAccessToken, isCopyingAccessToken, setCopyTextAccessToken] = useTimedReset<string>(
+    {
+      initialState: "Copy to clipboard"
+    }
+  );
+
+  const popUpData = popUp?.tokenAuthToken?.data as {
+    accessToken: string;
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.tokenAuthToken?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("tokenAuthToken", isOpen);
+      }}
+    >
+      <ModalContent title="Access Token">
+        {popUpData?.accessToken && (
+          <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+              <p className="mr-4 break-all">{popUpData.accessToken}</p>
+              <Tooltip content={copyTextAccessToken}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  colorSchema="secondary"
+                  className="group relative"
+                  onClick={() => {
+                    navigator.clipboard.writeText(popUpData.accessToken);
+                    setCopyTextAccessToken("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingAccessToken ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -10,7 +10,7 @@ import * as yup from "yup";
 import { createNotification } from "@app/components/notifications";
 import {
  Button,
-  DeleteActionModal,
+  // DeleteActionModal,
  EmptyState,
  FormControl,
  IconButton,
@@ -30,8 +30,7 @@ import { useToggle } from "@app/hooks";
 import {
  useCreateIdentityUniversalAuthClientSecret,
  useGetIdentityUniversalAuth,
-  useGetIdentityUniversalAuthClientSecrets,
-  useRevokeIdentityUniversalAuthClientSecret
+  useGetIdentityUniversalAuthClientSecrets
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

@@ -44,18 +43,16 @@ const schema = yup.object({
 export type FormData = yup.InferType<typeof schema>;

 type Props = {
-  popUp: UsePopUpState<["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]>;
+  popUp: UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>;
  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["deleteUniversalAuthClientSecret"]>,
+    popUpName: keyof UsePopUpState<["revokeClientSecret"]>,
    data?: {
      clientSecretPrefix: string;
      clientSecretId: string;
    }
  ) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<
-      ["universalAuthClientSecret", "deleteUniversalAuthClientSecret"]
-    >,
+    popUpName: keyof UsePopUpState<["universalAuthClientSecret", "revokeClientSecret"]>,
    state?: boolean
  ) => void;
 };
@@ -66,7 +63,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
  handlePopUpToggle
 }: Props) => {
  const { t } = useTranslation();
-  
+
  const [token, setToken] = useState("");
  const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
  const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);
@@ -81,8 +78,6 @@ export const IdentityUniversalAuthClientSecretModal = ({

  const { mutateAsync: createClientSecretMutateAsync } =
    useCreateIdentityUniversalAuthClientSecret();
-  const { mutateAsync: revokeClientSecretMutateAsync } =
-    useRevokeIdentityUniversalAuthClientSecret();

  const {
    control,
@@ -142,41 +137,6 @@ export const IdentityUniversalAuthClientSecretModal = ({
    }
  };

-  const onDeleteClientSecretSubmit = async ({
-    clientSecretId,
-    clientSecretPrefix
-  }: {
-    clientSecretId: string;
-    clientSecretPrefix: string;
-  }) => {
-    try {
-      if (!popUpData?.identityId) return;
-
-      await revokeClientSecretMutateAsync({
-        identityId: popUpData.identityId,
-        clientSecretId
-      });
-
-      if (token.startsWith(clientSecretPrefix)) {
-        reset();
-        setToken("");
-      }
-
-      handlePopUpToggle("deleteUniversalAuthClientSecret", false);
-
-      createNotification({
-        text: "Successfully deleted client secret",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to delete client secret",
-        type: "error"
-      });
-    }
-  };
-
  const hasToken = Boolean(token);

  return (
@@ -346,7 +306,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
                        <Td>
                          <IconButton
                            onClick={() => {
-                              handlePopUpOpen("deleteUniversalAuthClientSecret", {
+                              handlePopUpOpen("revokeClientSecret", {
                                clientSecretPrefix,
                                clientSecretId: id
                              });
@@ -376,26 +336,6 @@ export const IdentityUniversalAuthClientSecretModal = ({
            </TBody>
          </Table>
        </TableContainer>
-        <DeleteActionModal
-          isOpen={popUp.deleteUniversalAuthClientSecret.isOpen}
-          title={`Are you sure want to delete the client secret ${
-            (popUp?.deleteUniversalAuthClientSecret?.data as { clientSecretPrefix: string })
-              ?.clientSecretPrefix || ""
-          }************?`}
-          onChange={(isOpen) => handlePopUpToggle("deleteUniversalAuthClientSecret", isOpen)}
-          deleteKey="confirm"
-          onDeleteApproved={() => {
-            const deleteClientSecretData = popUp?.deleteUniversalAuthClientSecret?.data as {
-              clientSecretId: string;
-              clientSecretPrefix: string;
-            };
-
-            return onDeleteClientSecretSubmit({
-              clientSecretId: deleteClientSecretData.clientSecretId,
-              clientSecretPrefix: deleteClientSecretData.clientSecretPrefix
-            });
-          }}
-        />
      </ModalContent>
    </Modal>
  );
@@ -48,7 +48,7 @@ export type FormData = yup.InferType<typeof schema>;
 type Props = {
  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "revokeAuthMethod"]>,
    state?: boolean
  ) => void;
  identityAuthMethodData: {
@@ -368,23 +368,36 @@ export const IdentityUniversalAuthForm = ({
          Add IP Address
        </Button>
      </div>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
-        </Button>
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
-        </Button>
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+          </Button>
+          <Button
+            colorSchema="secondary"
+            variant="plain"
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          >
+            Cancel
+          </Button>
+        </div>
+        {identityAuthMethodData?.authMethod && (
+          <Button
+            size="sm"
+            colorSchema="danger"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+            onClick={() => handlePopUpToggle("revokeAuthMethod", true)}
+          >
+            Remove Auth Method
+          </Button>
+        )}
      </div>
    </form>
  );