fix: use modal to create/select org, after sign up/sign in

src/components/Authentication/Clerk/ClerkAuthSessionChecker.tsx

@@ -7,6 +7,7 @@ import { FeatureFlagsContextProvider } from "@flanksource-ui/context/FeatureFlag
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import FullPageSkeletonLoader from "../../../ui/SkeletonLoader/FullPageSkeletonLoader";
+import ClerkOrgModal from "./ClerkOrgModal";
 
 export const accountsUrl = process.env.NEXT_PUBLIC_ACCOUNTS_URL;
 export const clerkUrls = {
@@ -31,28 +32,6 @@ export default function ClerkAuthSessionChecker({ children }: Props) {
 
   const { push } = useRouter();
 
-  useEffect(() => {
-    if (isOrganizationLoaded && isOrganizationListLoaded && !organization) {
-      // we should redirect to the create organization page if the user is
-      // signed in and does not have an organization
-      if (userMemberships?.count === 0) {
-        // show the create organization modal
-        push(clerkUrls.createOrganization);
-        return;
-      }
-      // otherwise, we should redirect to the organization switcher page
-      // may be in the future, we should just display the organization switcher
-      // as a modal instead of redirecting
-      push(clerkUrls.organizationSwitcher);
-    }
-  }, [
-    isOrganizationListLoaded,
-    isOrganizationLoaded,
-    organization,
-    push,
-    userMemberships?.count
-  ]);
-
   useEffect(() => {
     if (isSessionLoaded && !isSignedIn) {
       window.location.href = clerkUrls.login;
@@ -68,6 +47,10 @@ export default function ClerkAuthSessionChecker({ children }: Props) {
     return <FullPageSkeletonLoader />;
   }
 
+  if (!organization) {
+    return <ClerkOrgModal />;
+  }
+
   // if the organization backend is not yet created, we need to wait for it to
   // be created
   // if (!organization?.publicMetadata?.created_at) {

src/components/Authentication/Clerk/ClerkLogin.tsx

@@ -13,7 +13,7 @@ export default function ClerkLogin() {
       path="/login"
       routing="path"
       signUpUrl="/registration"
-      fallbackRedirectUrl={`/?return_to=${redirectUrl}`}
+      forceRedirectUrl={`/?return_to=${redirectUrl}`}
     />
   );
 }

src/components/Authentication/Clerk/ClerkOrgModal.tsx

@@ -0,0 +1,36 @@
+import { OrganizationList, UserButton } from "@clerk/nextjs";
+import { HelpDropdown } from "../../../ui/MenuBar/HelpDropdown";
+import { clerkUrls } from "./ClerkAuthSessionChecker";
+
+export default function ClerkOrgModal() {
+  return (
+    <div className="h-screen w-screen flex flex-row">
+      <div className="flex flex-col w-56 pt-4 px-4 space-y-6 h-full bg-gray-50 border-r border-gray-300 animate-pulse">
+        <div className="w-full bg-gray-200 rounded-md h-12 "></div>
+        <div className="w-full bg-gray-200 rounded-md h-12"></div>
+        <div className="w-full bg-gray-200 rounded-md h-12"></div>
+        <div className="w-full bg-gray-200 rounded-md h-12"></div>
+        <div className="w-full bg-gray-200 rounded-md h-12 "></div>
+        <div className="w-full bg-gray-200 rounded-md h-12"></div>
+        <div className="w-full bg-gray-200 rounded-md h-12"></div>
+      </div>
+      <div className="flex flex-col flex-1 h-full">
+        <div className="flex flex-row h-auto w-full bg-gray-50 p-3 gap-4 justify-center items-end border-b border-gray-300">
+          <div className="w-36 bg-gray-200 h-full rounded-md animate-pulse"></div>
+          <div className="flex-1"></div>
+          <div className="h-full flex flex-row gap-2 items-center justify-center">
+            <HelpDropdown />
+            <UserButton signInUrl={clerkUrls.login} afterSwitchSessionUrl="/" />
+          </div>
+        </div>
+        <div className="flex flex-col items-center justify-center flex-1 p-4">
+          <OrganizationList
+            hidePersonal
+            afterSelectOrganizationUrl="/organizations/orgs-switched"
+            afterCreateOrganizationUrl="/organizations/orgs-switched"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Authentication/Clerk/ClerkRegistration.tsx

@@ -1,22 +1,25 @@
 import { SignUp } from "@clerk/nextjs";
 import { useRouter } from "next/router";
-import { clerkUrls } from "./ClerkAuthSessionChecker";
-import SignUpLayout from "./SignUpLayout";
 
 export default function ClerkRegistration() {
   const { query } = useRouter();
 
   const redirectUrl = query.redirectUrl ? query.return_to : undefined;
 
   return (
-    <SignUpLayout activeStep={1}>
-      <SignUp
-        path="/registration"
-        routing="path"
-        signInUrl="/login"
-        signInForceRedirectUrl={`/${clerkUrls.createOrganization}?return_to=${redirectUrl}`}
-        signInFallbackRedirectUrl={`/`}
-      />
-    </SignUpLayout>
+    <div className="w-full px-3 text-center flex flex-col">
+      <div className="flex flex-col mb-12">
+        <div className="flex flex-col items-center">
+          <SignUp
+            path="/registration"
+            routing="path"
+            signInUrl="/login"
+            signInForceRedirectUrl={
+              redirectUrl ? `/?return_to=${redirectUrl}` : undefined
+            }
+          />
+        </div>
+      </div>
+    </div>
   );
 }

src/components/Users/UserProfile.tsx

@@ -13,7 +13,7 @@ export function UserProfileDropdown() {
         afterSelectOrganizationUrl={`/organizations/orgs-switched`}
         afterCreateOrganizationUrl={`/organizations/orgs-switched`}
       />
-      <UserButton afterSignOutUrl="/login" />
+      <UserButton signInUrl="/login" />
     </div>
   ) : (
     <KratosUserProfileDropdown />