Fix UI and UX Issues Around Clerk

clerk.middleware.ts

@@ -26,10 +26,7 @@ export default authMiddleware({
   publicRoutes: ["/", "/login", "/registration"]
 });
 
-const isClerkyAuth = process.env.NEXT_PUBLIC_AUTH_IS_CLERK === "true";
-
 export const config = {
-  matcher: isClerkyAuth
-    ? ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"]
-    : ["/no-paths-to-match"]
+  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
+  debug: true
 };

pages/_app.tsx

@@ -2,6 +2,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import { QueryClientProvider } from "@tanstack/react-query";
 import type { AppProps } from "next/app";
 import React from "react";
+import { Toaster } from "react-hot-toast";
 import useDetermineAuthSystem from "../src/components/Authentication/useDetermineAuthSystem";
 import SetupIntercom from "../src/components/Intercom/SetupIntercom";
 import { queryClient } from "../src/query-client";
@@ -12,6 +13,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <QueryClientProvider client={queryClient}>
+      <Toaster position="top-right" reverseOrder={false} />
       <SetupIntercom>
         <div
           id="root"

src/components/Authentication/Clerk/InstanceCreationInProgress.tsx

@@ -1,6 +1,7 @@
 import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
 import { Loading } from "../../Loading";
 import { HelpDropdown } from "../../../ui/MenuBar/HelpDropdown";
+import { clerkUrls } from "./ClerkAuthSessionChecker";
 
 export default function InstanceCreationInProgress() {
   return (
@@ -15,16 +16,23 @@ export default function InstanceCreationInProgress() {
         <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 items-end border-b border-gray-300">
+        <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>
-          <HelpDropdown />
-          <OrganizationSwitcher
-            hidePersonal
-            createOrganizationMode="modal"
-            afterSwitchOrganizationUrl="/"
-          />
-          <UserButton />
+          <div className="h-full flex flex-row gap-2 items-center justify-center">
+            <HelpDropdown />
+            <OrganizationSwitcher
+              hidePersonal
+              createOrganizationMode="modal"
+              afterSelectOrganizationUrl="/"
+              afterCreateOrganizationUrl="/"
+            />
+            <UserButton
+              afterSignOutUrl={clerkUrls.login}
+              afterMultiSessionSingleSignOutUrl={clerkUrls.login}
+              afterSwitchSessionUrl="/"
+            />
+          </div>
         </div>
         <div className="flex flex-col items-center justify-center flex-1 p-4">
           <Loading text="Please wait, instance provisioning in-progress ..." />

src/components/Authentication/Kratos/KratosLogin.tsx

@@ -4,10 +4,11 @@
 import Link from "next/link";
 import Router, { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
+import FullPageSkeletonLoader from "../../SkeletonLoader/FullPageSkeletonLoader";
+import { toastError } from "../../Toast/toast";
 import { Flow, HandleError } from "../../ory";
 import { SetUriFlow } from "../../ory/helpers";
 import ory from "../../ory/sdk";
-import FullPageSkeletonLoader from "../../SkeletonLoader/FullPageSkeletonLoader";
 
 const Login: NextPage = () => {
   const [returnTo, setReturnTo] = useState<string | undefined>();
@@ -46,7 +47,7 @@
         .getLoginFlow({ id })
         .then(({ data }) => setFlow(data))
         .catch(handleError),
     []
   );
 
   const handleError = useCallback(
@@ -102,6 +103,10 @@
         console.log("Login successful");
         setLoginSuccess(true);
         push(returnTo || "/");
+      })
+      .catch((error) => {
+        console.error(error);
+        toastError((error as AxiosError).message);
       });
 
   if (loginSucccess) {

src/components/Layout/SidebarLayout.tsx

@@ -2,7 +2,6 @@ import { Disclosure, Menu } from "@headlessui/react";
 import { ChevronUpIcon } from "@heroicons/react/outline";
 import clsx from "clsx";
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { IconType } from "react-icons";
 import { IoChevronForwardOutline } from "react-icons/io5";
 import { Link, NavLink, Outlet } from "react-router-dom";
@@ -12,11 +11,11 @@ import { $ArrayElemType } from "../../types/utility";
 import { AuthContext } from "../../context";
 import { useFeatureFlagsContext } from "../../context/FeatureFlagsContext";
 import { useOuterClick } from "../../lib/useOuterClick";
+import { features } from "../../services/permissions/features";
 import { getLocalItem, setLocalItem } from "../../utils/storage";
 import { withAccessCheck } from "../AccessCheck/AccessCheck";
 import { Icon } from "../Icon";
 import FullPageSkeletonLoader from "../SkeletonLoader/FullPageSkeletonLoader";
-import { features } from "../../services/permissions/features";
 
 interface Props {
   navigation: NavigationItems;
@@ -289,79 +288,76 @@ export function SidebarLayout({ navigation, settingsNav, checkPath }: Props) {
   }
 
   return (
-    <>
-      <Toaster position="top-right" reverseOrder={false} />
-      <div className="flex flex-row h-screen min-w-[1280px]">
+    <div className="flex flex-row h-screen min-w-[1280px]">
+      <div
+        className={clsx(
+          "transform duration-500 z-10 bg-gray-700 flex flex-col",
+          {
+            "w-56": !collapseSidebar,
+            "w-14": collapseSidebar
+          }
+        )}
+        ref={innerRef}
+      >
         <div
-          className={clsx(
-            "transform duration-500 z-10 bg-gray-700 flex flex-col",
-            {
-              "w-56": !collapseSidebar,
-              "w-14": collapseSidebar
-            }
-          )}
-          ref={innerRef}
+          className={clsx("flex flex-col h-full transform duration-500", {
+            "w-56": !collapseSidebar,
+            "w-14": collapseSidebar
+          })}
         >
-          <div
-            className={clsx("flex flex-col h-full transform duration-500", {
-              "w-56": !collapseSidebar,
-              "w-14": collapseSidebar
-            })}
+          <button
+            type="button"
+            className={clsx(
+              "absolute bg-white -right-6 top-20 border border-gray-300 rounded-full transform duration-500 m-2 p-1 hover:bg-gray-200",
+              { "rotate-180": !collapseSidebar }
+            )}
+            onClick={() => setCollapseSidebar((value) => !value)}
           >
-            <button
-              type="button"
-              className={clsx(
-                "absolute bg-white -right-6 top-20 border border-gray-300 rounded-full transform duration-500 m-2 p-1 hover:bg-gray-200",
-                { "rotate-180": !collapseSidebar }
-              )}
-              onClick={() => setCollapseSidebar((value) => !value)}
-            >
-              <IoChevronForwardOutline />
-            </button>
-
-            <Link
-              to={{
-                pathname: "/"
-              }}
-            >
-              {collapseSidebar ? (
-                <div className="flex border-b border-b-gray-500 h-16 shadow">
-                  <Icon
-                    name="mission-control-white"
-                    className="w-10 h-auto m-auto fill-white stroke-white"
-                  />
-                </div>
-              ) : (
-                <div className="p-3 pl-5 border-b border-b-gray-500 shadow">
-                  <Icon
-                    name="mission-control-logo-white"
-                    className="h-10 stroke-white"
-                  />
-                </div>
-              )}
-            </Link>
+            <IoChevronForwardOutline />
+          </button>
 
-            <div
-              className={clsx(
-                "flex flex-col flex-1 overflow-y-auto",
-                collapseSidebar ? "px-1" : "px-3"
-              )}
-            >
-              <div className="flex-grow mt-5 flex flex-col">
-                <SideNav
-                  navs={navigation}
-                  settings={settingsNav}
-                  collapseSidebar={collapseSidebar}
-                  checkPath={checkPath}
+          <Link
+            to={{
+              pathname: "/"
+            }}
+          >
+            {collapseSidebar ? (
+              <div className="flex border-b border-b-gray-500 h-16 shadow">
+                <Icon
+                  name="mission-control-white"
+                  className="w-10 h-auto m-auto fill-white stroke-white"
                 />
               </div>
+            ) : (
+              <div className="p-3 pl-5 border-b border-b-gray-500 shadow">
+                <Icon
+                  name="mission-control-logo-white"
+                  className="h-10 stroke-white"
+                />
+              </div>
+            )}
+          </Link>
+
+          <div
+            className={clsx(
+              "flex flex-col flex-1 overflow-y-auto",
+              collapseSidebar ? "px-1" : "px-3"
+            )}
+          >
+            <div className="flex-grow mt-5 flex flex-col">
+              <SideNav
+                navs={navigation}
+                settings={settingsNav}
+                collapseSidebar={collapseSidebar}
+                checkPath={checkPath}
+              />
             </div>
           </div>
         </div>
-        <div className="flex flex-col flex-1 h-screen overflow-auto bg-gray-50">
-          <Outlet />
-        </div>
       </div>
-    </>
+      <div className="flex flex-col flex-1 h-screen overflow-auto bg-gray-50">
+        <Outlet />
+      </div>
+    </div>
   );
 }