diff --git a/.changeset/thin-hounds-arrive.md b/.changeset/thin-hounds-arrive.md new file mode 100644 index 00000000000..48be283c444 --- /dev/null +++ b/.changeset/thin-hounds-arrive.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +In the component, if the newly created organization has max allowed membership equal to 1, skip the invitation page diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx index 205689d0a3a..e8d7a510d2c 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx +++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationPage.tsx @@ -23,7 +23,7 @@ export const CreateOrganizationPage = withCardStateProvider(() => { const inviteTitle = localizationKeys('organizationProfile.invitePage.title'); const card = useCardState(); const [file, setFile] = React.useState(); - const { createOrganization } = useCoreOrganizations(); + const { createOrganization, isLoaded } = useCoreOrganizations(); const { setActive, closeCreateOrganization } = useCoreClerk(); const { mode, navigateAfterCreateOrganization } = useCreateOrganizationContext(); const { organization } = useCoreOrganization(); @@ -51,11 +51,26 @@ export const CreateOrganizationPage = withCardStateProvider(() => { return; } - return createOrganization?.({ name: nameField.value, slug: slugField.value }) - .then(org => (file ? org.setLogo({ file }) : org)) - .then(org => setActive({ organization: org })) - .then(wizard.nextStep) - .catch(err => handleError(err, [nameField, slugField], card.setError)); + if (!isLoaded) { + return; + } + + try { + const organization = await createOrganization({ name: nameField.value, slug: slugField.value }); + if (file) { + await organization.setLogo({ file }); + } + + await setActive({ organization }); + + if (organization.maxAllowedMemberships === 1) { + return completeFlow(); + } + + wizard.nextStep(); + } catch (err) { + handleError(err, [nameField, slugField], card.setError); + } }; const completeFlow = () => {