fix: avoid reloading app after login

Author: raheeliftikhar5

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

@@ -21,11 +21,13 @@ import {
   ThirdPartyAuthType,
   ThirdPartyConfigType,
 } from "constants/authConstants";
+import history from "util/history";
 
 export const AuthContext = createContext<{
   systemConfig?: SystemConfig;
   inviteInfo?: AuthInviteInfo;
   thirdPartyAuthError?: boolean;
+  fetchUserAfterAuthSuccess?: () => void;
 }>(undefined as any);
 
 export const getSafeAuthRedirectURL = (redirectUrl: string | null) => {
@@ -39,15 +41,21 @@ export const getSafeAuthRedirectURL = (redirectUrl: string | null) => {
 export function useAuthSubmit(
   requestFunc: () => AxiosPromise<ApiResponse>,
   infoCompleteCheck: boolean,
-  redirectUrl: string | null
+  redirectUrl: string | null,
+  onAuthSuccess?: () => void,
 ) {
   const [loading, setLoading] = useState(false);
   return {
     loading: loading,
     onSubmit: () => {
       setLoading(true);
       requestFunc()
-        .then((resp) => authRespValidate(resp, infoCompleteCheck, redirectUrl))
+        .then((resp) => authRespValidate(
+          resp,
+          infoCompleteCheck,
+          redirectUrl,
+          onAuthSuccess,
+        ))
         .catch((e) => {
           messageInstance.error(e.message);
         })
@@ -66,7 +74,8 @@ export function useAuthSubmit(
 export function authRespValidate(
   resp: AxiosResponse<ApiResponse>,
   infoCompleteCheck: boolean,
-  redirectUrl: string | null
+  redirectUrl: string | null,
+  onAuthSuccess?: () => void
 ) {
   let replaceUrl = redirectUrl || BASE_URL;
   if (infoCompleteCheck) {
@@ -76,7 +85,8 @@ export function authRespValidate(
       : USER_INFO_COMPLETION;
   }
   if (doValidResponse(resp)) {
-    window.location.replace(replaceUrl);
+    onAuthSuccess?.();
+    history.replace(replaceUrl);
   } else if (
     resp.data.code === SERVER_ERROR_CODES.EXCEED_MAX_USER_ORG_COUNT ||
     resp.data.code === SERVER_ERROR_CODES.ALREADY_IN_ORGANIZATION

client/packages/lowcoder/src/pages/userAuth/formLogin.tsx

@@ -32,7 +32,7 @@ export default function FormLogin(props: FormLoginProps) {
   const [account, setAccount] = useState("");
   const [password, setPassword] = useState("");
   const redirectUrl = useRedirectUrl();
-  const { systemConfig, inviteInfo } = useContext(AuthContext);
+  const { systemConfig, inviteInfo, fetchUserAfterAuthSuccess } = useContext(AuthContext);
   const invitationId = inviteInfo?.invitationId;
   const authId = systemConfig?.form.id;
   const location = useLocation();
@@ -49,7 +49,8 @@ export default function FormLogin(props: FormLoginProps) {
         authId,
       }),
     false,
-    redirectUrl
+    redirectUrl,
+    fetchUserAfterAuthSuccess,
   );
 
   return (

client/packages/lowcoder/src/pages/userAuth/index.tsx

@@ -8,6 +8,7 @@ import { AuthRoutes } from "@lowcoder-ee/constants/authConstants";
 import { AuthLocationState } from "constants/authConstants";
 import { ProductLoading } from "components/ProductLoading";
 import { fetchConfigAction } from "redux/reduxActions/configActions";
+import { fetchUserAction } from "redux/reduxActions/userActions";
 import _ from "lodash";
 
 export default function UserAuth() {
@@ -34,12 +35,17 @@ export default function UserAuth() {
     return <ProductLoading hideHeader />;
   }
 
+  const fetchUserAfterAuthSuccess = () => {
+    dispatch(fetchUserAction());
+  }
+
   return (
     <AuthContext.Provider
       value={{
         systemConfig: systemConfig,
         inviteInfo: location.state?.inviteInfo,
         thirdPartyAuthError: location.state?.thirdPartyAuthError,
+        fetchUserAfterAuthSuccess,
       }}
     >
       <Switch location={location}>

client/packages/lowcoder/src/pages/userAuth/login.tsx

@@ -144,7 +144,7 @@ function Login() {
       heading={loginHeading}
       subHeading={loginSubHeading}
     >
-      {loginCardView}
+      <FormLogin organizationId={organizationId} />
     </AuthContainer>
   );
 }

client/packages/lowcoder/src/pages/userAuth/register.tsx

@@ -41,9 +41,9 @@ function UserRegister() {
   const [password, setPassword] = useState("");
   const redirectUrl = useRedirectUrl();
   const location = useLocation();
-  const { systemConfig, inviteInfo } = useContext(AuthContext);
+  const { systemConfig, inviteInfo, fetchUserAfterAuthSuccess } = useContext(AuthContext);
   const invitationId = inviteInfo?.invitationId;
-  // const invitedOrganizationId = inviteInfo?.invitedOrganizationId;
+
   const orgId = useParams<any>().orgId;
   const organizationId = useMemo(() => {
     if(inviteInfo?.invitedOrganizationId) {
@@ -53,6 +53,7 @@ function UserRegister() {
   }, [ inviteInfo, orgId ])
 
   const authId = systemConfig?.form.id;
+
   const { loading, onSubmit } = useAuthSubmit(
     () =>
       UserApi.formLogin({
@@ -64,13 +65,10 @@ function UserRegister() {
         authId,
       }),
     false,
-    redirectUrl
+    redirectUrl,
+    fetchUserAfterAuthSuccess,
   );
 
-  if (!systemConfig || !systemConfig?.form.enableRegister) {
-    return null;
-  }
-
   const registerHeading = REACT_APP_LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
     ? REACT_APP_LOWCODER_CUSTOM_AUTH_WELCOME_TEXT
     : trans("userAuth.register")

client/packages/lowcoder/src/pages/userAuth/thirdParty/authRedirect.tsx

@@ -6,10 +6,10 @@ import { AUTH_LOGIN_URL, AUTH_REGISTER_URL, BASE_URL } from "constants/routesURL
 import history from "util/history";
 import PageSkeleton from "components/PageSkeleton";
 import { trans } from "i18n";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { getAuthenticator } from "@lowcoder-ee/pages/userAuth/thirdParty/authenticator";
 import { AuthRedirectUrlParams } from "pages/userAuth/thirdParty/authenticator";
-import { loadAuthParams } from "pages/userAuth/authUtils";
+import { AuthContext, loadAuthParams } from "pages/userAuth/authUtils";
 
 function getUrlParams(queryParams: URLSearchParams): AuthRedirectUrlParams {
   const ticket = queryParams.get("ticket");
@@ -53,6 +53,8 @@ export function AuthRedirect() {
   const queryParams = new URLSearchParams(location.search);
   const urlParam = getUrlParams(queryParams);
   const [authParams, setAuthParam] = useState<AuthSessionStoreParams>();
+  const { fetchUserAfterAuthSuccess } = useContext(AuthContext);
+
   useEffect(() => {
     const localAuthParams = loadAuthParams();
     if (!localAuthParams) {
@@ -61,8 +63,9 @@ export function AuthRedirect() {
       setAuthParam(localAuthParams);
     }
   }, []);
+
   if (authParams && validateParam(authParams, urlParam)) {
-    getAuthenticator(authParams, urlParam).doAuth();
+    getAuthenticator(authParams, urlParam).doAuth(fetchUserAfterAuthSuccess);
   }
   return <PageSkeleton hideSideBar />;
 }

client/packages/lowcoder/src/pages/userAuth/thirdParty/authenticator/abstractAuthenticator.ts

@@ -26,20 +26,21 @@ export abstract class AbstractAuthenticator {
     this.redirectUrl = decodeURIComponent(getRedirectUrl(authParams.authType));
   }
 
-  doAuth() {
+  doAuth(onAuthSuccess?: () => void) {
     const { authParams } = this;
     (authParams.authGoal === "login" || authParams.authGoal === "register")
-      ? this.doLogin()
+      ? this.doLogin(onAuthSuccess)
       : this.doBind();
   }
 
-  protected doLogin() {
+  protected doLogin(onAuthSuccess?: () => void) {
     this.login()
       .then((resp) => {
         authRespValidate(
           resp,
           this.needInfoCheck(this.authParams.sourceType),
-          this.authParams.afterLoginRedirect
+          this.authParams.afterLoginRedirect,
+          onAuthSuccess,
         );
       })
       .catch((e) => {