refactor: handle redirectUrl using sessionStoragee

Author: raheeliftikhar5

client/packages/lowcoder/src/constants/authConstants.ts

@@ -22,9 +22,14 @@ import {
 export type AuthInviteInfo = InviteInfo & { invitationId: string };
 export type AuthLocationState = { inviteInfo?: AuthInviteInfo; thirdPartyAuthError?: boolean };
 
-export const AuthSearchParams = {
-  loginType: "loginType",
-  redirectUrl: "redirectUrl",
+export enum AuthSearchParams {
+  loginType = "loginType",
+  redirectUrl = "redirectUrl",
+};
+
+export type AuthSearchParamsType = {
+  loginType: string | null,
+  redirectUrl: string | null,
 };
 
 export type OauthRequestParam = {

client/packages/lowcoder/src/pages/userAuth/authUtils.ts

@@ -16,6 +16,7 @@ import { createContext, useState } from "react";
 import { SystemConfig } from "constants/configConstants";
 import {
   AuthInviteInfo,
+  AuthSearchParamsType,
   AuthSessionStoreParams,
   ThirdPartyAuthGoal,
   ThirdPartyAuthType,
@@ -185,3 +186,21 @@ export const getRedirectUrl = (authType: ThirdPartyAuthType) => {
     `${window.location.origin}${authType === "CAS" ? CAS_AUTH_REDIRECT : OAUTH_REDIRECT}`
   );
 };
+
+const AuthSearchParamStorageKey = "_temp_auth_search_params_";
+
+export const saveAuthSearchParams = (
+  authSearchParams: AuthSearchParamsType
+) => {
+  sessionStorage.setItem(AuthSearchParamStorageKey, JSON.stringify(authSearchParams));
+}
+
+export const loadAuthSearchParams = ():AuthSearchParamsType | null => {
+  const authParams = sessionStorage.getItem(AuthSearchParamStorageKey);
+  if (!authParams) return null;
+  return JSON.parse(authParams);
+}
+
+export const clearAuthSearchParams = () => {
+  sessionStorage.removeItem(AuthSearchParamStorageKey);
+}

client/packages/lowcoder/src/redux/sagas/userSagas.ts

@@ -23,6 +23,7 @@ import { defaultUser } from "constants/userConstants";
 import { messageInstance } from "lowcoder-design";
 
 import { AuthSearchParams } from "constants/authConstants";
+import { saveAuthSearchParams } from "pages/userAuth/authUtils";
 
 function validResponseData(response: AxiosResponse<ApiResponse>) {
   return response && response.data && response.data.data;
@@ -133,13 +134,18 @@ export function* logoutSaga(action: LogoutActionType) {
     let redirectURL = AUTH_LOGIN_URL;
     if (action.payload.notAuthorised) {
       const currentUrl = window.location.href;
-      redirectURL = `${AUTH_LOGIN_URL}?redirectUrl=${encodeURIComponent(currentUrl)}`;
+      // redirectURL = `${AUTH_LOGIN_URL}`;
+      // redirectURL = `${AUTH_LOGIN_URL}?redirectUrl=${encodeURIComponent(currentUrl)}`;
       const urlObj = new URL(currentUrl);
       // Add loginType param for auto login jump
       const loginType = urlObj.searchParams.get(AuthSearchParams.loginType);
-      if (loginType) {
-        redirectURL = redirectURL + `&${AuthSearchParams.loginType}=${loginType}`;
-      }
+      // if (loginType) {
+      //   redirectURL = redirectURL + `&${AuthSearchParams.loginType}=${loginType}`;
+      // }
+      saveAuthSearchParams({
+        [AuthSearchParams.redirectUrl]: encodeURIComponent(currentUrl),
+        [AuthSearchParams.loginType]: loginType
+      });
     }
     let isValidResponse = true;
     if (!action.payload.notAuthorised) {

client/packages/lowcoder/src/util/hooks.ts

@@ -16,6 +16,7 @@ import { checkIsMobile } from "util/commonUtils";
 import { EditorContext } from "comps/editorState";
 import { getDataSourceStructures } from "redux/selectors/datasourceSelectors";
 import { DatasourceStructure } from "api/datasourceApi";
+import { loadAuthSearchParams } from "pages/userAuth/authUtils";
 
 export const ForceViewModeContext = React.createContext<boolean>(false);
 
@@ -59,9 +60,12 @@ export function useApplicationId() {
 }
 
 export function useRedirectUrl() {
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  return queryParams.get(AuthSearchParams.redirectUrl);
+  const authSearchParams = loadAuthSearchParams()
+  const redirectUrl = authSearchParams && authSearchParams.redirectUrl
+  return redirectUrl && decodeURIComponent(redirectUrl);
+  // const location = useLocation();
+  // const queryParams = new URLSearchParams(location.search);
+  // return queryParams.get(AuthSearchParams.redirectUrl);
 }
 
 export function useFixedDelay(callback: () => Promise<unknown>, delay: number | null) {