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 = () => {