feat(clerk-js,shared,types): Remove invalid email addresses from input for Organization Invitation

.changeset/yellow-pumpkins-buy.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/types': patch
+---
+
+In invite members screen of the <OrganizationProfile /> component, consume any invalid email addresses as they are returned in the API error and remove them from the input automatically.

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

@@ -1,5 +1,5 @@
 import { isClerkAPIResponseError } from '@clerk/shared';
-import type { MembershipRole, OrganizationResource } from '@clerk/types';
+import type { ClerkAPIError, MembershipRole, OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { Flex, Text } from '../../customizables';
@@ -89,24 +89,29 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
  .inviteMembers({ emailAddresses: emailAddressField.value.split(','), role: roleField.value as MembershipRole })
  .then(onSuccess)
  .catch(err => {
+ if (isClerkAPIResponseError(err)) {
+ removeInvalidEmails(err.errors[0]);
+ }
+
  if (isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'duplicate_record') {
  const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses || [];
 
  // Create a localized list of email addresses
  const localizedList = createListFormat(unlocalizedEmailsList, locale);
  setLocalizedEmails(localizedList);
-
- // Remove any invalid email address
- const invalids = new Set(unlocalizedEmailsList);
- const emails = emailAddressField.value.split(',');
- emailAddressField.setValue(emails.filter(e => !invalids.has(e)).join(','));
  } else {
  setLocalizedEmails(null);
  handleError(err, [], card.setError);
  }
  });
  };
 
+ const removeInvalidEmails = (err: ClerkAPIError) => {
+ const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);
+ const emails = emailAddressField.value.split(',');
+ emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));
+ };
+
  return (
  <>
  {localizedEmails && (

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx

@@ -133,6 +133,65 @@ describe('InviteMembersPage', () => {
  ).toBeInTheDocument(),
  );
  });
+
+ it('removes duplicate emails from input after error', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ email_addresses: ['test@clerk.dev'],
+ organization_memberships: [{ name: 'Org1', role: 'admin' }],
+ });
+ });
+
+ fixtures.clerk.organization?.inviteMembers.mockRejectedValueOnce(
+ new ClerkAPIResponseError('Error', {
+ data: [
+ {
+ code: 'duplicate_record',
+ long_message:
+ 'There are already pending invitations for the following email addresses: invalid@clerk.dev',
+ message: 'duplicate invitation',
+ meta: { email_addresses: ['invalid@clerk.dev'] },
+ },
+ ],
+ status: 400,
+ }),
+ );
+ const { getByRole, userEvent, getByTestId } = render(<InviteMembersPage />, { wrapper });
+ await userEvent.type(getByTestId('tag-input'), 'invalid@clerk.dev');
+ await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+
+ expect(getByTestId('tag-input')).not.toHaveValue();
+ });
+
+ it('removes blocked/not allowed emails from input after error', async () => {
+ const { wrapper, fixtures } = await createFixtures(f => {
+ f.withOrganizations();
+ f.withUser({
+ email_addresses: ['test@clerk.dev'],
+ organization_memberships: [{ name: 'Org1', role: 'admin' }],
+ });
+ });
+
+ fixtures.clerk.organization?.inviteMembers.mockRejectedValueOnce(
+ new ClerkAPIResponseError('Error', {
+ data: [
+ {
+ code: 'not_allowed_access',
+ long_message: 'blocked@clerk.dev is not allowed to access this application.',
+ message: 'Access not allowed.',
+ meta: { identifiers: ['blocked@clerk.dev'] },
+ },
+ ],
+ status: 403,
+ }),
+ );
+ const { getByRole, userEvent, getByTestId } = render(<InviteMembersPage />, { wrapper });
+ await userEvent.type(getByTestId('tag-input'), 'blocked@clerk.dev');
+ await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+
+ expect(getByTestId('tag-input')).not.toHaveValue();
+ });
  });
 
  describe('Navigation', () => {

packages/shared/src/errors/Error.ts

@@ -60,6 +60,7 @@ export function parseError(error: ClerkAPIErrorJSON): ClerkAPIError {
  paramName: error?.meta?.param_name,
  sessionId: error?.meta?.session_id,
  emailAddresses: error?.meta?.email_addresses,
+ identifiers: error?.meta?.identifiers,
  zxcvbn: error?.meta?.zxcvbn,
  },
  };

packages/types/src/api.ts

@@ -9,6 +9,7 @@ export interface ClerkAPIError {
  paramName?: string;
  sessionId?: string;
  emailAddresses?: string[];
+ identifiers?: string[];
  zxcvbn?: {
  suggestions: {
  code: string;

packages/types/src/json.ts

@@ -267,6 +267,7 @@ export interface ClerkAPIErrorJSON {
  param_name?: string;
  session_id?: string;
  email_addresses?: string[];
+ identifiers?: string[];
  zxcvbn?: {
  suggestions: {
  code: string;