Merge pull request #3265 from Infisical/minor-changes

Minor changes to oidc claims and mappings

backend/src/ee/services/permission/permission-fns.ts

@@ -131,12 +131,12 @@ function validateOrgSSO(actorAuthMethod: ActorAuthMethod, isOrgSsoEnforced: TOrg
   }
 }
 
-const escapeHandlebarsMissingMetadata = (obj: Record<string, string>) => {
+const escapeHandlebarsMissingDict = (obj: Record<string, string>, key: string) => {
   const handler = {
     get(target: Record<string, string>, prop: string) {
-      if (!(prop in target)) {
+      if (!Object.hasOwn(target, prop)) {
         // eslint-disable-next-line no-param-reassign
-        target[prop] = `{{identity.metadata.${prop}}}`; // Add missing key as an "own" property
+        target[prop] = `{{${key}.${prop}}}`; // Add missing key as an "own" property
       }
       return target[prop];
     }
@@ -145,4 +145,4 @@ const escapeHandlebarsMissingMetadata = (obj: Record<string, string>) => {
   return new Proxy(obj, handler);
 };
 
-export { escapeHandlebarsMissingMetadata, isAuthMethodSaml, validateOrgSSO };
+export { escapeHandlebarsMissingDict, isAuthMethodSaml, validateOrgSSO };

backend/src/ee/services/permission/permission-service.ts

@@ -23,7 +23,7 @@ import { TServiceTokenDALFactory } from "@app/services/service-token/service-tok
 
 import { orgAdminPermissions, orgMemberPermissions, orgNoAccessPermissions, OrgPermissionSet } from "./org-permission";
 import { TPermissionDALFactory } from "./permission-dal";
-import { escapeHandlebarsMissingMetadata, validateOrgSSO } from "./permission-fns";
+import { escapeHandlebarsMissingDict, validateOrgSSO } from "./permission-fns";
 import {
   TBuildOrgPermissionDTO,
   TBuildProjectPermissionDTO,
@@ -244,20 +244,22 @@ export const permissionServiceFactory = ({
 
     const rules = buildProjectPermissionRules(rolePermissions.concat(additionalPrivileges));
     const templatedRules = handlebars.compile(JSON.stringify(rules), { data: false });
-    const metadataKeyValuePair = escapeHandlebarsMissingMetadata(
+    const metadataKeyValuePair = escapeHandlebarsMissingDict(
       objectify(
         userProjectPermission.metadata,
         (i) => i.key,
         (i) => i.value
-      )
+      ),
+      "identity.metadata"
     );
+    const templateValue = {
+      id: userProjectPermission.userId,
+      username: userProjectPermission.username,
+      metadata: metadataKeyValuePair
+    };
     const interpolateRules = templatedRules(
       {
-        identity: {
-          id: userProjectPermission.userId,
-          username: userProjectPermission.username,
-          metadata: metadataKeyValuePair
-        }
+        identity: templateValue
       },
       { data: false }
     );
@@ -318,24 +320,26 @@ export const permissionServiceFactory = ({
 
     const rules = buildProjectPermissionRules(rolePermissions.concat(additionalPrivileges));
     const templatedRules = handlebars.compile(JSON.stringify(rules), { data: false });
-    const identityAuthInfo = requestContext.get("identityAuthInfo");
+    const unescapedIdentityAuthInfo = requestContext.get("identityAuthInfo");
     const unescapedMetadata = objectify(
       identityProjectPermission.metadata,
       (i) => i.key,
       (i) => i.value
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ) as Record<string, any>;
-    if (identityAuthInfo?.identityId === identityId && identityAuthInfo) {
-      unescapedMetadata.auth = identityAuthInfo;
-    }
-    const metadataKeyValuePair = escapeHandlebarsMissingMetadata(unescapedMetadata);
+    );
+    const identityAuthInfo =
+      unescapedIdentityAuthInfo?.identityId === identityId && unescapedIdentityAuthInfo
+        ? escapeHandlebarsMissingDict(unescapedIdentityAuthInfo as never, "identity.auth")
+        : {};
+    const metadataKeyValuePair = escapeHandlebarsMissingDict(unescapedMetadata, "identity.metadata");
+    const templateValue = {
+      id: identityProjectPermission.identityId,
+      username: identityProjectPermission.username,
+      metadata: metadataKeyValuePair,
+      auth: identityAuthInfo
+    };
     const interpolateRules = templatedRules(
       {
-        identity: {
-          id: identityProjectPermission.identityId,
-          username: identityProjectPermission.username,
-          metadata: metadataKeyValuePair
-        }
+        identity: templateValue
       },
       { data: false }
     );
@@ -428,20 +432,22 @@ export const permissionServiceFactory = ({
 
       const rules = buildProjectPermissionRules(rolePermissions.concat(additionalPrivileges));
       const templatedRules = handlebars.compile(JSON.stringify(rules), { data: false });
-      const metadataKeyValuePair = escapeHandlebarsMissingMetadata(
+      const metadataKeyValuePair = escapeHandlebarsMissingDict(
         objectify(
           userProjectPermission.metadata,
           (i) => i.key,
           (i) => i.value
-        )
+        ),
+        "identity.metadata"
       );
+      const templateValue = {
+        id: userProjectPermission.userId,
+        username: userProjectPermission.username,
+        metadata: metadataKeyValuePair
+      };
       const interpolateRules = templatedRules(
         {
-          identity: {
-            id: userProjectPermission.userId,
-            username: userProjectPermission.username,
-            metadata: metadataKeyValuePair
-          }
+          identity: templateValue
         },
         { data: false }
       );
@@ -473,21 +479,22 @@ export const permissionServiceFactory = ({
 
       const rules = buildProjectPermissionRules(rolePermissions.concat(additionalPrivileges));
       const templatedRules = handlebars.compile(JSON.stringify(rules), { data: false });
-      const metadataKeyValuePair = escapeHandlebarsMissingMetadata(
+      const metadataKeyValuePair = escapeHandlebarsMissingDict(
         objectify(
           identityProjectPermission.metadata,
           (i) => i.key,
           (i) => i.value
-        )
+        ),
+        "identity.metadata"
       );
-
+      const templateValue = {
+        id: identityProjectPermission.identityId,
+        username: identityProjectPermission.username,
+        metadata: metadataKeyValuePair
+      };
       const interpolateRules = templatedRules(
         {
-          identity: {
-            id: identityProjectPermission.identityId,
-            username: identityProjectPermission.username,
-            metadata: metadataKeyValuePair
-          }
+          identity: templateValue
         },
         { data: false }
       );

docs/documentation/platform/access-controls/abac/managing-machine-identity-attributes.mdx

@@ -0,0 +1,68 @@
+---
+title: "Machine identities"  
+description: "Learn how to set metadata and leverage authentication attributes for machine identities."
+---
+
+Machine identities can have metadata set manually, just like users. In addition, during the machine authentication process (e.g., via OIDC), extra attributes called claims—are provided, which can be used in your ABAC policies.
+
+#### Setting Metadata on Machine Identities
+
+<Tabs>
+  <Tab title="Manually Configure Metadata">
+    <Steps>
+      <Step title="Navigate to the Access Control page on the organization sidebar and select a machine identity.">
+        <img src="/documentation/platform/access-controls/abac/images/add-metadata-on-machine-identity-1.png" />
+      </Step>
+      <Step title="On the machine identity page, click the pencil icon to edit the selected identity.">
+        <img src="/documentation/platform/access-controls/abac/images/add-metadata-on-machine-identity-2.png" />
+      </Step>
+      <Step title="Add metadata via key-value pairs and update the machine identity.">
+        <img src="/documentation/platform/access-controls/abac/images/add-metadata-on-machine-identity-3.png" />
+      </Step>
+    </Steps>
+  </Tab>
+</Tabs>
+
+#### Accessing Attributes From Machine Identity Login
+
+When machine identities authenticate, they may receive additional payloads/attributes from the service provider. 
+For methods like OIDC, these come as claims in the token and can be made available in your policies.
+
+<Tabs>
+  <Tab title="OIDC Login Attributes">
+    1. Navigate to the Identity Authentication settings and select the OIDC Auth Method.  
+    2. In the **Advanced section**, locate the Claim Mapping configuration.  
+    3. Map the OIDC claims to permission attributes by specifying:  
+       - **Attribute Name:** The identifier to be used in your policies (e.g., department).  
+       - **Claim Path:** The dot notation path to the claim in the OIDC token (e.g., user.department).
+
+    For example, if your OIDC provider returns:
+
+    ```json
+    {
+      "sub": "machine456",
+      "name": "Service A",
+      "user": {
+        "department": "engineering",
+        "role": "service"
+      }
+    }
+    ```
+
+    You might map:
+    
+    - **department:** to `user.department`  
+    - **role:** to `user.role`
+
+    Once configured, these attributes become available in your policies using the following format:
+    
+    ```
+    {{ identity.auth.oidc.claims.<permission claim name> }}
+    ```
+
+    <img src="/images/platform/access-controls/abac-policy-oidc-format.png" />
+  </Tab>
+  <Tab title="Other Authentication Method Attributes">
+    At the moment we only support OIDC claims. Payloads on other authentication methods are not yet accessible.
+  </Tab>
+</Tabs>

docs/documentation/platform/access-controls/abac/managing-user-metadata.mdx

@@ -0,0 +1,39 @@
+---
+title: "Users identities"  
+description: "How to set and use metadata attributes on user identities for ABAC."
+---
+
+User identities can have metadata attributes assigned directly. These attributes (such as location or department) are used to define dynamic access policies.
+
+#### Setting Metadata on Users
+
+<Tabs>
+  <Tab title="Manually Configure Metadata">
+    <Steps>
+      <Step title="Navigate to the Access Control page on the organization sidebar and select a user.">
+        <img src="/images/platform/access-controls/add-metadata-step1.png" />
+      </Step>
+      <Step title="On the User Page, click the pencil icon to edit the selected user.">
+        <img src="/images/platform/access-controls/add-metadata-step2.png" />
+      </Step>
+      <Step title="Add metadata via key-value pairs and update the user identity.">
+        <img src="/images/platform/access-controls/add-metadata-step3.png" />
+      </Step>
+    </Steps>
+  </Tab>
+  <Tab title="Automatically Populate Metadata">
+    For organizations using SAML for **user logins**, Infisical automatically maps metadata attributes from SAML assertions to user identities on every login. This enables dynamic policies based on the user's SAML attributes.
+  </Tab>
+</Tabs>
+
+#### Applying ABAC Policies with User Metadata
+Attribute-based access controls are currently only available for polices defined on Secrets Manager projects. 
+You can set ABAC permissions to dynamically set access to environments, folders, secrets, and secret tags.
+
+<img src="/images/platform/access-controls/example-abac-1.png" />
+
+In your policies, metadata values are accessed as follows:
+
+- **User ID:** `{{ identity.id }}` (always available)
+- **Username:** `{{ identity.username }}` (always available)
+- **Metadata Attributes:** `{{ identity.metadata.<metadata-key-name> }}` (available if set)

docs/documentation/platform/access-controls/abac/overview.mdx

@@ -0,0 +1,15 @@
+---
+title: "Overview"  
+description: "Learn the basics of ABAC for both users and machine identities."
+---
+
+Infisical's Attribute-based Access Controls (ABAC) enable dynamic, attribute-driven permissions for both users and machine identities. ABAC enforces fine-grained, context-aware access controls using metadata attributes—stored as key-value pairs—either attached to identities or provided during authentication.
+
+<CardGroup cols={2}>
+  <Card title="Users" icon="square-1" href="./managing-user-metadata">
+    Manage user metadata manually or automatically via SAML logins.  
+  </Card>
+  <Card title="Machine Identities" icon="square-2" href="./managing-machine-identity-attributes">
+   Set metadata manually like users and access additional attributes provided during machine authentication (for example, OIDC claims).
+  </Card>
+</CardGroup>

docs/documentation/platform/access-controls/attribute-based-access-controls.mdx

@@ -1,65 +0,0 @@
----
-title: "Attribute-based Access Controls"
-description: "Learn how to use ABAC to manage permissions based on identity attributes."
----
-
-Infisical's Attribute-based Access Controls (ABAC) allow for dynamic, attribute-driven permissions for both user and machine identities. 
-ABAC policies use metadata attributes—stored as key-value pairs on identities—to enforce fine-grained permissions that are context aware.
-
-In ABAC, access controls are defined using metadata attributes, such as location or department, which can be set directly on user or machine identities. 
-During policy execution, these attributes are evaluated, and determine whether said actor can access the requested resource or perform the requested operation.
-
-## Project-level Permissions
-
-Attribute-based access controls are currently available for polices defined on projects. You can set ABAC permissions to control access to environments, folders, secrets, and secret tags.
-
-### Setting Metadata on Identities
-
-<Tabs>
-  <Tab title="Manually Configure Metadata">
-    <Steps>
-        <Step title="Navigate to the Access Control page on the organization sidebar and select an identity (user or machine).">
-            <img src="/images/platform/access-controls/add-metadata-step1.png" />
-        </Step>
-        <Step title="On the Identity Page, click the pencil icon to edit the selected identity.">
-            <img src="/images/platform/access-controls/add-metadata-step2.png" />
-        </Step>
-        <Step title="Add metadata via key-value pairs and update the identity.">
-            <img src="/images/platform/access-controls/add-metadata-step3.png" />
-        </Step>
-    </Steps>
-  </Tab>
-  <Tab title="Automatically Populate Metadata">
-    For organizations using SAML for login, Infisical automatically maps metadata attributes from SAML assertions to user identities.
-    This makes it easy to create policies that dynamically adapt based on the SAML user’s attributes.
-  </Tab>
-</Tabs>
-
-
-## Defining ABAC Policies
-
-<img src="/images/platform/access-controls/example-abac-1.png" />
-
-ABAC policies make use of identity metadata to define dynamic permissions. Each attribute must start and end with double curly-brackets `{{ <attribute-name> }}`.
-The following attributes are available within project permissions:
-
-- **User ID**: `{{ identity.id }}`
-- **Username**: `{{ identity.username }}`
-- **Metadata Attributes**: `{{ identity.metadata.<metadata-key-name> }}`
-
-During policy execution, these placeholders are replaced by their actual values prior to evaluation.
-
-### Example Use Case
-
-#### Location-based Access Control
-
-Suppose you want to restrict access to secrets within a specific folder based on a user's geographic region.
-You could assign a `location` attribute to each user (e.g., `identity.metadata.location`).
-You could then structure your folders to align with this attribute and define permissions accordingly.
-
-For example, a policy might restrict access to folders matching the user's location attribute in the following pattern:
-```
-/appA/{{ identity.metadata.location }}
-```
-Using this structure, users can only access folders that correspond to their configured `location` attribute.
-Consequently, if a users attribute changes due to relocation, no policies need to be changed to gain access to the folders associated with their new location.

docs/documentation/platform/access-controls/overview.mdx

@@ -18,7 +18,7 @@ To make sure that users and machine identities are only accessing the resources
 
   <Card 
     title="Attribute-based Access Control" 
-    href="./attribute-based-access-controls" 
+    href="/documentation/platform/access-controls/abac" 
     icon="address-book" 
     color="#000000"
   >

docs/mint.json

@@ -150,7 +150,14 @@
           "pages": [
             "documentation/platform/access-controls/overview",
             "documentation/platform/access-controls/role-based-access-controls",
-            "documentation/platform/access-controls/attribute-based-access-controls",
+            {
+              "group": "Attribute based access controls",
+              "pages": [
+                "documentation/platform/access-controls/abac/overview",
+                "documentation/platform/access-controls/abac/managing-user-metadata",
+                "documentation/platform/access-controls/abac/managing-machine-identity-attributes"
+              ]
+            },
             "documentation/platform/access-controls/additional-privileges",
             "documentation/platform/access-controls/temporary-access",
             "documentation/platform/access-controls/access-requests",

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -46,12 +46,14 @@ const schema = z.object({
   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()
-    })
-  ),
+  boundClaims: z
+    .array(
+      z.object({
+        key: z.string(),
+        value: z.string()
+      })
+    )
+    .default([]),
   claimMetadataMapping: z
     .array(
       z.object({
@@ -59,8 +61,7 @@ const schema = z.object({
         value: z.string()
       })
     )
-    .optional()
-    .nullable(),
+    .default([]),
   boundSubject: z.string().optional().default("")
 });
 
@@ -105,7 +106,9 @@ export const IdentityOidcAuthForm = ({
       accessTokenTTL: "2592000",
       accessTokenMaxTTL: "2592000",
       accessTokenNumUsesLimit: "0",
-      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+      boundClaims: [],
+      claimMetadataMapping: []
     }
   });
   const {
@@ -172,7 +175,8 @@ export const IdentityOidcAuthForm = ({
         accessTokenTTL: "2592000",
         accessTokenMaxTTL: "2592000",
         accessTokenNumUsesLimit: "0",
-        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+        claimMetadataMapping: []
       });
     }
   }, [data]);
@@ -253,7 +257,9 @@ export const IdentityOidcAuthForm = ({
     <form
       onSubmit={handleSubmit(onFormSubmit, (fields) => {
         setTabValue(
-          ["accessTokenTrustedIps", "caCert", "boundClaims"].includes(Object.keys(fields)[0])
+          ["accessTokenTrustedIps", "caCert", "claimMetadataMapping"].includes(
+            Object.keys(fields)[0]
+          )
             ? IdentityFormTab.Advanced
             : IdentityFormTab.Configuration
         );
@@ -343,63 +349,6 @@ export const IdentityOidcAuthForm = ({
               </FormControl>
             )}
           />
-          <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="0" 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="0" 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>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          <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>
-            )}
-          />
           {boundClaimsFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -479,6 +428,65 @@ export const IdentityOidcAuthForm = ({
               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="0" 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="0" 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>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <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>
+            )}
+          />
+
           {claimMetadataMappingFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -488,12 +496,23 @@ export const IdentityOidcAuthForm = ({
                   return (
                     <FormControl
                       className="mb-0 flex-grow"
-                      label={index === 0 ? "Claim Metadata Mapping" : undefined}
+                      label={index === 0 ? "Token Claim Mapping" : undefined}
                       icon={
                         index === 0 ? (
                           <Tooltip
                             className="text-center"
-                            content="Map token claims to metadata. This can later be accessed in attribute based permission as identity.metadata.oidc.claims.<>."
+                            content={
+                              <div className="w-[180px]">
+                                <p>Map OIDC token claims to metadata fields</p>
+                                <p className="mt-2 text-sm">Example:</p>
+                                <p className="mt-1 text-sm">
+                                  &apos;role&apos; → &apos;token.groups&apos;
+                                </p>
+                                <p className="mt-1 text-xs text-gray-400">
+                                  Becomes: identity.metadata.oidc.claims.role
+                                </p>
+                              </div>
+                            }
                           >
                             <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
                           </Tooltip>
@@ -505,7 +524,7 @@ export const IdentityOidcAuthForm = ({
                       <Input
                         value={field.value}
                         onChange={(e) => field.onChange(e)}
-                        placeholder="property"
+                        placeholder="Field name"
                       />
                     </FormControl>
                   );
@@ -524,7 +543,7 @@ export const IdentityOidcAuthForm = ({
                       <Input
                         value={field.value}
                         onChange={(e) => field.onChange(e)}
-                        placeholder="key1.nested-key2"
+                        placeholder="Token claim"
                       />
                     </FormControl>
                   );
@@ -554,9 +573,10 @@ export const IdentityOidcAuthForm = ({
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               size="xs"
             >
-              Add Mapping
+              Add Token Mapping
             </Button>
           </div>
+
           {accessTokenTrustedIpsFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -627,24 +647,21 @@ export const IdentityOidcAuthForm = ({
           </div>
         </TabPanel>
       </Tabs>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
 
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          Cancel
-        </Button>
+      <div className="mt-8 flex justify-between">
+        <div className="flex items-center">
+          <Button
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="outline_bg"
+            className="mr-4"
+            isDisabled={isSubmitting}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" isLoading={isSubmitting}>
+            {isUpdate ? "Update" : "Add"} Auth Method
+          </Button>
+        </div>
       </div>
     </form>
   );