feat: added organization layout base with subscription and user loading

frontend-v2/src/components/auth/InitialSignupStep.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from "react-i18next";
-import { Link } from "@tanstack/react-router";
 import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
 
 import { RegionSelect } from "@app/components/navigation/RegionSelect";
 import { useServerConfig } from "@app/context";

frontend-v2/src/components/features/WishForm.tsx

@@ -0,0 +1,109 @@
+import { useForm } from "react-hook-form";
+import { faRocketchat } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  TextArea
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useCreateUserWish } from "@app/hooks/api/userEngagement";
+
+const formSchema = z.object({
+  text: z.string().trim().min(1)
+});
+
+type TFormData = z.infer<typeof formSchema>;
+
+export const WishForm = () => {
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { isSubmitting, errors }
+  } = useForm<TFormData>({
+    resolver: zodResolver(formSchema)
+  });
+  const { mutateAsync } = useCreateUserWish();
+  const [isOpen, setIsOpen] = useToggle(false);
+
+  const createWish = async (data: TFormData) => {
+    try {
+      await mutateAsync({
+        text: data.text
+      });
+
+      createNotification({
+        text: "Your wish has been sent to the Infisical team!",
+        type: "success"
+      });
+
+      setIsOpen.off();
+    } catch {
+      createNotification({
+        text: "An error occured while sending your wish to the Infisical team.",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Popover
+      onOpenChange={() => {
+        setIsOpen.toggle();
+        reset();
+      }}
+      open={isOpen}
+    >
+      <PopoverTrigger asChild>
+        <div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
+          <FontAwesomeIcon icon={faRocketchat} className="mr-2" />
+          Request a feature
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        hideCloseBtn
+        align="start"
+        alignOffset={20}
+        className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
+        sticky="always"
+      >
+        <form onSubmit={handleSubmit(createWish)}>
+          <FormControl
+            className="mb-0"
+            isError={Boolean(errors?.text)}
+            errorText={errors?.text?.message}
+          >
+            <TextArea
+              className="border border-mineshaft-600 bg-black/10 text-sm focus:ring-0"
+              variant="outline"
+              placeholder="Wish for anything! Help us improve the platform."
+              reSize="none"
+              rows={6}
+              cols={40}
+              {...register("text")}
+            />
+          </FormControl>
+          <div className="flex justify-end pt-2">
+            <Button
+              className="w-min"
+              colorSchema="secondary"
+              type="submit"
+              isLoading={isSubmitting}
+              disabled={isSubmitting}
+            >
+              Send
+            </Button>
+          </div>
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};

frontend-v2/src/components/navigation/NavHeader.tsx

@@ -1,9 +1,9 @@
 import { ParsedUrlQuery } from "querystring";
 
 import { useState } from "react";
-import { Link, useLocation, useNavigate } from "@tanstack/react-router";
 import { faAngleRight, faCheck, faCopy, faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useLocation, useNavigate } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
 import { useOrganization, useWorkspace } from "@app/context";

frontend-v2/src/components/navigation/RegionSelect.tsx

@@ -1,8 +1,8 @@
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useLocation, useNavigate } from "@tanstack/react-router";
 
 import { Modal, ModalContent, ModalTrigger, Select, SelectItem } from "@app/components/v2";
-import { useLocation, useNavigate } from "@tanstack/react-router";
 
 enum Region {
   US = "us",

frontend-v2/src/components/utilities/attemptLoginMfa.ts

@@ -27,7 +27,7 @@ const attemptLoginMfa = async ({
   password: string;
   providerAuthToken?: string;
   mfaToken: string;
-}): Promise<Boolean> => {
+}): Promise<boolean> => {
   return new Promise((resolve, reject) => {
     client.init(
       {

frontend-v2/src/components/utilities/cryptography/crypto.ts

@@ -1,6 +1,6 @@
 import argon2 from "argon2-browser/dist/argon2-bundled.min.js";
 import nacl from "tweetnacl";
-import { encodeBase64, decodeBase64, encodeUTF8, decodeUTF8 } from "tweetnacl-util";
+import { decodeBase64, decodeUTF8, encodeBase64, encodeUTF8 } from "tweetnacl-util";
 
 import aes from "./aes-256-gcm";
 

frontend-v2/src/components/v2/Accordion/Accordion.tsx

@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={twMerge(
-        "group flex h-11 flex-1 items-center justify-between py-2 px-4 outline-none hover:text-primary data-[state=open]:text-primary",
+        "group flex h-11 flex-1 items-center justify-between px-4 py-2 outline-none hover:text-primary data-[state=open]:text-primary",
         className
       )}
       {...props}
@@ -51,13 +51,13 @@ export const AccordionContent = forwardRef<
 >(({ children, className, ...props }, forwardedRef) => (
   <AccordionPrimitive.Content
     className={twMerge(
-      "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp",
+      "overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown",
       className
     )}
     {...props}
     ref={forwardedRef}
   >
-    <div className="py-2 px-4 text-sm">{children}</div>
+    <div className="px-4 py-2 text-sm">{children}</div>
   </AccordionPrimitive.Content>
 ));
 

frontend-v2/src/components/v2/Alert/Alert.tsx

@@ -5,7 +5,7 @@ import {
   faInfoCircle
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { type VariantProps, cva } from "cva";
+import { cva, type VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
 const alertVariants = cva(

frontend-v2/src/components/v2/CreatableSelect/CreatableSelect.tsx

@@ -38,7 +38,7 @@ export const CreatableSelect = <T,>({
         control: ({ isFocused }) =>
           twMerge(
             isFocused ? "border-primary-400/50" : "border-mineshaft-600 hover:border-gray-400",
-            "border w-full p-0.5 rounded-md text-mineshaft-200 font-inter bg-mineshaft-900 hover:cursor-pointer"
+            "w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 hover:cursor-pointer"
           ),
         placeholder: () => "text-mineshaft-400 text-sm pl-1 py-0.5",
         input: () => "pl-1 py-0.5",
@@ -58,7 +58,7 @@ export const CreatableSelect = <T,>({
           twMerge(
             isFocused && "bg-mineshaft-700 active:bg-mineshaft-600",
             isSelected && "text-mineshaft-200",
-            "hover:cursor-pointer text-xs px-3 py-2"
+            "px-3 py-2 text-xs hover:cursor-pointer"
           ),
         noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md"
       }}

frontend-v2/src/components/v2/Drawer/Drawer.tsx

@@ -59,7 +59,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
+              className="absolute right-6 top-4 rounded text-bunker-400 hover:text-bunker-50"
             >
               <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>

frontend-v2/src/components/v2/FilterableSelect/FilterableSelect.tsx

@@ -41,12 +41,12 @@ export const FilterableSelect = <T,>({
     }}
     classNames={{
       container: ({ isDisabled }) =>
-        twMerge("w-full text-sm font-inter", isDisabled && "!pointer-events-auto opacity-50"),
+        twMerge("w-full font-inter text-sm", isDisabled && "!pointer-events-auto opacity-50"),
       control: ({ isFocused, isDisabled }) =>
         twMerge(
-          isFocused ? "border-primary-400/50" : "border-mineshaft-600 ",
+          isFocused ? "border-primary-400/50" : "border-mineshaft-600",
-          `border w-full p-0.5 rounded-md text-mineshaft-200 font-inter bg-mineshaft-900 ${
+          `w-full rounded-md border bg-mineshaft-900 p-0.5 font-inter text-mineshaft-200 ${
-            isDisabled ? "!cursor-not-allowed" : "hover:border-gray-400 hover:cursor-pointer"
+            isDisabled ? "!cursor-not-allowed" : "hover:cursor-pointer hover:border-gray-400"
           } `
         ),
       placeholder: () =>
@@ -72,7 +72,7 @@ export const FilterableSelect = <T,>({
         twMerge(
           isFocused && "bg-mineshaft-700 active:bg-mineshaft-600",
           isSelected && "text-mineshaft-200",
-          "hover:cursor-pointer rounded text-xs px-3 py-2"
+          "rounded px-3 py-2 text-xs hover:cursor-pointer"
         ),
       noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md"
     }}

frontend-v2/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx

@@ -294,7 +294,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
           }}
         >
           <div
-            className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md text-white"
+            className="h-full w-full max-w-60 flex-col items-center justify-center rounded-md text-white"
             ref={popoverContentRef}
           >
             {suggestions.map((item, i) => {

frontend-v2/src/components/v2/Modal/Modal.tsx

@@ -40,7 +40,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
+            "thin-scrollbar fixed left-1/2 top-1/2 z-30 max-w-xl -translate-x-2/4 -translate-y-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
             className
           )}
           style={{ maxHeight: "90%" }}
@@ -57,7 +57,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             <IconButton
               variant="plain"
               ariaLabel="close"
-              className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
+              className="absolute right-6 top-4 rounded text-bunker-400 hover:text-bunker-50"
             >
               <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
             </IconButton>

frontend-v2/src/components/v2/NoticeBanner/NoticeBanner.tsx

@@ -4,23 +4,23 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 type Props = {
-	icon?: IconDefinition;
+  icon?: IconDefinition;
-	title: string;
+  title: string;
-	children: ReactNode;
+  children: ReactNode;
-	className?: string;
+  className?: string;
 };
 
 export const NoticeBanner = ({ icon = faWarning, title, children, className }: Props) => (
-	<div
+  <div
-		className={twMerge(
+    className={twMerge(
-			"flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
+      "flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
-			className
+      className
-		)}
+    )}
-	>
+  >
-		<FontAwesomeIcon icon={icon} className="pr-6 text-4xl text-white/80" />
+    <FontAwesomeIcon icon={icon} className="pr-6 text-4xl text-white/80" />
-		<div className="flex w-full flex-col text-sm">
+    <div className="flex w-full flex-col text-sm">
-			<div className="mb-2 text-lg font-semibold">{title}</div>
+      <div className="mb-2 text-lg font-semibold">{title}</div>
-			<div>{children}</div>
+      <div>{children}</div>
-		</div>
+    </div>
-	</div>
+  </div>
 );

frontend-v2/src/components/v2/Pagination/Pagination.tsx

@@ -49,7 +49,7 @@ export const Pagination = ({
   return (
     <div
       className={twMerge(
-        "flex w-full items-center justify-end border-t border-mineshaft-600 bg-mineshaft-800 py-3 px-4 text-white",
+        "flex w-full items-center justify-end border-t border-mineshaft-600 bg-mineshaft-800 px-4 py-3 text-white",
         className
       )}
     >

frontend-v2/src/components/v2/Popover/Popover.tsx

@@ -21,7 +21,7 @@ export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) =>
     </Popover.Trigger>
     <Popover.Portal>
       <Popover.Content
-        className="z-[100] min-h-fit w-[460px] rounded border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        className="z-[100] min-h-fit w-[460px] rounded border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
         sideOffset={5}
         hideWhenDetached
         side="left"
@@ -32,13 +32,13 @@ export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) =>
             onChange={(e) => onChangeHandler(e.target.value, id)}
             // type={type}
             value={text}
-            className="ph-no-capture placeholder peer z-10 h-[20rem] w-full rounded-md border border-mineshaft-500 bg-bunker-600 py-2.5 px-2 text-sm text-bunker-300 caret-bunker-200 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent dark:[color-scheme:dark]"
+            className="ph-no-capture placeholder peer z-10 h-[20rem] w-full rounded-md border border-mineshaft-500 bg-bunker-600 px-2 py-2.5 text-sm text-bunker-300 caret-bunker-200 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent dark:[color-scheme:dark]"
             spellCheck="false"
             placeholder="–"
           />
         </div>
         <Popover.Close
-          className="hover:bg-violet4 focus:shadow-violet7 absolute top-[5px] right-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-none hover:text-white focus:shadow-[0_0_0_2px]"
+          className="hover:bg-violet4 focus:shadow-violet7 absolute right-[5px] top-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-none hover:text-white focus:shadow-[0_0_0_2px]"
           aria-label="Close"
         >
           <FontAwesomeIcon icon={faXmark} />

frontend-v2/src/components/v2/Popoverv2/Popoverv2.tsx

@@ -44,7 +44,7 @@ export const PopoverContent = ({
           <IconButton
             variant="plain"
             ariaLabel="close"
-            className="absolute top-0 right-1 rounded text-bunker-400 hover:text-bunker-50"
+            className="absolute right-1 top-0 rounded text-bunker-400 hover:text-bunker-50"
           >
             <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
           </IconButton>

frontend-v2/src/components/v2/SecretInput/SecretInput.tsx

@@ -78,8 +78,8 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         style={{ maxHeight: `${21 * 7}px` }}
       >
         <div className="relative overflow-hidden">
-          <pre aria-hidden className="m-0 ">
+          <pre aria-hidden className="m-0">
-            <code className={`inline-block w-full  ${commonClassName}`}>
+            <code className={`inline-block w-full ${commonClassName}`}>
               <span style={{ whiteSpace: "break-spaces" }}>
                 {syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
               </span>

frontend-v2/src/components/v2/Select/Select.tsx

@@ -52,8 +52,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <SelectPrimitive.Trigger
             ref={ref}
             className={twMerge(
-              `inline-flex items-center justify-between rounded-md border border-mineshaft-600
+              "inline-flex items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-400",
-            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-400`,
               className,
               isDisabled && "cursor-not-allowed opacity-50"
             )}
@@ -123,9 +122,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <SelectPrimitive.Item
         {...props}
         className={twMerge(
-          `relative mb-0.5 flex
+          "relative mb-0.5 flex cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
-          cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md py-2
-          pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
           isSelected && "bg-primary",
           isDisabled && "cursor-not-allowed text-gray-600 opacity-80 hover:!bg-transparent",
           className
@@ -160,9 +157,7 @@ export const SelectClear = forwardRef<HTMLDivElement, SelectClearProps>(
         onSelect={() => onClear()}
         onClick={() => onClear()}
         className={twMerge(
-          `relative mb-0.5 flex
+          "relative mb-0.5 flex cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
-          cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
-          outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
           isSelected && "bg-primary",
           isDisabled &&
             "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",

frontend-v2/src/components/v2/Table/Table.tsx

@@ -101,7 +101,7 @@ export type ThProps = {
 export const Th = ({ children, className }: ThProps): JSX.Element => (
   <th
     className={twMerge(
-      "border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pt-4 pb-3.5 font-semibold",
+      "border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pb-3.5 pt-4 font-semibold",
       className
     )}
   >

frontend-v2/src/components/v2/Tabs/Tabs.tsx

@@ -13,7 +13,7 @@ export type TabListProps = TabsPrimitive.TabsListProps;
 
 export const TabList = ({ className, children, ...props }: TabListProps) => (
   <TabsPrimitive.List
-    className={twMerge("flex flex-shrink-0  border-b-2 border-mineshaft-800", className)}
+    className={twMerge("flex flex-shrink-0 border-b-2 border-mineshaft-800", className)}
     {...props}
   >
     {children}

frontend-v2/src/components/v2/Tooltip/Tooltip.tsx

@@ -45,16 +45,11 @@ export const Tooltip = ({
         sideOffset={5}
         {...props}
         className={twMerge(
-          `z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md 
+          "z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
-        data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
-        data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
-        data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
-        data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
-      `,
           isDisabled && "!hidden",
           center && "text-center",
-          size === "sm" && "rounded-sm py-1 px-2 text-xs",
+          size === "sm" && "rounded-sm px-2 py-1 text-xs",
-          size === "md" && "rounded-md py-2 px-4 text-sm",
+          size === "md" && "rounded-md px-4 py-2 text-sm",
           className
         )}
       >

frontend-v2/src/components/v2/projects/NewProjectModal.tsx

@@ -301,7 +301,7 @@ const NewProjectForm = ({ onOpenChange }: NewProjectFormProps) => {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        <div className="absolute right-0 bottom-0 mr-6 mb-6 flex items-start justify-end">
+        <div className="absolute bottom-0 right-0 mb-6 mr-6 flex items-start justify-end">
           <ModalClose>
             <Button colorSchema="secondary" variant="plain" className="py-2">
               Cancel

frontend-v2/src/config/request.ts

@@ -3,9 +3,8 @@ import axios from "axios";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { getAuthToken, getMfaTempToken, getSignupTempToken } from "@app/hooks/api/reactQuery";
 
-// TODO(rbr): update this later
 export const apiRequest = axios.create({
-  baseURL: "http://localhost:8080",
+  baseURL: "/",
   headers: {
     "Content-Type": "application/json"
   }

frontend-v2/src/context/OrganizationContext/OrganizationContext.tsx

@@ -2,6 +2,7 @@ import { createContext, ReactNode, useContext, useMemo } from "react";
 
 import { useGetOrganizations } from "@app/hooks/api";
 import { Organization } from "@app/hooks/api/types";
+import { useRouteContext } from "@tanstack/react-router";
 
 type TOrgContext = {
   orgs?: Organization[];
@@ -35,10 +36,10 @@ export const OrgProvider = ({ children }: Props): JSX.Element => {
 };
 
 export const useOrganization = () => {
-  const ctx = useContext(OrgContext);
+  const currentOrg = useRouteContext({
-  if (!ctx) {
+    from: "/_authenticate/_org_details",
-    throw new Error("useOrganization to be used within <OrgContext.Provider>");
+    select: (el) => el.organization
-  }
+  });
 
-  return ctx;
+  return { currentOrg };
 };

frontend-v2/src/context/ServerConfigContext/ServerConfigContext.tsx

@@ -1,10 +1,10 @@
 import { createContext, ReactNode, useEffect, useMemo } from "react";
+import { Helmet } from "react-helmet";
+import { useNavigate, useRouteContext } from "@tanstack/react-router";
 
 import { ContentLoader } from "@app/components/v2/ContentLoader";
 import { useGetServerConfig } from "@app/hooks/api";
 import { TServerConfig } from "@app/hooks/api/admin/types";
-import { Helmet } from "react-helmet";
-import { useNavigate, useRouteContext } from "@tanstack/react-router";
 
 type TServerConfigContext = {
   config: TServerConfig;

frontend-v2/src/context/SubscriptionContext/SubscriptionContext.tsx

@@ -4,6 +4,7 @@ import { useGetOrgSubscription } from "@app/hooks/api";
 import { SubscriptionPlan } from "@app/hooks/api/types";
 
 import { useOrganization } from "../OrganizationContext";
+import { useRouteContext } from "@tanstack/react-router";
 
 type TSubscriptionContext = {
   subscription?: SubscriptionPlan;
@@ -36,10 +37,10 @@ export const SubscriptionProvider = ({ children }: Props): JSX.Element => {
 };
 
 export const useSubscription = () => {
-  const ctx = useContext(SubscriptionContext);
+  const subscription = useRouteContext({
-  if (!ctx) {
+    from: "/_authenticate/_org_details",
-    throw new Error("useSubscription has to be used within <SubscriptionContext.Provider>");
+    select: (el) => el.subscription
-  }
+  });
 
-  return ctx;
+  return { subscription };
 };

frontend-v2/src/context/UserContext/UserContext.tsx

@@ -2,6 +2,7 @@ import { createContext, ReactNode, useContext, useMemo } from "react";
 
 import { useGetUser } from "@app/hooks/api";
 import { User, UserEnc } from "@app/hooks/api/types";
+import { useRouteContext } from "@tanstack/react-router";
 
 type TUserContext = {
   user: User & UserEnc;
@@ -44,10 +45,7 @@ export const UserProvider = ({ children }: Props): JSX.Element => {
 };
 
 export const useUser = () => {
-  const ctx = useContext(UserContext);
+  const user = useRouteContext({ from: "/_authenticate", select: (el) => el.user })!;
-  if (!ctx) {
-    throw new Error("useUser has to be used within <UserContext.Provider>");
-  }
 
-  return ctx;
+  return { user };
 };

frontend-v2/src/context/WorkspaceContext/WorkspaceContext.tsx

@@ -1,9 +1,9 @@
 import { createContext, ReactNode, useContext, useEffect, useMemo } from "react";
+import { useParams } from "@tanstack/react-router";
 
 import { createNotification } from "@app/components/notifications";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { Workspace } from "@app/hooks/api/workspace/types";
-import { useParams } from "@tanstack/react-router";
 
 type TWorkspaceContext = {
   workspaces: Workspace[];

frontend-v2/src/helpers/parseEnvVar.ts

@@ -1,31 +1,31 @@
-/** Extracts the key and value from a passed in env string based on the provided delimiters. */
+/** Extracts the key and value from a passed in env string based on the provided delimiters. */
-export const getKeyValue = (pastedContent: string, delimiters: string[]) => {
+export const getKeyValue = (pastedContent: string, delimiters: string[]) => {
-  if (!pastedContent) {
+  if (!pastedContent) {
-    return { key: "", value: "" };
+    return { key: "", value: "" };
-  }
+  }
-
+
-  let firstDelimiterIndex = -1;
+  let firstDelimiterIndex = -1;
-  let foundDelimiter = "";
+  let foundDelimiter = "";
-
+
-  delimiters.forEach((delimiter) => {
+  delimiters.forEach((delimiter) => {
-    const index = pastedContent.indexOf(delimiter);
+    const index = pastedContent.indexOf(delimiter);
-    if (index !== -1 && (firstDelimiterIndex === -1 || index < firstDelimiterIndex)) {
+    if (index !== -1 && (firstDelimiterIndex === -1 || index < firstDelimiterIndex)) {
-      firstDelimiterIndex = index;
+      firstDelimiterIndex = index;
-      foundDelimiter = delimiter;
+      foundDelimiter = delimiter;
-    }
+    }
-  });
+  });
-
+
-  const hasValueAfterDelimiter = pastedContent.length > firstDelimiterIndex + foundDelimiter.length;
+  const hasValueAfterDelimiter = pastedContent.length > firstDelimiterIndex + foundDelimiter.length;
-
+
-  if (firstDelimiterIndex === -1 || !hasValueAfterDelimiter) {
+  if (firstDelimiterIndex === -1 || !hasValueAfterDelimiter) {
-    return { key: pastedContent.trim(), value: "" };
+    return { key: pastedContent.trim(), value: "" };
-  }
+  }
-
+
-  const key = pastedContent.substring(0, firstDelimiterIndex);
+  const key = pastedContent.substring(0, firstDelimiterIndex);
-  const value = pastedContent.substring(firstDelimiterIndex + foundDelimiter.length);
+  const value = pastedContent.substring(firstDelimiterIndex + foundDelimiter.length);
-
+
-  return {
+  return {
-    key: key.trim(),
+    key: key.trim(),
-    value: value.trim()
+    value: value.trim()
-  };
+  };
-};
+};

frontend-v2/src/helpers/policies.ts

@@ -9,4 +9,4 @@ export const policyDetails: Record<PolicyType, { name: string; className: string
     className: "bg-indigo-900 text-indigo-100",
     name: "Change Policy"
   }
-};
+};

frontend-v2/src/helpers/string.ts

@@ -12,4 +12,3 @@ export const isValidPath = (val: string): boolean => {
   const validPathRegex = /^[a-zA-Z0-9-_.:]+(?:\/[a-zA-Z0-9-_.:]+)*$/;
   return validPathRegex.test(val);
 };
-

frontend-v2/src/hooks/api/auditLogStreams/queries.tsx

@@ -5,36 +5,36 @@ import { apiRequest } from "@app/config/request";
 import { TAuditLogStream } from "./types";
 
 export const auditLogStreamKeys = {
-	list: (orgId: string) => ["audit-log-stream", { orgId }],
+  list: (orgId: string) => ["audit-log-stream", { orgId }],
-	getById: (id: string) => ["audit-log-stream-details", { id }]
+  getById: (id: string) => ["audit-log-stream-details", { id }]
 };
 
 const fetchAuditLogStreams = async () => {
-	const { data } = await apiRequest.get<{ auditLogStreams: TAuditLogStream[] }>(
+  const { data } = await apiRequest.get<{ auditLogStreams: TAuditLogStream[] }>(
-		"/api/v1/audit-log-streams"
+    "/api/v1/audit-log-streams"
-	);
+  );
 
-	return data.auditLogStreams;
+  return data.auditLogStreams;
 };
 
 export const useGetAuditLogStreams = (orgId: string) =>
-	useQuery({
+  useQuery({
-		queryKey: auditLogStreamKeys.list(orgId),
+    queryKey: auditLogStreamKeys.list(orgId),
-		queryFn: () => fetchAuditLogStreams(),
+    queryFn: () => fetchAuditLogStreams(),
-		enabled: Boolean(orgId)
+    enabled: Boolean(orgId)
-	});
+  });
 
 const fetchAuditLogStreamDetails = async (id: string) => {
-	const { data } = await apiRequest.get<{ auditLogStream: TAuditLogStream }>(
+  const { data } = await apiRequest.get<{ auditLogStream: TAuditLogStream }>(
-		`/api/v1/audit-log-streams/${id}`
+    `/api/v1/audit-log-streams/${id}`
-	);
+  );
 
-	return data.auditLogStream;
+  return data.auditLogStream;
 };
 
 export const useGetAuditLogStreamDetails = (id: string) =>
-	useQuery({
+  useQuery({
-		queryKey: auditLogStreamKeys.getById(id),
+    queryKey: auditLogStreamKeys.getById(id),
-		queryFn: () => fetchAuditLogStreamDetails(id),
+    queryFn: () => fetchAuditLogStreamDetails(id),
-		enabled: Boolean(id)
+    enabled: Boolean(id)
-	});
+  });

frontend-v2/src/hooks/api/auth/queries.tsx

@@ -2,9 +2,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { apiRequest } from "@app/config/request";
-import { setAuthToken } from "../reactQuery";
 
 import { organizationKeys } from "../organization/queries";
+import { setAuthToken } from "../reactQuery";
 import { workspaceKeys } from "../workspace";
 import {
   ChangePasswordDTO,
@@ -31,7 +31,7 @@ import {
   VerifySignupInviteDTO
 } from "./types";
 
-const authKeys = {
+export const authKeys = {
   getAuthToken: ["token"] as const
 };
 
@@ -301,7 +301,7 @@ export const useChangePassword = () => {
 
 // Refresh token is set as cookie when logged in
 // Using that we fetch the auth bearer token needed for auth calls
-const fetchAuthToken = async () => {
+export const fetchAuthToken = async () => {
   const { data } = await apiRequest.post<GetAuthTokenAPI>("/api/v1/auth/token", undefined, {
     withCredentials: true
   });

frontend-v2/src/hooks/api/auth/types.ts

@@ -1,5 +1,6 @@
 export type GetAuthTokenAPI = {
   token: string;
+  organizationId?: string;
 };
 
 export type SendMfaTokenDTO = {

frontend-v2/src/hooks/api/ca/index.tsx

@@ -8,4 +8,11 @@ export {
   useSignIntermediate,
   useUpdateCa
 } from "./mutations";
-export { useGetCaById, useGetCaCert, useGetCaCerts, useGetCaCertTemplates,useGetCaCrls, useGetCaCsr } from "./queries";
+export {
+  useGetCaById,
+  useGetCaCert,
+  useGetCaCerts,
+  useGetCaCertTemplates,
+  useGetCaCrls,
+  useGetCaCsr
+} from "./queries";

frontend-v2/src/hooks/api/ca/queries.tsx

@@ -104,4 +104,4 @@ export const useGetCaCertTemplates = (caId: string) => {
     },
     enabled: Boolean(caId)
   });
-};
+};

frontend-v2/src/hooks/api/dynamicSecret/queries.ts

@@ -80,12 +80,12 @@ export const useGetDynamicSecretProviderData = ({
   tenantId: string;
   applicationId: string;
   clientSecret: string;
-  enabled: boolean
+  enabled: boolean;
 }) => {
   return useQuery({
     queryKey: ["users"],
     queryFn: async () => {
-      const { data } = await apiRequest.post<{id:string, email: string, name:string}[]>(
+      const { data } = await apiRequest.post<{ id: string; email: string; name: string }[]>(
         "/api/v1/dynamic-secrets/entra-id/users",
         {
           tenantId,

frontend-v2/src/hooks/api/dynamicSecretLease/queries.ts

@@ -17,7 +17,12 @@ export const useGetDynamicSecretLeases = ({
   enabled = true
 }: TListDynamicSecretLeaseDTO) => {
   return useQuery({
-    queryKey: dynamicSecretLeaseKeys.list({ path, environmentSlug, projectSlug, dynamicSecretName }),
+    queryKey: dynamicSecretLeaseKeys.list({
+      path,
+      environmentSlug,
+      projectSlug,
+      dynamicSecretName
+    }),
     enabled: Boolean(projectSlug && environmentSlug && path && dynamicSecretName && enabled),
     queryFn: async () => {
       const { data } = await apiRequest.get<{ leases: TDynamicSecretLease[] }>(
@@ -35,5 +40,3 @@ export const useGetDynamicSecretLeases = ({
     }
   });
 };
-
-

frontend-v2/src/hooks/api/dynamicSecretLease/types.ts

@@ -46,4 +46,3 @@ export type TRevokeDynamicSecretLeaseDTO = {
   environmentSlug: string;
   isForced?: boolean;
 };
-

frontend-v2/src/hooks/api/ldapConfig/index.tsx

@@ -3,5 +3,6 @@ export {
   useCreateLDAPGroupMapping,
   useDeleteLDAPGroupMapping,
   useTestLDAPConnection,
-  useUpdateLDAPConfig} from "./mutations";
+  useUpdateLDAPConfig
+} from "./mutations";
 export { useGetLDAPConfig, useGetLDAPGroupMaps } from "./queries";

frontend-v2/src/hooks/api/organization/queries.tsx

@@ -41,7 +41,8 @@ export const organizationKeys = {
   }: TListOrgIdentitiesDTO) =>
     [...organizationKeys.getOrgIdentityMemberships(orgId), params] as const,
   getOrgGroups: (orgId: string) => [{ orgId }, "organization-groups"] as const,
-  getOrgIntegrationAuths: (orgId: string) => [{ orgId }, "integration-auths"] as const
+  getOrgIntegrationAuths: (orgId: string) => [{ orgId }, "integration-auths"] as const,
+  getOrgById: (orgId: string) => ["org-by-id", { orgId }]
 };
 
 export const fetchOrganizations = async () => {
@@ -60,6 +61,22 @@ export const useGetOrganizations = () => {
   });
 };
 
+export const fetchOrganizationById = async (id: string) => {
+  const {
+    data: { organization }
+  } = await apiRequest.get<{ organization: Organization }>(`/api/v1/organization/${id}`);
+  return organization;
+};
+
+export const useGetOrganizationById = (id: string) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgById(id),
+    queryFn: async () => {
+      return fetchOrganizationById(id);
+    }
+  });
+};
+
 export const useCreateOrg = (options: { invalidate: boolean } = { invalidate: true }) => {
   const queryClient = useQueryClient();
 

frontend-v2/src/hooks/api/pkiCollections/index.tsx

@@ -3,5 +3,6 @@ export {
   useCreatePkiCollection,
   useDeletePkiCollection,
   useRemoveItemFromPkiCollection,
-  useUpdatePkiCollection} from "./mutations";
+  useUpdatePkiCollection
+} from "./mutations";
 export { useGetPkiCollectionById, useListPkiCollectionItems } from "./queries";

frontend-v2/src/hooks/api/policies/enums.ts

@@ -1,9 +1,9 @@
 export enum EnforcementLevel {
-    Hard = "hard",
+  Hard = "hard",
-    Soft = "soft"
+  Soft = "soft"
 }
 
 export enum PolicyType {
-    ChangePolicy = "change",
+  ChangePolicy = "change",
-    AccessPolicy = "access"
+  AccessPolicy = "access"
 }

frontend-v2/src/hooks/api/secretApproval/types.ts

@@ -14,15 +14,15 @@ export type TSecretApprovalPolicy = {
   enforcementLevel: EnforcementLevel;
 };
 
-export enum ApproverType{
+export enum ApproverType {
   User = "user",
   Group = "group"
 }
 
-export type Approver ={
+export type Approver = {
   id: string;
   type: ApproverType;
-}
+};
 
 export type TGetSecretApprovalPoliciesDTO = {
   workspaceId: string;

frontend-v2/src/hooks/api/secrets/index.ts

@@ -12,4 +12,5 @@ export {
   useGetProjectSecrets,
   useGetProjectSecretsAllEnv,
   useGetSecretReferenceTree,
-  useGetSecretVersion} from "./queries";
+  useGetSecretVersion
+} from "./queries";

frontend-v2/src/hooks/api/subscriptions/queries.tsx

@@ -6,11 +6,11 @@ import { SubscriptionPlan } from "./types";
 
 // import { Workspace } from './types';
 
-const subscriptionKeys = {
+export const subscriptionQueryKeys = {
   getOrgSubsription: (orgID: string) => ["plan", { orgID }] as const
 };
 
-const fetchOrgSubscription = async (orgID: string) => {
+export const fetchOrgSubscription = async (orgID: string) => {
   const { data } = await apiRequest.get<{ plan: SubscriptionPlan }>(
     `/api/v1/organizations/${orgID}/plan`
   );
@@ -24,7 +24,7 @@ type UseGetOrgSubscriptionProps = {
 
 export const useGetOrgSubscription = ({ orgID }: UseGetOrgSubscriptionProps) =>
   useQuery({
-    queryKey: subscriptionKeys.getOrgSubsription(orgID),
+    queryKey: subscriptionQueryKeys.getOrgSubsription(orgID),
     queryFn: () => fetchOrgSubscription(orgID),
     enabled: Boolean(orgID)
   });

frontend-v2/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -0,0 +1,508 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
+import {
+  faAngleDown,
+  faArrowUpRightFromSquare,
+  faBook,
+  faCheck,
+  faEnvelope,
+  faInfinity,
+  faInfo,
+  faMobile,
+  faPlus,
+  faQuestion
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+
+import SecurityClient from "@app/components/utilities/SecurityClient";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Menu,
+  MenuItem
+} from "@app/components/v2";
+import { useOrganization, useSubscription, useUser } from "@app/context";
+import { usePopUp, useToggle } from "@app/hooks";
+import {
+  useGetOrganizations,
+  useGetOrgTrialUrl,
+  useLogoutUser,
+  useSelectOrganization
+} from "@app/hooks/api";
+import { MfaMethod } from "@app/hooks/api/auth/types";
+import { AuthMethod } from "@app/hooks/api/users/types";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { InsecureConnectionBanner } from "./components/InsecureConnectionBanner";
+// import { navigateUserToOrg } from "@app/views/Login/Login.utils";
+// import { CreateOrgModal } from "@app/views/Org/components";
+
+import { WishForm } from "@app/components/features/WishForm";
+import { Mfa } from "@app/components/auth/Mfa";
+import { Link, Outlet, useNavigate } from "@tanstack/react-router";
+
+const supportOptions = [
+  [
+    <FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
+    "Support Forum",
+    "https://infisical.com/slack"
+  ],
+  [
+    <FontAwesomeIcon key={2} className="pr-4 text-sm" icon={faBook} />,
+    "Read Docs",
+    "https://infisical.com/docs/documentation/getting-started/introduction"
+  ],
+  [
+    <FontAwesomeIcon key={3} className="pr-4 text-sm" icon={faGithub} />,
+    "GitHub Issues",
+    "https://github.com/Infisical/infisical/issues"
+  ],
+  [
+    <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
+    "Email Support",
+    "mailto:[email protected]"
+  ]
+];
+
+export const OrganizationLayout = () => {
+  const navigate = useNavigate();
+
+  const { mutateAsync } = useGetOrgTrialUrl();
+
+  const { currentOrg } = useOrganization();
+  const { data: orgs } = useGetOrganizations();
+
+  const [shouldShowMfa, toggleShowMfa] = useToggle(false);
+  const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL);
+  const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
+
+  const { user } = useUser();
+  const { subscription } = useSubscription();
+
+  const infisicalPlatformVersion = process.env.NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION;
+
+  const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
+
+  const { t } = useTranslation();
+
+  const { mutateAsync: selectOrganization } = useSelectOrganization();
+
+  const logout = useLogoutUser();
+  const logOutUser = async () => {
+    try {
+      console.log("Logging out...");
+      await logout.mutateAsync();
+      navigate({ to: "/login" });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const changeOrg = async (orgId: string) => {
+    const { token, isMfaEnabled, mfaMethod } = await selectOrganization({
+      organizationId: orgId
+    });
+
+    if (isMfaEnabled) {
+      SecurityClient.setMfaToken(token);
+      if (mfaMethod) {
+        setRequiredMfaMethod(mfaMethod);
+      }
+      toggleShowMfa.on();
+      setMfaSuccessCallback(() => () => changeOrg(orgId));
+      return;
+    }
+
+    // await navigateUserToOrg(router, orgId);
+  };
+
+  if (shouldShowMfa) {
+    return (
+      <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
+        <Mfa
+          email={user.email as string}
+          method={requiredMfaMethod}
+          successCallback={mfaSuccessCallback}
+          closeMfa={() => toggleShowMfa.off()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+        {!window.isSecureContext && <InsecureConnectionBanner />}
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+          <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
+            <nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
+              <div>
+                <div className="flex h-12 cursor-default items-center px-3 pt-6">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      asChild
+                      className="max-w-[160px] data-[state=open]:bg-mineshaft-600"
+                    >
+                      <div className="mr-auto flex items-center rounded-md py-1.5 pl-1.5 pr-2 hover:bg-mineshaft-600">
+                        <div className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-md bg-primary text-sm">
+                          {currentOrg?.name.charAt(0)}
+                        </div>
+                        <div
+                          className="overflow-hidden truncate text-ellipsis pl-2 text-sm text-mineshaft-100"
+                          style={{ maxWidth: "140px" }}
+                        >
+                          {currentOrg?.name}
+                        </div>
+                        <FontAwesomeIcon
+                          icon={faAngleDown}
+                          className="pl-1 pt-1 text-xs text-mineshaft-300"
+                        />
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="p-1">
+                      <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.username}</div>
+                      {orgs?.map((org) => {
+                        return (
+                          <DropdownMenuItem key={org.id}>
+                            <Button
+                              onClick={async () => {
+                                if (currentOrg?.id === org.id) return;
+
+                                if (org.authEnforced) {
+                                  // org has an org-level auth method enabled (e.g. SAML)
+                                  // -> logout + redirect to SAML SSO
+
+                                  await logout.mutateAsync();
+                                  if (org.orgAuthMethod === AuthMethod.OIDC) {
+                                    window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
+                                  } else {
+                                    window.open(
+                                      `/api/v1/sso/redirect/saml2/organizations/${org.slug}`
+                                    );
+                                  }
+                                  window.close();
+                                  return;
+                                }
+
+                                changeOrg(org?.id);
+                              }}
+                              variant="plain"
+                              colorSchema="secondary"
+                              size="xs"
+                              className="flex w-full items-center justify-start p-0 font-normal"
+                              leftIcon={
+                                currentOrg?.id === org.id && (
+                                  <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
+                                )
+                              }
+                            >
+                              <div className="flex w-full max-w-[150px] items-center justify-between truncate">
+                                {org.name}
+                              </div>
+                            </Button>
+                          </DropdownMenuItem>
+                        );
+                      })}
+
+                      <div className="mt-1 h-1 border-t border-mineshaft-600" />
+                      <button type="button" onClick={logOutUser} className="w-full">
+                        <DropdownMenuItem>Log Out</DropdownMenuItem>
+                      </button>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      asChild
+                      className="p-1 hover:bg-primary-400 hover:text-black data-[state=open]:bg-primary-400 data-[state=open]:text-black"
+                    >
+                      <div
+                        className="child flex items-center justify-center rounded-full bg-mineshaft pr-1 text-mineshaft-300 hover:bg-mineshaft-500"
+                        style={{ fontSize: "11px", width: "26px", height: "26px" }}
+                      >
+                        {user?.firstName?.charAt(0)}
+                        {user?.lastName && user?.lastName?.charAt(0)}
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="p-1">
+                      <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.username}</div>
+                      <Link to="/personal-settings">
+                        <DropdownMenuItem>Personal Settings</DropdownMenuItem>
+                      </Link>
+                      <a
+                        href="https://infisical.com/docs/documentation/getting-started/introduction"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
+                      >
+                        <DropdownMenuItem>
+                          Documentation
+                          <FontAwesomeIcon
+                            icon={faArrowUpRightFromSquare}
+                            className="mb-[0.06rem] pl-1.5 text-xxs"
+                          />
+                        </DropdownMenuItem>
+                      </a>
+                      <a
+                        href="https://infisical.com/slack"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
+                      >
+                        <DropdownMenuItem>
+                          Join Slack Community
+                          <FontAwesomeIcon
+                            icon={faArrowUpRightFromSquare}
+                            className="mb-[0.06rem] pl-1.5 text-xxs"
+                          />
+                        </DropdownMenuItem>
+                      </a>
+                      {user?.superAdmin && (
+                        <Link to="/admin">
+                          <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
+                            Server Admin Console
+                          </DropdownMenuItem>
+                        </Link>
+                      )}
+                      <Link to={`/org/${currentOrg?.id}/admin`}>
+                        <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
+                          Organization Admin Console
+                        </DropdownMenuItem>
+                      </Link>
+                      <div className="mt-1 h-1 border-t border-mineshaft-600" />
+                      <button type="button" onClick={logOutUser} className="w-full">
+                        <DropdownMenuItem>Log Out</DropdownMenuItem>
+                      </button>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                <div className="px-1">
+                  <Menu className="mt-4">
+                    <Link
+                      to={`/organization/$organizationId/${ProjectType.SecretManager}` as const}
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive} icon="system-outline-165-view-carousel">
+                          Secret Management
+                        </MenuItem>
+                      )}
+                    </Link>
+                    <Link
+                      to={
+                        `/organization/$organizationid/${ProjectType.CertificateManager}` as const
+                      }
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive} icon="note">
+                          Cert Management
+                        </MenuItem>
+                      )}
+                    </Link>
+                    <Link
+                      to={`/organization/$organizationId/${ProjectType.KMS}` as const}
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive} icon="note">
+                          Key Management
+                        </MenuItem>
+                      )}
+                    </Link>
+                    <Link
+                      to="/organization/$organizationId/members"
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive} icon="system-outline-96-groups">
+                          Access Control
+                        </MenuItem>
+                      )}
+                    </Link>
+                    <Link
+                      to="/organization/$organizationId/secret-scanning"
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive} icon="system-outline-69-document-scan">
+                          Secret Scanning
+                        </MenuItem>
+                      )}
+                    </Link>
+                    <Link
+                      to="/organization/$organizationId/secret-sharing"
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive} icon="system-outline-90-lock-closed">
+                          Secret Sharing
+                        </MenuItem>
+                      )}
+                    </Link>
+                    {(window.location.origin.includes("https://app.infisical.com") ||
+                      window.location.origin.includes("https://eu.infisical.com") ||
+                      window.location.origin.includes("https://gamma.infisical.com")) && (
+                      <Link
+                        to="/organization/$organizationId/billing"
+                        params={{ organizationId: currentOrg.id }}
+                        activeOptions={{ exact: true }}
+                      >
+                        {({ isActive }) => (
+                          <MenuItem
+                            isSelected={isActive}
+                            icon="system-outline-103-coin-cash-monetization"
+                          >
+                            Usage &amps; Billing
+                          </MenuItem>
+                        )}
+                      </Link>
+                    )}
+                    <Link
+                      to="/organization/$organizationId/audit-logs"
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem isSelected={isActive} icon="system-outline-168-view-headline">
+                          Audit Logs
+                        </MenuItem>
+                      )}
+                    </Link>
+                    <Link
+                      to="/organization/$organizationId/settings"
+                      params={{ organizationId: currentOrg.id }}
+                      activeOptions={{ exact: true }}
+                    >
+                      {({ isActive }) => (
+                        <MenuItem
+                          isSelected={isActive}
+                          icon="system-outline-109-slider-toggle-settings"
+                        >
+                          Organization Settings
+                        </MenuItem>
+                      )}
+                    </Link>
+                  </Menu>
+                </div>
+              </div>
+              <div
+                className={`relative mt-10 ${
+                  subscription && subscription.slug === "starter" && !subscription.has_used_trial
+                    ? "mb-2"
+                    : "mb-4"
+                } flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400`}
+              >
+                {(window.location.origin.includes("https://app.infisical.com") ||
+                  window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
+                <div
+                  onKeyDown={() => null}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() =>
+                    navigate({
+                      to: "/organization/$organizationId/members",
+                      params: {
+                        organizationId: currentOrg?.id
+                      },
+                      search: {
+                        action: "invite"
+                      }
+                    })
+                  }
+                  className="w-full"
+                >
+                  <div className="mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
+                    <FontAwesomeIcon icon={faPlus} className="mr-3" />
+                    Invite people
+                  </div>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
+                      <FontAwesomeIcon icon={faQuestion} className="mr-3 px-[0.1rem]" />
+                      Help & Support
+                    </div>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="p-1">
+                    {supportOptions.map(([icon, text, url]) => (
+                      <DropdownMenuItem key={url as string}>
+                        <a
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          href={String(url)}
+                          className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+                        >
+                          <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                            {icon}
+                            <div className="text-sm">{text}</div>
+                          </div>
+                        </a>
+                      </DropdownMenuItem>
+                    ))}
+                    {infisicalPlatformVersion && (
+                      <div className="mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-200">
+                        <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
+                        Version: {infisicalPlatformVersion}
+                      </div>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                {subscription &&
+                  subscription.slug === "starter" &&
+                  !subscription.has_used_trial && (
+                    <button
+                      type="button"
+                      onClick={async () => {
+                        if (!subscription || !currentOrg) return;
+
+                        // direct user to start pro trial
+                        const url = await mutateAsync({
+                          orgId: currentOrg.id,
+                          success_url: window.location.href
+                        });
+
+                        window.location.href = url;
+                      }}
+                      className="mt-1.5 w-full"
+                    >
+                      <div className="justify-left mb-1.5 mt-1.5 flex w-full items-center rounded-md bg-mineshaft-600 py-1 pl-4 text-mineshaft-300 duration-200 hover:bg-mineshaft-500 hover:text-primary-400">
+                        <FontAwesomeIcon
+                          icon={faInfinity}
+                          className="ml-0.5 mr-3 py-2 text-primary"
+                        />
+                        Start Free Pro Trial
+                      </div>
+                    </button>
+                  )}
+              </div>
+            </nav>
+          </aside>
+          {
+            // <CreateOrgModal
+            //   isOpen={popUp?.createOrg?.isOpen}
+            //   onClose={() => handlePopUpToggle("createOrg", false)}
+            // />
+          }
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
+            <Outlet />
+          </main>
+        </div>
+      </div>
+      <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
+        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
+          {` ${t("common.no-mobile")} `}
+        </p>
+      </div>
+    </>
+  );
+};

frontend-v2/src/layouts/OrganizationLayout/components/InsecureConnectionBanner/InsecureConnectionBanner.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton } from "@app/components/v2";
+
+export const InsecureConnectionBanner = () => {
+  const [isAcknowledged, setIsAcknowledged] = useState(
+    localStorage.getItem("insecureConnectionAcknowledged") ?? false
+  );
+
+  const handleDismiss = () => {
+    setIsAcknowledged(true);
+    localStorage.setItem("insecureConnectionAcknowledged", "true");
+  };
+
+  if (isAcknowledged) return null;
+
+  return (
+    <div className="flex w-screen items-start border-b border-red-900 bg-red-700 py-1 px-2 font-inter text-sm text-mineshaft-200">
+      <FontAwesomeIcon className="ml-3.5 mt-1" icon={faWarning} />
+      <span className="mx-1 ml-2 mt-[0.04rem]">
+        Your connection to this Infisical instance is not secured via HTTPS. Some features may not
+        behave as expected.
+      </span>
+      <IconButton
+        size="xs"
+        className="ml-auto"
+        colorSchema="danger"
+        onClick={handleDismiss}
+        ariaLabel="Dismiss banner"
+      >
+        <FontAwesomeIcon icon={faXmark} />
+      </IconButton>
+    </div>
+  );
+};

frontend-v2/src/layouts/OrganizationLayout/components/InsecureConnectionBanner/index.tsx

@@ -0,0 +1 @@
+export * from "./InsecureConnectionBanner";

frontend-v2/src/layouts/OrganizationLayout/index.tsx

@@ -0,0 +1 @@
+export { OrganizationLayout } from "./OrganizationLayout";

frontend-v2/src/routeTree.gen.ts

@@ -11,72 +11,133 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as AuthenticateImport } from './routes/_authenticate'
 import { Route as IndexImport } from './routes/index'
-import { Route as SignupIndexImport } from './routes/signup/index'
+import { Route as AuthenticateRestrictloginsignupImport } from './routes/_authenticate/_restrict_login_signup'
-import { Route as LoginIndexImport } from './routes/login/index'
+import { Route as AuthenticateOrgdetailsImport } from './routes/_authenticate/_org_details'
-import { Route as SignupSsoIndexImport } from './routes/signup/sso/index'
+import { Route as AuthenticateOrgdetailsOrganizationlayoutImport } from './routes/_authenticate/_org_details/_organization_layout'
-import { Route as LoginSsoIndexImport } from './routes/login/sso/index'
+import { Route as AuthenticateRestrictloginsignupSignupIndexImport } from './routes/_authenticate/_restrict_login_signup/signup/index'
-import { Route as LoginSelectOrganizationIndexImport } from './routes/login/select-organization/index'
+import { Route as AuthenticateRestrictloginsignupLoginIndexImport } from './routes/_authenticate/_restrict_login_signup/login/index'
-import { Route as LoginLdapIndexImport } from './routes/login/ldap/index'
+import { Route as AuthenticateRestrictloginsignupSignupSsoIndexImport } from './routes/_authenticate/_restrict_login_signup/signup/sso/index'
-import { Route as LoginProviderSuccessImport } from './routes/login/provider/success'
+import { Route as AuthenticateRestrictloginsignupLoginSsoIndexImport } from './routes/_authenticate/_restrict_login_signup/login/sso/index'
-import { Route as LoginProviderErrorImport } from './routes/login/provider/error'
+import { Route as AuthenticateRestrictloginsignupLoginSelectOrganizationIndexImport } from './routes/_authenticate/_restrict_login_signup/login/select-organization/index'
+import { Route as AuthenticateRestrictloginsignupLoginLdapIndexImport } from './routes/_authenticate/_restrict_login_signup/login/ldap/index'
+import { Route as AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexImport } from './routes/_authenticate/_org_details/_organization_layout/organization/index'
+import { Route as AuthenticateRestrictloginsignupLoginProviderSuccessImport } from './routes/_authenticate/_restrict_login_signup/login/provider/success'
+import { Route as AuthenticateRestrictloginsignupLoginProviderErrorImport } from './routes/_authenticate/_restrict_login_signup/login/provider/error'
+import { Route as AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexImport } from './routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/index'
+import { Route as AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerImport } from './routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager'
 
 // Create/Update Routes
 
+const AuthenticateRoute = AuthenticateImport.update({
+  id: '/_authenticate',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
 } as any)
 
-const SignupIndexRoute = SignupIndexImport.update({
+const AuthenticateRestrictloginsignupRoute =
-  id: '/signup/',
+  AuthenticateRestrictloginsignupImport.update({
-  path: '/signup/',
+    id: '/_restrict_login_signup',
-  getParentRoute: () => rootRoute,
+    getParentRoute: () => AuthenticateRoute,
-} as any)
-
-const LoginIndexRoute = LoginIndexImport.update({
-  id: '/login/',
-  path: '/login/',
-  getParentRoute: () => rootRoute,
-} as any)
-
-const SignupSsoIndexRoute = SignupSsoIndexImport.update({
-  id: '/signup/sso/',
-  path: '/signup/sso/',
-  getParentRoute: () => rootRoute,
-} as any)
-
-const LoginSsoIndexRoute = LoginSsoIndexImport.update({
-  id: '/login/sso/',
-  path: '/login/sso/',
-  getParentRoute: () => rootRoute,
-} as any)
-
-const LoginSelectOrganizationIndexRoute =
-  LoginSelectOrganizationIndexImport.update({
-    id: '/login/select-organization/',
-    path: '/login/select-organization/',
-    getParentRoute: () => rootRoute,
   } as any)
 
-const LoginLdapIndexRoute = LoginLdapIndexImport.update({
+const AuthenticateOrgdetailsRoute = AuthenticateOrgdetailsImport.update({
-  id: '/login/ldap/',
+  id: '/_org_details',
-  path: '/login/ldap/',
+  getParentRoute: () => AuthenticateRoute,
-  getParentRoute: () => rootRoute,
 } as any)
 
-const LoginProviderSuccessRoute = LoginProviderSuccessImport.update({
+const AuthenticateOrgdetailsOrganizationlayoutRoute =
-  id: '/login/provider/success',
+  AuthenticateOrgdetailsOrganizationlayoutImport.update({
-  path: '/login/provider/success',
+    id: '/_organization_layout',
-  getParentRoute: () => rootRoute,
+    getParentRoute: () => AuthenticateOrgdetailsRoute,
-} as any)
+  } as any)
 
-const LoginProviderErrorRoute = LoginProviderErrorImport.update({
+const AuthenticateRestrictloginsignupSignupIndexRoute =
-  id: '/login/provider/error',
+  AuthenticateRestrictloginsignupSignupIndexImport.update({
-  path: '/login/provider/error',
+    id: '/signup/',
-  getParentRoute: () => rootRoute,
+    path: '/signup/',
-} as any)
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateRestrictloginsignupLoginIndexRoute =
+  AuthenticateRestrictloginsignupLoginIndexImport.update({
+    id: '/login/',
+    path: '/login/',
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateRestrictloginsignupSignupSsoIndexRoute =
+  AuthenticateRestrictloginsignupSignupSsoIndexImport.update({
+    id: '/signup/sso/',
+    path: '/signup/sso/',
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateRestrictloginsignupLoginSsoIndexRoute =
+  AuthenticateRestrictloginsignupLoginSsoIndexImport.update({
+    id: '/login/sso/',
+    path: '/login/sso/',
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute =
+  AuthenticateRestrictloginsignupLoginSelectOrganizationIndexImport.update({
+    id: '/login/select-organization/',
+    path: '/login/select-organization/',
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateRestrictloginsignupLoginLdapIndexRoute =
+  AuthenticateRestrictloginsignupLoginLdapIndexImport.update({
+    id: '/login/ldap/',
+    path: '/login/ldap/',
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute =
+  AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexImport.update({
+    id: '/organization/',
+    path: '/organization/',
+    getParentRoute: () => AuthenticateOrgdetailsOrganizationlayoutRoute,
+  } as any)
+
+const AuthenticateRestrictloginsignupLoginProviderSuccessRoute =
+  AuthenticateRestrictloginsignupLoginProviderSuccessImport.update({
+    id: '/login/provider/success',
+    path: '/login/provider/success',
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateRestrictloginsignupLoginProviderErrorRoute =
+  AuthenticateRestrictloginsignupLoginProviderErrorImport.update({
+    id: '/login/provider/error',
+    path: '/login/provider/error',
+    getParentRoute: () => AuthenticateRestrictloginsignupRoute,
+  } as any)
+
+const AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute =
+  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexImport.update(
+    {
+      id: '/organization/$organizationId/',
+      path: '/organization/$organizationId/',
+      getParentRoute: () => AuthenticateOrgdetailsOrganizationlayoutRoute,
+    } as any,
+  )
+
+const AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute =
+  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerImport.update(
+    {
+      id: '/organization/$organizationId/secret-manager',
+      path: '/organization/$organizationId/secret-manager',
+      getParentRoute: () => AuthenticateOrgdetailsOrganizationlayoutRoute,
+    } as any,
+  )
 
 // Populate the FileRoutesByPath interface
 
@@ -89,163 +150,315 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
-    '/login/': {
+    '/_authenticate': {
-      id: '/login/'
+      id: '/_authenticate'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof AuthenticateImport
+      parentRoute: typeof rootRoute
+    }
+    '/_authenticate/_org_details': {
+      id: '/_authenticate/_org_details'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof AuthenticateOrgdetailsImport
+      parentRoute: typeof AuthenticateImport
+    }
+    '/_authenticate/_restrict_login_signup': {
+      id: '/_authenticate/_restrict_login_signup'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupImport
+      parentRoute: typeof AuthenticateImport
+    }
+    '/_authenticate/_org_details/_organization_layout': {
+      id: '/_authenticate/_org_details/_organization_layout'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
+      parentRoute: typeof AuthenticateOrgdetailsImport
+    }
+    '/_authenticate/_restrict_login_signup/login/': {
+      id: '/_authenticate/_restrict_login_signup/login/'
       path: '/login'
       fullPath: '/login'
-      preLoaderRoute: typeof LoginIndexImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupLoginIndexImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
     }
-    '/signup/': {
+    '/_authenticate/_restrict_login_signup/signup/': {
-      id: '/signup/'
+      id: '/_authenticate/_restrict_login_signup/signup/'
       path: '/signup'
       fullPath: '/signup'
-      preLoaderRoute: typeof SignupIndexImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupSignupIndexImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
     }
-    '/login/provider/error': {
+    '/_authenticate/_restrict_login_signup/login/provider/error': {
-      id: '/login/provider/error'
+      id: '/_authenticate/_restrict_login_signup/login/provider/error'
       path: '/login/provider/error'
       fullPath: '/login/provider/error'
-      preLoaderRoute: typeof LoginProviderErrorImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupLoginProviderErrorImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
     }
-    '/login/provider/success': {
+    '/_authenticate/_restrict_login_signup/login/provider/success': {
-      id: '/login/provider/success'
+      id: '/_authenticate/_restrict_login_signup/login/provider/success'
       path: '/login/provider/success'
       fullPath: '/login/provider/success'
-      preLoaderRoute: typeof LoginProviderSuccessImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupLoginProviderSuccessImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
     }
-    '/login/ldap/': {
+    '/_authenticate/_org_details/_organization_layout/organization/': {
-      id: '/login/ldap/'
+      id: '/_authenticate/_org_details/_organization_layout/organization/'
+      path: '/organization'
+      fullPath: '/organization'
+      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexImport
+      parentRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
+    }
+    '/_authenticate/_restrict_login_signup/login/ldap/': {
+      id: '/_authenticate/_restrict_login_signup/login/ldap/'
       path: '/login/ldap'
       fullPath: '/login/ldap'
-      preLoaderRoute: typeof LoginLdapIndexImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupLoginLdapIndexImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
     }
-    '/login/select-organization/': {
+    '/_authenticate/_restrict_login_signup/login/select-organization/': {
-      id: '/login/select-organization/'
+      id: '/_authenticate/_restrict_login_signup/login/select-organization/'
       path: '/login/select-organization'
       fullPath: '/login/select-organization'
-      preLoaderRoute: typeof LoginSelectOrganizationIndexImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupLoginSelectOrganizationIndexImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
     }
-    '/login/sso/': {
+    '/_authenticate/_restrict_login_signup/login/sso/': {
-      id: '/login/sso/'
+      id: '/_authenticate/_restrict_login_signup/login/sso/'
       path: '/login/sso'
       fullPath: '/login/sso'
-      preLoaderRoute: typeof LoginSsoIndexImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupLoginSsoIndexImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
     }
-    '/signup/sso/': {
+    '/_authenticate/_restrict_login_signup/signup/sso/': {
-      id: '/signup/sso/'
+      id: '/_authenticate/_restrict_login_signup/signup/sso/'
       path: '/signup/sso'
       fullPath: '/signup/sso'
-      preLoaderRoute: typeof SignupSsoIndexImport
+      preLoaderRoute: typeof AuthenticateRestrictloginsignupSignupSsoIndexImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof AuthenticateRestrictloginsignupImport
+    }
+    '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager': {
+      id: '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager'
+      path: '/organization/$organizationId/secret-manager'
+      fullPath: '/organization/$organizationId/secret-manager'
+      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerImport
+      parentRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
+    }
+    '/_authenticate/_org_details/_organization_layout/organization/$organizationId/': {
+      id: '/_authenticate/_org_details/_organization_layout/organization/$organizationId/'
+      path: '/organization/$organizationId'
+      fullPath: '/organization/$organizationId'
+      preLoaderRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexImport
+      parentRoute: typeof AuthenticateOrgdetailsOrganizationlayoutImport
     }
   }
 }
 
 // Create and export the route tree
 
+interface AuthenticateOrgdetailsOrganizationlayoutRouteChildren {
+  AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
+  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute: typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
+}
+
+const AuthenticateOrgdetailsOrganizationlayoutRouteChildren: AuthenticateOrgdetailsOrganizationlayoutRouteChildren =
+  {
+    AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute:
+      AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute,
+    AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute:
+      AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute,
+    AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute:
+      AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute,
+  }
+
+const AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren =
+  AuthenticateOrgdetailsOrganizationlayoutRoute._addFileChildren(
+    AuthenticateOrgdetailsOrganizationlayoutRouteChildren,
+  )
+
+interface AuthenticateOrgdetailsRouteChildren {
+  AuthenticateOrgdetailsOrganizationlayoutRoute: typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
+}
+
+const AuthenticateOrgdetailsRouteChildren: AuthenticateOrgdetailsRouteChildren =
+  {
+    AuthenticateOrgdetailsOrganizationlayoutRoute:
+      AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren,
+  }
+
+const AuthenticateOrgdetailsRouteWithChildren =
+  AuthenticateOrgdetailsRoute._addFileChildren(
+    AuthenticateOrgdetailsRouteChildren,
+  )
+
+interface AuthenticateRestrictloginsignupRouteChildren {
+  AuthenticateRestrictloginsignupLoginIndexRoute: typeof AuthenticateRestrictloginsignupLoginIndexRoute
+  AuthenticateRestrictloginsignupSignupIndexRoute: typeof AuthenticateRestrictloginsignupSignupIndexRoute
+  AuthenticateRestrictloginsignupLoginProviderErrorRoute: typeof AuthenticateRestrictloginsignupLoginProviderErrorRoute
+  AuthenticateRestrictloginsignupLoginProviderSuccessRoute: typeof AuthenticateRestrictloginsignupLoginProviderSuccessRoute
+  AuthenticateRestrictloginsignupLoginLdapIndexRoute: typeof AuthenticateRestrictloginsignupLoginLdapIndexRoute
+  AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute: typeof AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute
+  AuthenticateRestrictloginsignupLoginSsoIndexRoute: typeof AuthenticateRestrictloginsignupLoginSsoIndexRoute
+  AuthenticateRestrictloginsignupSignupSsoIndexRoute: typeof AuthenticateRestrictloginsignupSignupSsoIndexRoute
+}
+
+const AuthenticateRestrictloginsignupRouteChildren: AuthenticateRestrictloginsignupRouteChildren =
+  {
+    AuthenticateRestrictloginsignupLoginIndexRoute:
+      AuthenticateRestrictloginsignupLoginIndexRoute,
+    AuthenticateRestrictloginsignupSignupIndexRoute:
+      AuthenticateRestrictloginsignupSignupIndexRoute,
+    AuthenticateRestrictloginsignupLoginProviderErrorRoute:
+      AuthenticateRestrictloginsignupLoginProviderErrorRoute,
+    AuthenticateRestrictloginsignupLoginProviderSuccessRoute:
+      AuthenticateRestrictloginsignupLoginProviderSuccessRoute,
+    AuthenticateRestrictloginsignupLoginLdapIndexRoute:
+      AuthenticateRestrictloginsignupLoginLdapIndexRoute,
+    AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute:
+      AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute,
+    AuthenticateRestrictloginsignupLoginSsoIndexRoute:
+      AuthenticateRestrictloginsignupLoginSsoIndexRoute,
+    AuthenticateRestrictloginsignupSignupSsoIndexRoute:
+      AuthenticateRestrictloginsignupSignupSsoIndexRoute,
+  }
+
+const AuthenticateRestrictloginsignupRouteWithChildren =
+  AuthenticateRestrictloginsignupRoute._addFileChildren(
+    AuthenticateRestrictloginsignupRouteChildren,
+  )
+
+interface AuthenticateRouteChildren {
+  AuthenticateOrgdetailsRoute: typeof AuthenticateOrgdetailsRouteWithChildren
+  AuthenticateRestrictloginsignupRoute: typeof AuthenticateRestrictloginsignupRouteWithChildren
+}
+
+const AuthenticateRouteChildren: AuthenticateRouteChildren = {
+  AuthenticateOrgdetailsRoute: AuthenticateOrgdetailsRouteWithChildren,
+  AuthenticateRestrictloginsignupRoute:
+    AuthenticateRestrictloginsignupRouteWithChildren,
+}
+
+const AuthenticateRouteWithChildren = AuthenticateRoute._addFileChildren(
+  AuthenticateRouteChildren,
+)
+
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
-  '/login': typeof LoginIndexRoute
+  '': typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
-  '/signup': typeof SignupIndexRoute
+  '/login': typeof AuthenticateRestrictloginsignupLoginIndexRoute
-  '/login/provider/error': typeof LoginProviderErrorRoute
+  '/signup': typeof AuthenticateRestrictloginsignupSignupIndexRoute
-  '/login/provider/success': typeof LoginProviderSuccessRoute
+  '/login/provider/error': typeof AuthenticateRestrictloginsignupLoginProviderErrorRoute
-  '/login/ldap': typeof LoginLdapIndexRoute
+  '/login/provider/success': typeof AuthenticateRestrictloginsignupLoginProviderSuccessRoute
-  '/login/select-organization': typeof LoginSelectOrganizationIndexRoute
+  '/organization': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
-  '/login/sso': typeof LoginSsoIndexRoute
+  '/login/ldap': typeof AuthenticateRestrictloginsignupLoginLdapIndexRoute
-  '/signup/sso': typeof SignupSsoIndexRoute
+  '/login/select-organization': typeof AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute
+  '/login/sso': typeof AuthenticateRestrictloginsignupLoginSsoIndexRoute
+  '/signup/sso': typeof AuthenticateRestrictloginsignupSignupSsoIndexRoute
+  '/organization/$organizationId/secret-manager': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  '/organization/$organizationId': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/login': typeof LoginIndexRoute
+  '': typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
-  '/signup': typeof SignupIndexRoute
+  '/login': typeof AuthenticateRestrictloginsignupLoginIndexRoute
-  '/login/provider/error': typeof LoginProviderErrorRoute
+  '/signup': typeof AuthenticateRestrictloginsignupSignupIndexRoute
-  '/login/provider/success': typeof LoginProviderSuccessRoute
+  '/login/provider/error': typeof AuthenticateRestrictloginsignupLoginProviderErrorRoute
-  '/login/ldap': typeof LoginLdapIndexRoute
+  '/login/provider/success': typeof AuthenticateRestrictloginsignupLoginProviderSuccessRoute
-  '/login/select-organization': typeof LoginSelectOrganizationIndexRoute
+  '/organization': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
-  '/login/sso': typeof LoginSsoIndexRoute
+  '/login/ldap': typeof AuthenticateRestrictloginsignupLoginLdapIndexRoute
-  '/signup/sso': typeof SignupSsoIndexRoute
+  '/login/select-organization': typeof AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute
+  '/login/sso': typeof AuthenticateRestrictloginsignupLoginSsoIndexRoute
+  '/signup/sso': typeof AuthenticateRestrictloginsignupSignupSsoIndexRoute
+  '/organization/$organizationId/secret-manager': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  '/organization/$organizationId': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
-  '/login/': typeof LoginIndexRoute
+  '/_authenticate': typeof AuthenticateRouteWithChildren
-  '/signup/': typeof SignupIndexRoute
+  '/_authenticate/_org_details': typeof AuthenticateOrgdetailsRouteWithChildren
-  '/login/provider/error': typeof LoginProviderErrorRoute
+  '/_authenticate/_restrict_login_signup': typeof AuthenticateRestrictloginsignupRouteWithChildren
-  '/login/provider/success': typeof LoginProviderSuccessRoute
+  '/_authenticate/_org_details/_organization_layout': typeof AuthenticateOrgdetailsOrganizationlayoutRouteWithChildren
-  '/login/ldap/': typeof LoginLdapIndexRoute
+  '/_authenticate/_restrict_login_signup/login/': typeof AuthenticateRestrictloginsignupLoginIndexRoute
-  '/login/select-organization/': typeof LoginSelectOrganizationIndexRoute
+  '/_authenticate/_restrict_login_signup/signup/': typeof AuthenticateRestrictloginsignupSignupIndexRoute
-  '/login/sso/': typeof LoginSsoIndexRoute
+  '/_authenticate/_restrict_login_signup/login/provider/error': typeof AuthenticateRestrictloginsignupLoginProviderErrorRoute
-  '/signup/sso/': typeof SignupSsoIndexRoute
+  '/_authenticate/_restrict_login_signup/login/provider/success': typeof AuthenticateRestrictloginsignupLoginProviderSuccessRoute
+  '/_authenticate/_org_details/_organization_layout/organization/': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationIndexRoute
+  '/_authenticate/_restrict_login_signup/login/ldap/': typeof AuthenticateRestrictloginsignupLoginLdapIndexRoute
+  '/_authenticate/_restrict_login_signup/login/select-organization/': typeof AuthenticateRestrictloginsignupLoginSelectOrganizationIndexRoute
+  '/_authenticate/_restrict_login_signup/login/sso/': typeof AuthenticateRestrictloginsignupLoginSsoIndexRoute
+  '/_authenticate/_restrict_login_signup/signup/sso/': typeof AuthenticateRestrictloginsignupSignupSsoIndexRoute
+  '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdSecretManagerRoute
+  '/_authenticate/_org_details/_organization_layout/organization/$organizationId/': typeof AuthenticateOrgdetailsOrganizationlayoutOrganizationOrganizationIdIndexRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | ''
     | '/login'
     | '/signup'
     | '/login/provider/error'
     | '/login/provider/success'
+    | '/organization'
     | '/login/ldap'
     | '/login/select-organization'
     | '/login/sso'
     | '/signup/sso'
+    | '/organization/$organizationId/secret-manager'
+    | '/organization/$organizationId'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | ''
     | '/login'
     | '/signup'
     | '/login/provider/error'
     | '/login/provider/success'
+    | '/organization'
     | '/login/ldap'
     | '/login/select-organization'
     | '/login/sso'
     | '/signup/sso'
+    | '/organization/$organizationId/secret-manager'
+    | '/organization/$organizationId'
   id:
     | '__root__'
     | '/'
-    | '/login/'
+    | '/_authenticate'
-    | '/signup/'
+    | '/_authenticate/_org_details'
-    | '/login/provider/error'
+    | '/_authenticate/_restrict_login_signup'
-    | '/login/provider/success'
+    | '/_authenticate/_org_details/_organization_layout'
-    | '/login/ldap/'
+    | '/_authenticate/_restrict_login_signup/login/'
-    | '/login/select-organization/'
+    | '/_authenticate/_restrict_login_signup/signup/'
-    | '/login/sso/'
+    | '/_authenticate/_restrict_login_signup/login/provider/error'
-    | '/signup/sso/'
+    | '/_authenticate/_restrict_login_signup/login/provider/success'
+    | '/_authenticate/_org_details/_organization_layout/organization/'
+    | '/_authenticate/_restrict_login_signup/login/ldap/'
+    | '/_authenticate/_restrict_login_signup/login/select-organization/'
+    | '/_authenticate/_restrict_login_signup/login/sso/'
+    | '/_authenticate/_restrict_login_signup/signup/sso/'
+    | '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager'
+    | '/_authenticate/_org_details/_organization_layout/organization/$organizationId/'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
-  LoginIndexRoute: typeof LoginIndexRoute
+  AuthenticateRoute: typeof AuthenticateRouteWithChildren
-  SignupIndexRoute: typeof SignupIndexRoute
-  LoginProviderErrorRoute: typeof LoginProviderErrorRoute
-  LoginProviderSuccessRoute: typeof LoginProviderSuccessRoute
-  LoginLdapIndexRoute: typeof LoginLdapIndexRoute
-  LoginSelectOrganizationIndexRoute: typeof LoginSelectOrganizationIndexRoute
-  LoginSsoIndexRoute: typeof LoginSsoIndexRoute
-  SignupSsoIndexRoute: typeof SignupSsoIndexRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
-  LoginIndexRoute: LoginIndexRoute,
+  AuthenticateRoute: AuthenticateRouteWithChildren,
-  SignupIndexRoute: SignupIndexRoute,
-  LoginProviderErrorRoute: LoginProviderErrorRoute,
-  LoginProviderSuccessRoute: LoginProviderSuccessRoute,
-  LoginLdapIndexRoute: LoginLdapIndexRoute,
-  LoginSelectOrganizationIndexRoute: LoginSelectOrganizationIndexRoute,
-  LoginSsoIndexRoute: LoginSsoIndexRoute,
-  SignupSsoIndexRoute: SignupSsoIndexRoute,
 }
 
 export const routeTree = rootRoute
@@ -259,42 +472,92 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
-        "/login/",
+        "/_authenticate"
-        "/signup/",
-        "/login/provider/error",
-        "/login/provider/success",
-        "/login/ldap/",
-        "/login/select-organization/",
-        "/login/sso/",
-        "/signup/sso/"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
-    "/login/": {
+    "/_authenticate": {
-      "filePath": "login/index.tsx"
+      "filePath": "_authenticate.tsx",
+      "children": [
+        "/_authenticate/_org_details",
+        "/_authenticate/_restrict_login_signup"
+      ]
     },
-    "/signup/": {
+    "/_authenticate/_org_details": {
-      "filePath": "signup/index.tsx"
+      "filePath": "_authenticate/_org_details.tsx",
+      "parent": "/_authenticate",
+      "children": [
+        "/_authenticate/_org_details/_organization_layout"
+      ]
     },
-    "/login/provider/error": {
+    "/_authenticate/_restrict_login_signup": {
-      "filePath": "login/provider/error.tsx"
+      "filePath": "_authenticate/_restrict_login_signup.tsx",
+      "parent": "/_authenticate",
+      "children": [
+        "/_authenticate/_restrict_login_signup/login/",
+        "/_authenticate/_restrict_login_signup/signup/",
+        "/_authenticate/_restrict_login_signup/login/provider/error",
+        "/_authenticate/_restrict_login_signup/login/provider/success",
+        "/_authenticate/_restrict_login_signup/login/ldap/",
+        "/_authenticate/_restrict_login_signup/login/select-organization/",
+        "/_authenticate/_restrict_login_signup/login/sso/",
+        "/_authenticate/_restrict_login_signup/signup/sso/"
+      ]
     },
-    "/login/provider/success": {
+    "/_authenticate/_org_details/_organization_layout": {
-      "filePath": "login/provider/success.tsx"
+      "filePath": "_authenticate/_org_details/_organization_layout.tsx",
+      "parent": "/_authenticate/_org_details",
+      "children": [
+        "/_authenticate/_org_details/_organization_layout/organization/",
+        "/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager",
+        "/_authenticate/_org_details/_organization_layout/organization/$organizationId/"
+      ]
     },
-    "/login/ldap/": {
+    "/_authenticate/_restrict_login_signup/login/": {
-      "filePath": "login/ldap/index.tsx"
+      "filePath": "_authenticate/_restrict_login_signup/login/index.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
     },
-    "/login/select-organization/": {
+    "/_authenticate/_restrict_login_signup/signup/": {
-      "filePath": "login/select-organization/index.tsx"
+      "filePath": "_authenticate/_restrict_login_signup/signup/index.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
     },
-    "/login/sso/": {
+    "/_authenticate/_restrict_login_signup/login/provider/error": {
-      "filePath": "login/sso/index.tsx"
+      "filePath": "_authenticate/_restrict_login_signup/login/provider/error.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
     },
-    "/signup/sso/": {
+    "/_authenticate/_restrict_login_signup/login/provider/success": {
-      "filePath": "signup/sso/index.tsx"
+      "filePath": "_authenticate/_restrict_login_signup/login/provider/success.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
+    },
+    "/_authenticate/_org_details/_organization_layout/organization/": {
+      "filePath": "_authenticate/_org_details/_organization_layout/organization/index.tsx",
+      "parent": "/_authenticate/_org_details/_organization_layout"
+    },
+    "/_authenticate/_restrict_login_signup/login/ldap/": {
+      "filePath": "_authenticate/_restrict_login_signup/login/ldap/index.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
+    },
+    "/_authenticate/_restrict_login_signup/login/select-organization/": {
+      "filePath": "_authenticate/_restrict_login_signup/login/select-organization/index.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
+    },
+    "/_authenticate/_restrict_login_signup/login/sso/": {
+      "filePath": "_authenticate/_restrict_login_signup/login/sso/index.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
+    },
+    "/_authenticate/_restrict_login_signup/signup/sso/": {
+      "filePath": "_authenticate/_restrict_login_signup/signup/sso/index.tsx",
+      "parent": "/_authenticate/_restrict_login_signup"
+    },
+    "/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager": {
+      "filePath": "_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager.tsx",
+      "parent": "/_authenticate/_org_details/_organization_layout"
+    },
+    "/_authenticate/_org_details/_organization_layout/organization/$organizationId/": {
+      "filePath": "_authenticate/_org_details/_organization_layout/organization/$organizationId/index.tsx",
+      "parent": "/_authenticate/_org_details/_organization_layout"
     }
   }
 }

frontend-v2/src/routes/__root.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 
+import { NotificationContainer } from "@app/components/notifications";
 import { TooltipProvider } from "@app/components/v2";
 import { adminQueryKeys, fetchServerConfig } from "@app/hooks/api/admin/queries";
 import { TServerConfig } from "@app/hooks/api/admin/types";
@@ -20,6 +21,7 @@ const RootPage = () => {
           <Outlet />
         </TooltipProvider>
       </QueryClientProvider>
+      <NotificationContainer />
       <TanStackRouterDevtools />
     </>
   );

frontend-v2/src/routes/_authenticate.tsx

@@ -0,0 +1,41 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import { authKeys, fetchAuthToken } from "@app/hooks/api/auth/queries";
+import { userKeys } from "@app/hooks/api";
+import { fetchUserDetails } from "@app/hooks/api/users/queries";
+import { setAuthToken } from "@app/hooks/api/reactQuery";
+
+export const Route = createFileRoute("/_authenticate")({
+  beforeLoad: async ({ context, location }) => {
+    const isLoginRoute = location.pathname.startsWith("/login");
+    const isSignupRoute = location.pathname.startsWith("/signup");
+    try {
+      const data = await context.queryClient.fetchQuery({
+        queryKey: authKeys.getAuthToken,
+        queryFn: fetchAuthToken
+      });
+      setAuthToken(data.token);
+      if (!data.organizationId) {
+        throw redirect({ to: "/login/select-organization" });
+      }
+
+      const user = await context.queryClient.fetchQuery({
+        queryKey: userKeys.getUser,
+        queryFn: fetchUserDetails
+      });
+
+      return { organizationId: data.organizationId as string, isAuthenticated: true, user };
+    } catch {
+      if (isLoginRoute || isSignupRoute) return {};
+      createNotification({
+        type: "error",
+        title: "Access Restricted",
+        text: " You need to log in to access this page. Please log in to continue."
+      });
+      throw redirect({
+        to: "/login"
+      });
+    }
+  }
+});

frontend-v2/src/routes/_authenticate/_org_details.tsx

@@ -0,0 +1,20 @@
+import { fetchOrganizationById, organizationKeys } from "@app/hooks/api/organization/queries";
+import { fetchOrgSubscription, subscriptionQueryKeys } from "@app/hooks/api/subscriptions/queries";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_authenticate/_org_details")({
+  beforeLoad: async ({ context }) => {
+    const organizationId = context.organizationId!;
+    const orgDetails = await context.queryClient.fetchQuery({
+      queryKey: organizationKeys.getOrgById(organizationId),
+      queryFn: () => fetchOrganizationById(organizationId)
+    });
+
+    const subscription = await context.queryClient.fetchQuery({
+      queryKey: subscriptionQueryKeys.getOrgSubsription(organizationId),
+      queryFn: () => fetchOrgSubscription(organizationId)
+    });
+
+    return { organization: orgDetails, subscription };
+  }
+});

frontend-v2/src/routes/_authenticate/_org_details/_organization_layout.tsx

@@ -0,0 +1,6 @@
+import { OrganizationLayout } from "@app/layouts/OrganizationLayout";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_authenticate/_org_details/_organization_layout")({
+  component: OrganizationLayout
+});

frontend-v2/src/routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/index.tsx

@@ -0,0 +1,38 @@
+import {
+  createFileRoute,
+  useRouteContext,
+  useRouter,
+} from '@tanstack/react-router'
+
+function RouteComponent() {
+  const user = useRouteContext({
+    from: '/_authenticate',
+    select: (el) => el.user,
+  })
+  const router = useRouter()
+
+  return (
+    <div>
+      Hello {user?.email}!
+      <button
+        type="button"
+        onClick={() => {
+          router.invalidate({
+            filter: (d) => {
+              console.log(d)
+              return true
+            },
+          })
+        }}
+      >
+        Click
+      </button>
+    </div>
+  )
+}
+
+export const Route = createFileRoute(
+  '/_authenticate/_org_details/_organization_layout/organization/$organizationId/',
+)({
+  component: RouteComponent,
+})

frontend-v2/src/routes/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+function SecretManagerOverviewPage() {
+  return <div>Hello "/organization/secret-manager"!</div>
+}
+
+export const Route = createFileRoute(
+  '/_authenticate/_org_details/_organization_layout/organization/$organizationId/secret-manager',
+)({
+  component: SecretManagerOverviewPage,
+})

frontend-v2/src/routes/_authenticate/_org_details/_organization_layout/organization/index.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute(
+  "/_authenticate/_org_details/_organization_layout/organization/"
+)({
+  beforeLoad: ({ context }) => {
+    redirect({
+      throw: true,
+      to: "/organization/$organizationId/secret-manager",
+      params: {
+        organizationId: String(context.organizationId)
+      }
+    });
+  }
+});

frontend-v2/src/routes/_authenticate/_restrict_login_signup.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_authenticate/_restrict_login_signup")({
+  beforeLoad: ({ context }) => {
+    if (context.isAuthenticated) {
+      redirect({
+        throw: true,
+        to: "/organization/$organizationId/secret-manager",
+        params: {
+          organizationId: context.organizationId
+        }
+      });
+    }
+  }
+});

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/-components/InitialStep/InitialStep.tsx

@@ -1,10 +1,10 @@
 import { FormEvent, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "@tanstack/react-router";
 import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
+import { Link, useNavigate } from "@tanstack/react-router";
 
 import Error from "@app/components/basic/Error";
 import { RegionSelect } from "@app/components/navigation/RegionSelect";

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/-components/PasswordStep/PasswordStep.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "@tanstack/react-router";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
+import { Link, useNavigate } from "@tanstack/react-router";
 import axios from "axios";
 import { addSeconds, formatISO } from "date-fns";
 import { jwtDecode } from "jwt-decode";
@@ -20,7 +20,7 @@ import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { fetchMyPrivateKey } from "@app/hooks/api/users/queries";
 
 import { navigateUserToOrg, useNavigateToSelectOrganization } from "../Login.utils";
-import { Mfa } from "../Mfa";
+import { Mfa } from "@app/components/auth/Mfa";
 
 type Props = {
   providerAuthToken: string;

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/index.tsx

@@ -76,6 +76,6 @@ const LoginPage = () => {
   );
 };
 
-export const Route = createFileRoute("/login/")({
+export const Route = createFileRoute("/_authenticate/_restrict_login_signup/login/")({
   component: LoginPage
 });

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/ldap/index.tsx

@@ -1,11 +1,12 @@
-import { useTranslation } from "react-i18next";
-import { Helmet } from "react-helmet";
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
-import { useServerConfig } from "@app/context";
 import { useState } from "react";
-import { loginLDAPRedirect } from "@app/hooks/api/auth/queries";
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+
 import { createNotification } from "@app/components/notifications";
-import { Input, Button } from "@app/components/v2";
+import { Button, Input } from "@app/components/v2";
+import { useServerConfig } from "@app/context";
+import { loginLDAPRedirect } from "@app/hooks/api/auth/queries";
 
 const LoginLDAPPage = () => {
   const { t } = useTranslation();
@@ -152,6 +153,6 @@ const LoginLDAPPage = () => {
   );
 };
 
-export const Route = createFileRoute("/login/ldap/")({
+export const Route = createFileRoute("/_authenticate/_restrict_login_signup/login/ldap/")({
   component: LoginLDAPPage
 });

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/provider/error.tsx

@@ -1,5 +1,5 @@
-import { createFileRoute } from "@tanstack/react-router";
 import { useEffect } from "react";
+import { createFileRoute } from "@tanstack/react-router";
 
 const LoginProviderError = () => {
   useEffect(() => {
@@ -10,6 +10,6 @@ const LoginProviderError = () => {
   return <div />;
 };
 
-export const Route = createFileRoute("/login/provider/error")({
+export const Route = createFileRoute("/_authenticate/_restrict_login_signup/login/provider/error")({
   component: LoginProviderError
 });

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/provider/success.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
+import { createFileRoute, useSearch } from "@tanstack/react-router";
 
 import SecurityClient from "@app/components/utilities/SecurityClient";
-import { createFileRoute, useSearch } from "@tanstack/react-router";
 
 const LoginProviderSuccess = () => {
   const search = useSearch({ from: "/login/provider/success" });
@@ -14,6 +14,8 @@ const LoginProviderSuccess = () => {
   return <div />;
 };
 
-export const Route = createFileRoute("/login/provider/success")({
+export const Route = createFileRoute(
+  "/_authenticate/_restrict_login_signup/login/provider/success"
+)({
   component: LoginProviderSuccess
 });

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/select-organization/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Helmet } from "react-helmet";
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import axios from "axios";
 import { addSeconds, formatISO } from "date-fns";
 import { jwtDecode } from "jwt-decode";
@@ -21,9 +21,10 @@ import {
   useSelectOrganization
 } from "@app/hooks/api";
 import { MfaMethod, UserAgentType } from "@app/hooks/api/auth/types";
+import { getAuthToken, isLoggedIn } from "@app/hooks/api/reactQuery";
 import { Organization } from "@app/hooks/api/types";
 import { AuthMethod } from "@app/hooks/api/users/types";
-import { getAuthToken, isLoggedIn } from "@app/hooks/api/reactQuery";
+
 import { navigateUserToOrg } from "../-components/Login.utils";
 import { Mfa } from "../-components/Mfa";
 
@@ -276,6 +277,8 @@ const SelectOrganizationPage = () => {
   );
 };
 
-export const Route = createFileRoute("/login/select-organization/")({
+export const Route = createFileRoute(
+  "/_authenticate/_restrict_login_signup/login/select-organization/"
+)({
   component: SelectOrganizationPage
 });

frontend-v2/src/routes/_authenticate/_restrict_login_signup/login/sso/index.tsx

@@ -1,9 +1,9 @@
-import { useTranslation } from "react-i18next";
-import { Helmet } from "react-helmet";
-import { createFileRoute, Link, useSearch } from "@tanstack/react-router";
-
 import { useEffect, useState } from "react";
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { createFileRoute, Link, useSearch } from "@tanstack/react-router";
 import { jwtDecode } from "jwt-decode";
+
 import { PasswordStep } from "../-components";
 
 const LoginSSOPage = () => {
@@ -58,6 +58,6 @@ const LoginSSOPage = () => {
   );
 };
 
-export const Route = createFileRoute("/login/sso/")({
+export const Route = createFileRoute("/_authenticate/_restrict_login_signup/login/sso/")({
   component: LoginSSOPage
 });

frontend-v2/src/routes/_authenticate/_restrict_login_signup/signup/index.tsx

@@ -4,12 +4,12 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 
-import CodeInputStep from "@app/components/signup/CodeInputStep";
+import CodeInputStep from "@app/components/auth/CodeInputStep";
-import DownloadBackupPDF from "@app/components/signup/DonwloadBackupPDFStep";
+import DownloadBackupPDF from "@app/components/auth/DonwloadBackupPDFStep";
-import EnterEmailStep from "@app/components/signup/EnterEmailStep";
+import EnterEmailStep from "@app/components/auth/EnterEmailStep";
-import InitialSignupStep from "@app/components/signup/InitialSignupStep";
+import InitialSignupStep from "@app/components/auth/InitialSignupStep";
-import TeamInviteStep from "@app/components/signup/TeamInviteStep";
+import TeamInviteStep from "@app/components/auth/TeamInviteStep";
-import UserInfoStep from "@app/components/signup/UserInfoStep";
+import UserInfoStep from "@app/components/auth/UserInfoStep";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useServerConfig } from "@app/context";
 import { useVerifySignupEmailVerificationCode } from "@app/hooks/api";
@@ -173,7 +173,7 @@ const SignUpPage = () => {
   );
 };
 
-export const Route = createFileRoute("/signup/")({
+export const Route = createFileRoute("/_authenticate/_restrict_login_signup/signup/")({
   component: SignUpPage,
   loader: ({ context }) => {
     console.log(context);

frontend-v2/src/routes/_authenticate/_restrict_login_signup/signup/sso/-components/BackupPDFStep/BackupPDFStep.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from "react-i18next";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
 
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
 import { Button } from "@app/components/v2";
 import { ProjectType } from "@app/hooks/api/workspace/types";
-import { useNavigate } from "@tanstack/react-router";
 
 interface DownloadBackupPDFStepProps {
   email: string;

frontend-v2/src/routes/_authenticate/_restrict_login_signup/signup/sso/-components/EmailConfirmationStep/EmailConfirmationStep.tsx

@@ -2,13 +2,13 @@
 // if same email exists, then trigger fn to merge automatically
 import { useState } from "react";
 import ReactCodeInput from "react-code-input";
+import { useNavigate } from "@tanstack/react-router";
 
 import Error from "@app/components/basic/Error";
 import { createNotification } from "@app/components/notifications";
 import { Button } from "@app/components/v2";
 import { useSendEmailVerificationCode, useVerifyEmailVerificationCode } from "@app/hooks/api";
 import { UserAliasType } from "@app/hooks/api/users/types";
-import { useNavigate } from "@tanstack/react-router";
 
 type Props = {
   authType?: UserAliasType;

frontend-v2/src/routes/_authenticate/_restrict_login_signup/signup/sso/index.tsx

@@ -85,6 +85,6 @@ const SignupSSOPage = () => {
   );
 };
 
-export const Route = createFileRoute("/signup/sso/")({
+export const Route = createFileRoute("/_authenticate/_restrict_login_signup/signup/sso/")({
   component: SignupSSOPage
 });

frontend-v2/vite.config.ts

@@ -8,6 +8,16 @@ import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        secure: false,
+        ws: true
+      }
+    }
+  },
   plugins: [
     tsconfigPaths(),
     nodePolyfills({