Fix merge conflicts

frontend/src/hooks/api/identities/constants.tsx

@@ -6,5 +6,6 @@ export const identityAuthToNameMap: { [I in IdentityAuthMethod]: string } = {
   [IdentityAuthMethod.KUBERNETES_AUTH]: "Kubernetes Auth",
   [IdentityAuthMethod.GCP_AUTH]: "GCP Auth",
   [IdentityAuthMethod.AWS_AUTH]: "AWS Auth",
-  [IdentityAuthMethod.AZURE_AUTH]: "Azure Auth"
+  [IdentityAuthMethod.AZURE_AUTH]: "Azure Auth",
+  [IdentityAuthMethod.OIDC_AUTH]: "OIDC Auth"
 };

frontend/src/hooks/api/identities/enums.tsx

@@ -4,5 +4,6 @@ export enum IdentityAuthMethod {
   KUBERNETES_AUTH = "kubernetes-auth",
   GCP_AUTH = "gcp-auth",
   AWS_AUTH = "aws-auth",
-  AZURE_AUTH = "azure-auth"
+  AZURE_AUTH = "azure-auth",
+  OIDC_AUTH = "oidc-auth"
 }

frontend/src/hooks/api/identities/index.tsx

@@ -5,6 +5,7 @@ export {
   useAddIdentityAzureAuth,
   useAddIdentityGcpAuth,
   useAddIdentityKubernetesAuth,
+  useAddIdentityOidcAuth,
   useAddIdentityTokenAuth,
   useAddIdentityUniversalAuth,
   useCreateIdentity,
@@ -15,6 +16,7 @@ export {
   useDeleteIdentityAzureAuth,
   useDeleteIdentityGcpAuth,
   useDeleteIdentityKubernetesAuth,
+  useDeleteIdentityOidcAuth,
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth,
   useRevokeIdentityTokenAuthToken,
@@ -24,6 +26,7 @@ export {
   useUpdateIdentityAzureAuth,
   useUpdateIdentityGcpAuth,
   useUpdateIdentityKubernetesAuth,
+  useUpdateIdentityOidcAuth,
   useUpdateIdentityTokenAuth,
   useUpdateIdentityTokenAuthToken,
   useUpdateIdentityUniversalAuth} from "./mutations";
@@ -33,9 +36,9 @@ export {
   useGetIdentityById,
   useGetIdentityGcpAuth,
   useGetIdentityKubernetesAuth,
+  useGetIdentityOidcAuth,
   useGetIdentityProjectMemberships,
   useGetIdentityTokenAuth,
   useGetIdentityTokensTokenAuth,
   useGetIdentityUniversalAuth,
-  useGetIdentityUniversalAuthClientSecrets
-} from "./queries";
+  useGetIdentityUniversalAuthClientSecrets} from "./queries";

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

@@ -9,6 +9,7 @@ import {
   AddIdentityAzureAuthDTO,
   AddIdentityGcpAuthDTO,
   AddIdentityKubernetesAuthDTO,
+  AddIdentityOidcAuthDTO,
   AddIdentityTokenAuthDTO,
   AddIdentityUniversalAuthDTO,
   ClientSecretData,
@@ -22,6 +23,7 @@ import {
   DeleteIdentityDTO,
   DeleteIdentityGcpAuthDTO,
   DeleteIdentityKubernetesAuthDTO,
+  DeleteIdentityOidcAuthDTO,
   DeleteIdentityTokenAuthDTO,
   DeleteIdentityUniversalAuthClientSecretDTO,
   DeleteIdentityUniversalAuthDTO,
@@ -31,6 +33,7 @@ import {
   IdentityAzureAuth,
   IdentityGcpAuth,
   IdentityKubernetesAuth,
+  IdentityOidcAuth,
   IdentityTokenAuth,
   IdentityUniversalAuth,
   RevokeTokenDTO,
@@ -40,6 +43,7 @@ import {
   UpdateIdentityDTO,
   UpdateIdentityGcpAuthDTO,
   UpdateIdentityKubernetesAuthDTO,
+  UpdateIdentityOidcAuthDTO,
   UpdateIdentityTokenAuthDTO,
   UpdateIdentityUniversalAuthDTO,
   UpdateTokenIdentityTokenAuthDTO
@@ -409,6 +413,111 @@ export const useDeleteIdentityAwsAuth = () => {
   });
 };
 
+export const useUpdateIdentityOidcAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityOidcAuth, {}, UpdateIdentityOidcAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps,
+      oidcDiscoveryUrl,
+      caCert,
+      boundIssuer,
+      boundAudiences,
+      boundClaims,
+      boundSubject
+    }) => {
+      const {
+        data: { identityOidcAuth }
+      } = await apiRequest.patch<{ identityOidcAuth: IdentityOidcAuth }>(
+        `/api/v1/auth/oidc-auth/identities/${identityId}`,
+        {
+          oidcDiscoveryUrl,
+          caCert,
+          boundIssuer,
+          boundAudiences,
+          boundClaims,
+          boundSubject,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityOidcAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityOidcAuth(identityId));
+    }
+  });
+};
+
+export const useAddIdentityOidcAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityOidcAuth, {}, AddIdentityOidcAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      oidcDiscoveryUrl,
+      caCert,
+      boundIssuer,
+      boundAudiences,
+      boundClaims,
+      boundSubject,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityOidcAuth }
+      } = await apiRequest.post<{ identityOidcAuth: IdentityOidcAuth }>(
+        `/api/v1/auth/oidc-auth/identities/${identityId}`,
+        {
+          oidcDiscoveryUrl,
+          caCert,
+          boundIssuer,
+          boundAudiences,
+          boundClaims,
+          boundSubject,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityOidcAuth;
+    },
+    onSuccess: (_, { identityId, organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityOidcAuth(identityId));
+    }
+  });
+};
+
+export const useDeleteIdentityOidcAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityTokenAuth, {}, DeleteIdentityOidcAuthDTO>({
+    mutationFn: async ({ identityId }) => {
+      const {
+        data: { identityOidcAuth }
+      } = await apiRequest.delete(`/api/v1/auth/oidc-auth/identities/${identityId}`);
+      return identityOidcAuth;
+    },
+    onSuccess: (_, { organizationId, identityId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityById(identityId));
+      queryClient.invalidateQueries(identitiesKeys.getIdentityOidcAuth(identityId));
+    }
+  });
+};
+
 export const useAddIdentityAzureAuth = () => {
   const queryClient = useQueryClient();
   return useMutation<IdentityAzureAuth, {}, AddIdentityAzureAuthDTO>({

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

@@ -11,9 +11,9 @@ import {
   IdentityKubernetesAuth,
   IdentityMembership,
   IdentityMembershipOrg,
+  IdentityOidcAuth,
   IdentityTokenAuth,
-  IdentityUniversalAuth
-} from "./types";
+  IdentityUniversalAuth} from "./types";
 
 export const identitiesKeys = {
   getIdentityById: (identityId: string) => [{ identityId }, "identity"] as const,
@@ -24,6 +24,7 @@ export const identitiesKeys = {
   getIdentityKubernetesAuth: (identityId: string) =>
     [{ identityId }, "identity-kubernetes-auth"] as const,
   getIdentityGcpAuth: (identityId: string) => [{ identityId }, "identity-gcp-auth"] as const,
+  getIdentityOidcAuth: (identityId: string) => [{ identityId }, "identity-oidc-auth"] as const,
   getIdentityAwsAuth: (identityId: string) => [{ identityId }, "identity-aws-auth"] as const,
   getIdentityAzureAuth: (identityId: string) => [{ identityId }, "identity-azure-auth"] as const,
   getIdentityTokenAuth: (identityId: string) => [{ identityId }, "identity-token-auth"] as const,
@@ -194,3 +195,20 @@ export const useGetIdentityTokensTokenAuth = (identityId: string) => {
     }
   });
 };
+
+export const useGetIdentityOidcAuth = (identityId: string) => {
+  return useQuery({
+    enabled: Boolean(identityId),
+    queryKey: identitiesKeys.getIdentityOidcAuth(identityId),
+    queryFn: async () => {
+      const {
+        data: { identityOidcAuth }
+      } = await apiRequest.get<{ identityOidcAuth: IdentityOidcAuth }>(
+        `/api/v1/auth/oidc-auth/identities/${identityId}`
+      );
+      return identityOidcAuth;
+    },
+    staleTime: 0,
+    cacheTime: 0
+  });
+};

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

@@ -183,6 +183,59 @@ export type DeleteIdentityGcpAuthDTO = {
   identityId: string;
 };
 
+export type IdentityOidcAuth = {
+  identityId: string;
+  oidcDiscoveryUrl: string;
+  caCert: string;
+  boundIssuer: string;
+  boundAudiences: string;
+  boundClaims: Record<string, string>;
+  boundSubject: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: IdentityTrustedIp[];
+};
+
+export type AddIdentityOidcAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  oidcDiscoveryUrl: string;
+  caCert: string;
+  boundIssuer: string;
+  boundAudiences: string;
+  boundClaims: Record<string, string>;
+  boundSubject: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: {
+    ipAddress: string;
+  }[];
+};
+
+export type UpdateIdentityOidcAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  oidcDiscoveryUrl?: string;
+  caCert?: string;
+  boundIssuer?: string;
+  boundAudiences?: string;
+  boundClaims?: Record<string, string>;
+  boundSubject?: string;
+  accessTokenTTL?: number;
+  accessTokenMaxTTL?: number;
+  accessTokenNumUsesLimit?: number;
+  accessTokenTrustedIps?: {
+    ipAddress: string;
+  }[];
+};
+
+export type DeleteIdentityOidcAuthDTO = {
+  organizationId: string;
+  identityId: string;
+};
+
 export type IdentityAwsAuth = {
   identityId: string;
   type: "iam";

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -11,22 +11,25 @@ import {
   ModalContent,
   Select,
   SelectItem,
-  UpgradePlanModal} from "@app/components/v2";
+  UpgradePlanModal
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import {
   useDeleteIdentityAwsAuth,
   useDeleteIdentityAzureAuth,
   useDeleteIdentityGcpAuth,
   useDeleteIdentityKubernetesAuth,
+  useDeleteIdentityOidcAuth,
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth} from "@app/hooks/api";
-import { IdentityAuthMethod , identityAuthToNameMap } from "@app/hooks/api/identities";
+import { IdentityAuthMethod, identityAuthToNameMap } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityAwsAuthForm } from "./IdentityAwsAuthForm";
 import { IdentityAzureAuthForm } from "./IdentityAzureAuthForm";
 import { IdentityGcpAuthForm } from "./IdentityGcpAuthForm";
 import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
+import { IdentityOidcAuthForm } from "./IdentityOidcAuthForm";
 import { IdentityTokenAuthForm } from "./IdentityTokenAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
 
@@ -45,7 +48,8 @@ const identityAuthMethods = [
   { label: "Kubernetes Auth", value: IdentityAuthMethod.KUBERNETES_AUTH },
   { label: "GCP Auth", value: IdentityAuthMethod.GCP_AUTH },
   { label: "AWS Auth", value: IdentityAuthMethod.AWS_AUTH },
-  { label: "Azure Auth", value: IdentityAuthMethod.AZURE_AUTH }
+  { label: "Azure Auth", value: IdentityAuthMethod.AZURE_AUTH },
+  { label: "OIDC Auth", value: IdentityAuthMethod.OIDC_AUTH }
 ];
 
 const schema = yup
@@ -66,6 +70,7 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
   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),
@@ -138,6 +143,15 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
           />
         );
       }
+      case IdentityAuthMethod.OIDC_AUTH: {
+        return (
+          <IdentityOidcAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+          />
+        );
+      }
       case IdentityAuthMethod.TOKEN_AUTH: {
         return (
           <IdentityTokenAuthForm
@@ -201,6 +215,13 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
           });
           break;
         }
+        case IdentityAuthMethod.OIDC_AUTH: {
+          await revokeOidcAuth({
+            identityId: identityAuthMethodData.identityId,
+            organizationId: orgId
+          });
+          break;
+        }
         default:
           break;
       }

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -0,0 +1,483 @@
+import { useEffect } from "react";
+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, TextArea } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import { useAddIdentityOidcAuth, useUpdateIdentityOidcAuth } from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { useGetIdentityOidcAuth } from "@app/hooks/api/identities/queries";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  accessTokenTrustedIps: z
+    .array(
+      z.object({
+        ipAddress: z.string().max(50)
+      })
+    )
+    .min(1),
+  accessTokenTTL: z.string(),
+  accessTokenMaxTTL: z.string(),
+  accessTokenNumUsesLimit: z.string(),
+  oidcDiscoveryUrl: z.string().url().min(1),
+  caCert: z.string().trim().default(""),
+  boundIssuer: z.string().min(1),
+  boundAudiences: z.string().optional().default(""),
+  boundClaims: z.array(
+    z.object({
+      key: z.string(),
+      value: z.string()
+    })
+  ),
+  boundSubject: z.string().optional().default("")
+});
+
+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 IdentityOidcAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityAuthMethodData
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityOidcAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityOidcAuth();
+
+  const { data } = useGetIdentityOidcAuth(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: boundClaimsFields,
+    append: appendBoundClaimField,
+    remove: removeBoundClaimField
+  } = useFieldArray({
+    control,
+    name: "boundClaims"
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        oidcDiscoveryUrl: data.oidcDiscoveryUrl,
+        caCert: data.caCert,
+        boundIssuer: data.boundIssuer,
+        boundAudiences: data.boundAudiences,
+        boundClaims: Object.entries(data.boundClaims).map(([key, value]) => ({
+          key,
+          value
+        })),
+        boundSubject: data.boundSubject,
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        oidcDiscoveryUrl: "",
+        caCert: "",
+        boundIssuer: "",
+        boundAudiences: "",
+        boundClaims: [],
+        boundSubject: "",
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({
+    accessTokenTrustedIps,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    oidcDiscoveryUrl,
+    caCert,
+    boundIssuer,
+    boundAudiences,
+    boundClaims,
+    boundSubject
+  }: FormData) => {
+    try {
+      if (!identityAuthMethodData) {
+        return;
+      }
+
+      if (data) {
+        await updateMutateAsync({
+          identityId: identityAuthMethodData.identityId,
+          organizationId: orgId,
+          oidcDiscoveryUrl,
+          caCert,
+          boundIssuer,
+          boundAudiences,
+          boundClaims: Object.fromEntries(boundClaims.map((entry) => [entry.key, entry.value])),
+          boundSubject,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          identityId: identityAuthMethodData.identityId,
+          oidcDiscoveryUrl,
+          caCert,
+          boundIssuer,
+          boundAudiences,
+          boundClaims: Object.fromEntries(boundClaims.map((entry) => [entry.key, entry.value])),
+          boundSubject,
+          organizationId: orgId,
+          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}
+        name="oidcDiscoveryUrl"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            isRequired
+            label="OIDC Discovery URL"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input
+              {...field}
+              placeholder="https://token.actions.githubusercontent.com"
+              type="text"
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundIssuer"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            isRequired
+            label="Issuer"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input
+              {...field}
+              type="text"
+              placeholder="https://token.actions.githubusercontent.com"
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="caCert"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="CA Certificate" errorText={error?.message} isError={Boolean(error)}>
+            <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundSubject"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Subject" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="boundAudiences"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Audiences" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} type="text" placeholder="service1, service2" />
+          </FormControl>
+        )}
+      />
+      {boundClaimsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`boundClaims.${index}.key`}
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Claims" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => field.onChange(e)}
+                    placeholder="property"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <Controller
+            control={control}
+            name={`boundClaims.${index}.value`}
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => field.onChange(e)}
+                    placeholder="value1, value2"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+
+          <IconButton
+            onClick={() => removeBoundClaimField(index)}
+            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={() =>
+            appendBoundClaimField({
+              key: "",
+              value: ""
+            })
+          }
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add Claims
+        </Button>
+      </div>
+      <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>
+  );
+};