Convert navigate function to hook

frontend/src/views/Login/Login.tsx

@@ -1,16 +1,15 @@
 import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
 
 import { isLoggedIn } from "@app/reactQuery";
 
 import { InitialStep, MFAStep, SSOStep } from "./components";
-import { navigateUserToSelectOrg } from "./Login.utils";
+import { useNavigateToSelectOrganization } from "./Login.utils";
 
 export const Login = () => {
-  const router = useRouter();
   const [step, setStep] = useState(0);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const { navigateToSelectOrganization } = useNavigateToSelectOrganization();
 
   const queryParams = new URLSearchParams(window.location.search);
 
@@ -21,10 +20,10 @@ export const Login = () => {
         const callbackPort = queryParams?.get("callback_port");
         // case: a callback port is set, meaning it's a cli login request: redirect to select org with callback port
         if (callbackPort) {
-          navigateUserToSelectOrg(router, callbackPort);
+          navigateToSelectOrganization(callbackPort);
         } else {
           // case: no callback port, meaning it's a regular login request: redirect to select org
-          navigateUserToSelectOrg(router);
+          navigateToSelectOrganization();
         }
       } catch (error) {
         console.log("Error - Not logged in yet");

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useRef, useState } from "react";
+import { FormEvent, useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -16,7 +16,7 @@ import { Button, Input } from "@app/components/v2";
 import { useServerConfig } from "@app/context";
 import { useFetchServerStatus } from "@app/hooks/api";
 
-import { navigateUserToSelectOrg } from "../../Login.utils";
+import { useNavigateToSelectOrganization } from "../../Login.utils";
 
 type Props = {
   setStep: (step: number) => void;
@@ -39,16 +39,28 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   const captchaRef = useRef<HCaptcha>(null);
   const { data: serverDetails } = useFetchServerStatus();
 
+  const { navigateToSelectOrganization } = useNavigateToSelectOrganization();
+
+  const redirectToSaml = (orgSlug: string) => {
+    const callbackPort = queryParams.get("callback_port");
+    const redirectUrl = `/api/v1/sso/redirect/saml2/organizations/${orgSlug}${
+      callbackPort ? `?callback_port=${callbackPort}` : ""
+    }`;
+    router.push(redirectUrl);
+  };
+
   useEffect(() => {
-    if (serverDetails?.samlDefaultOrgSlug) {
+    if (serverDetails?.samlDefaultOrgSlug) redirectToSaml(serverDetails.samlDefaultOrgSlug);
-      const callbackPort = queryParams.get("callback_port");
-      const redirectUrl = `/api/v1/sso/redirect/saml2/organizations/${
-        serverDetails?.samlDefaultOrgSlug
-      }${callbackPort ? `?callback_port=${callbackPort}` : ""}`;
-      router.push(redirectUrl);
-    }
   }, [serverDetails?.samlDefaultOrgSlug]);
 
+  const handleSaml = useCallback((step: number) => {
+    if (config.defaultOrgSlug) {
+      redirectToSaml(config.defaultOrgSlug);
+    } else {
+      setStep(step);
+    }
+  }, []);
+
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
@@ -75,7 +87,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             return;
           }
 
-          navigateUserToSelectOrg(router, callbackPort!);
+          navigateToSelectOrganization(callbackPort!);
         } else {
           setLoginError(true);
           createNotification({
@@ -100,7 +112,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             return;
           }
 
-          navigateUserToSelectOrg(router);
+          navigateToSelectOrganization();
 
           // case: login does not require MFA step
           createNotification({
@@ -211,7 +223,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           colorSchema="primary"
           variant="outline_bg"
           onClick={() => {
-            setStep(2);
+            handleSaml(2);
           }}
           leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
           className="mx-0 h-10 w-full"

frontend/src/views/Login/components/MFAStep/MFAStep.tsx

@@ -16,7 +16,7 @@ import { useSelectOrganization, verifyMfaToken } from "@app/hooks/api/auth/queri
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { fetchMyPrivateKey } from "@app/hooks/api/users/queries";
 
-import { navigateUserToOrg, navigateUserToSelectOrg } from "../../Login.utils";
+import { navigateUserToOrg, useNavigateToSelectOrganization } from "../../Login.utils";
 
 // The style for the verification code input
 const props = {
@@ -50,6 +50,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingResend, setIsLoadingResend] = useState(false);
   const [mfaCode, setMfaCode] = useState("");
+  const { navigateToSelectOrganization } = useNavigateToSelectOrganization();
   const [triesLeft, setTriesLeft] = useState<number | undefined>(undefined);
 
   const { t } = useTranslation();
@@ -93,7 +94,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
 
       // case: user has orgs, so we navigate the user to select an org
       if (userOrgs.length > 0) {
-        navigateUserToSelectOrg(router, callbackPort);
+        navigateToSelectOrganization(callbackPort);
       }
       // case: no orgs found, so we navigate the user to create an org
       // cli login will fail in this case
@@ -166,7 +167,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
 
             // case: user has orgs, so we navigate the user to select an org
             if (userOrgs.length > 0) {
-              navigateUserToSelectOrg(router, callbackPort);
+              navigateToSelectOrganization(callbackPort);
             }
             // case: no orgs found, so we navigate the user to create an org
             // cli login will fail in this case
@@ -195,7 +196,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
           if (organizationId) {
             await navigateUserToOrg(router, organizationId);
           } else {
-            navigateUserToSelectOrg(router);
+            navigateToSelectOrganization();
           }
         } else {
           createNotification({