chore: handled next_path in auth wrapper (#4774)

web/core/components/account/auth-forms/auth-root.tsx

@@ -41,6 +41,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
   const invitation_id = searchParams.get("invitation_id");
   const workspaceSlug = searchParams.get("slug");
   const error_code = searchParams.get("error_code");
+  const nextPath = searchParams.get("next_path");
   // props
   const { authMode: currentAuthMode } = props;
   // states
@@ -172,6 +173,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
             email={email}
             handleEmailClear={handleEmailClear}
             generateEmailUniqueCode={generateEmailUniqueCode}
+            nextPath={nextPath || undefined}
           />
         )}
         {authStep === EAuthSteps.PASSWORD && (
@@ -184,6 +186,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
               if (step === EAuthSteps.UNIQUE_CODE) generateEmailUniqueCode(email);
               setAuthStep(step);
             }}
+            nextPath={nextPath || undefined}
           />
         )}
         <OAuthOptions isSignUp={authMode === EAuthModes.SIGN_UP} />

web/core/components/account/auth-forms/password.tsx

@@ -26,6 +26,7 @@ type Props = {
   mode: EAuthModes;
   handleEmailClear: () => void;
   handleAuthStep: (step: EAuthSteps) => void;
+  nextPath: string | undefined;
 };
 
 type TPasswordFormValues = {
@@ -42,7 +43,7 @@ const defaultValues: TPasswordFormValues = {
 const authService = new AuthService();
 
 export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
-  const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
+  const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode, nextPath } = props;
   // hooks
   const { captureEvent } = useEventTracker();
   // states
@@ -120,6 +121,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <input type="hidden" value={passwordFormData.email} name="email" />
+      {nextPath && <input type="hidden" value={nextPath} name="next_path" />}
       <div className="space-y-1">
         <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
           Email

web/core/components/account/auth-forms/unique-code.tsx

@@ -19,6 +19,7 @@ type TAuthUniqueCodeForm = {
   email: string;
   handleEmailClear: () => void;
   generateEmailUniqueCode: (email: string) => Promise<{ code: string } | undefined>;
+  nextPath: string | undefined;
 };
 
 type TUniqueCodeFormValues = {
@@ -32,7 +33,7 @@ const defaultValues: TUniqueCodeFormValues = {
 };
 
 export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
-  const { mode, email, handleEmailClear, generateEmailUniqueCode } = props;
+  const { mode, email, handleEmailClear, generateEmailUniqueCode, nextPath } = props;
   // hooks
   // const { captureEvent } = useEventTracker();
   // derived values
@@ -80,6 +81,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <input type="hidden" value={uniqueCodeFormData.email} name="email" />
+      {nextPath && <input type="hidden" value={nextPath} name="next_path" />}
       <div className="space-y-1">
         <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
           Email

web/core/lib/wrappers/authentication-wrapper.tsx

@@ -2,7 +2,7 @@
 
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import useSWR from "swr";
 // components
 import { LogoSpinner } from "@/components/common";
@@ -24,9 +24,10 @@ const isValidURL = (url: string): boolean => {
 };
 
 export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props) => {
+  const pathname = usePathname();
   const router = useRouter();
   const searchParams = useSearchParams();
-  const next_path = searchParams.get("next_path");
+  const nextPath = searchParams.get("next_path");
   // props
   const { children, pageType = EPageTypes.AUTHENTICATED } = props;
   // hooks
@@ -51,9 +52,9 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props
   const getWorkspaceRedirectionUrl = (): string => {
     let redirectionRoute = "/profile";
 
-    // validating the next_path from the router query
+    // validating the nextPath from the router query
-    if (next_path && isValidURL(next_path.toString())) {
+    if (nextPath && isValidURL(nextPath.toString())) {
-      redirectionRoute = next_path.toString();
+      redirectionRoute = nextPath.toString();
       return redirectionRoute;
     }
 
@@ -96,7 +97,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props
 
   if (pageType === EPageTypes.ONBOARDING) {
     if (!currentUser?.id) {
-      router.push("/");
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
       return <></>;
     } else {
       if (currentUser && currentUserProfile?.id && isUserOnboard) {
@@ -109,7 +110,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props
 
   if (pageType === EPageTypes.SET_PASSWORD) {
     if (!currentUser?.id) {
-      router.push("/");
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
       return <></>;
     } else {
       if (currentUser && !currentUser?.is_password_autoset && currentUserProfile?.id && isUserOnboard) {
@@ -128,7 +129,7 @@ export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props
         return <></>;
       }
     } else {
-      router.push("/");
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
       return <></>;
     }
   }