feat: oauth flow updates for third party login options

lowcoder-org · FalkWolsky · Oct 20, 2023 · Jul 19, 2023 · Sep 21, 2023 · Sep 21, 2023
commit 8b01d789f047fd38e083a53f580118a00943ceac
diff --git a/client/packages/lowcoder-cli/client.d.ts b/client/packages/lowcoder-cli/client.d.ts
@@ -34,7 +34,7 @@ declare var LOWCODER_NODE_SERVICE_URL: string;
 declare var LOWCODER_SHOW_BRAND: string;
 declare var LOWCODER_CUSTOM_LOGO: string;
 declare var LOWCODER_CUSTOM_LOGO_SQUARE: string;
-declare var LOWCODER_SHOW_CUSTOM_AUTH_WELCOME_TEXT: string;
+declare var LOWCODER_CUSTOM_AUTH_WELCOME_TEXT: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

diff --git a/client/packages/lowcoder-dev-utils/buildVars.js b/client/packages/lowcoder-dev-utils/buildVars.js
@@ -36,8 +36,8 @@ export const buildVars = [
     defaultValue: "",
   },
   {
-    name: "LOWCODER_SHOW_CUSTOM_AUTH_WELCOME_TEXT",
-    defaultValue: "",
+    name: "LOWCODER_CUSTOM_AUTH_WELCOME_TEXT",
+    defaultValue: "This is custom welcome message",
   },
   {
     name: "REACT_APP_ENV",

diff --git a/client/packages/lowcoder/src/app-env.d.ts b/client/packages/lowcoder/src/app-env.d.ts
@@ -37,7 +37,7 @@ declare var LOWCODER_NODE_SERVICE_URL: string;
 declare var LOWCODER_SHOW_BRAND: string;
 declare var LOWCODER_CUSTOM_LOGO: string;
 declare var LOWCODER_CUSTOM_LOGO_SQUARE: string;
-declare var LOWCODER_SHOW_CUSTOM_AUTH_WELCOME_TEXT: string;
+declare var LOWCODER_CUSTOM_AUTH_WELCOME_TEXT: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -13,6 +13,8 @@ import {
   IMPORT_APP_FROM_TEMPLATE_URL,
   INVITE_LANDING_URL,
   isAuthUnRequired,
+  ORG_AUTH_LOGIN_URL,
+  ORG_AUTH_REGISTER_URL,
   QUERY_LIBRARY_URL,
   SETTING,
   TRASH_URL,
@@ -70,10 +72,11 @@ const Wrapper = (props: { children: React.ReactNode }) => (
 type AppIndexProps = {
   isFetchUserFinished: boolean;
   isFetchHomeFinished: boolean;
-  isFetchingConfig: boolean;
+  // isFetchingConfig: boolean;
+  currentOrgId?: string;
   orgDev: boolean;
   defaultHomePage: string | null | undefined;
-  fetchConfig: () => void;
+  fetchConfig: (orgId?: string) => void;
   getCurrentUser: () => void;
   fetchHome: () => void;
   favicon: string;
@@ -83,18 +86,22 @@ type AppIndexProps = {
 class AppIndex extends React.Component<AppIndexProps, any> {
   componentDidMount() {
     this.props.getCurrentUser();
-    if (!history.location.pathname.startsWith("/invite/")) {
-      this.props.fetchConfig();
-    }
-    if (history.location.pathname === BASE_URL) {
+    const { pathname } = history.location;
+
+    this.props.fetchConfig(this.props.currentOrgId);
+
+    if (pathname === BASE_URL) {
       this.props.fetchHome();
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: AppIndexProps) {
     if (history.location.pathname === BASE_URL) {
       this.props.fetchHome();
     }
+    if(prevProps.currentOrgId !== this.props.currentOrgId) {
+      this.props.fetchConfig(this.props.currentOrgId);
+    }
   }
 
   render() {
@@ -103,7 +110,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
     // make sure all users in this app have checked login info
     if (
       !this.props.isFetchUserFinished ||
-      this.props.isFetchingConfig ||
+      // this.props.isFetchingConfig ||
       (pathname === BASE_URL && !this.props.isFetchHomeFinished)
     ) {
       const hideLoadingHeader = isTemplate || isAuthUnRequired(pathname);
@@ -153,6 +160,8 @@ class AppIndex extends React.Component<AppIndexProps, any> {
               component={ApplicationHome}
             />
             <LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
+            <LazyRoute path={ORG_AUTH_LOGIN_URL} component={LazyUserAuthComp} />
+            <LazyRoute path={ORG_AUTH_REGISTER_URL} component={LazyUserAuthComp} />
             <LazyRoute path={INVITE_LANDING_URL} component={LazyInviteLanding} />
             <LazyRoute path={`${COMPONENT_DOC_URL}/:name`} component={LazyComponentDoc} />
             <LazyRoute path={`/playground/:name/:dsl`} component={LazyComponentPlayground} />
@@ -176,8 +185,9 @@ class AppIndex extends React.Component<AppIndexProps, any> {
 
 const mapStateToProps = (state: AppState) => ({
   isFetchUserFinished: isFetchUserFinished(state),
-  isFetchingConfig: getSystemConfigFetching(state),
+  // isFetchingConfig: getSystemConfigFetching(state),
   orgDev: state.ui.users.user.orgDev,
+  currentOrgId: state.ui.users.user.currentOrgId,
   defaultHomePage: state.ui.application.homeOrg?.commonSettings.defaultHomePage,
   isFetchHomeFinished: state.ui.application.loadingStatus.fetchHomeDataFinished,
   favicon: getBrandingConfig(state)?.favicon
@@ -190,7 +200,7 @@ const mapDispatchToProps = (dispatch: any) => ({
   getCurrentUser: () => {
     dispatch(fetchUserAction());
   },
-  fetchConfig: () => dispatch(fetchConfigAction()),
+  fetchConfig: (orgId?: string) => dispatch(fetchConfigAction(orgId)),
   fetchHome: () => dispatch(fetchHomeData({})),
 });
 

diff --git a/client/packages/lowcoder/src/constants/authConstants.ts b/client/packages/lowcoder/src/constants/authConstants.ts
@@ -3,6 +3,8 @@ import {
   AUTH_LOGIN_URL,
   AUTH_REGISTER_URL,
   OAUTH_REDIRECT,
+  ORG_AUTH_LOGIN_URL,
+  ORG_AUTH_REGISTER_URL,
 } from "constants/routesURL";
 import { InviteInfo } from "api/inviteApi";
 import Login, { ThirdPartyBindCard } from "pages/userAuth/login";
@@ -73,6 +75,8 @@ export const AuthRoutes: Array<{ path: string; component: React.ComponentType<an
   { path: AUTH_BIND_URL, component: ThirdPartyBindCard },
   { path: AUTH_REGISTER_URL, component: UserRegister },
   { path: OAUTH_REDIRECT, component: AuthRedirect },
+  { path: ORG_AUTH_LOGIN_URL, component: Login },
+  { path: ORG_AUTH_REGISTER_URL, component: UserRegister },
 ];
 
 export type ServerAuthType = "GOOGLE" | "GITHUB" | "FORM";

diff --git a/client/packages/lowcoder/src/constants/routesURL.ts b/client/packages/lowcoder/src/constants/routesURL.ts
@@ -41,6 +41,8 @@ export const CAS_AUTH_REDIRECT = `${USER_AUTH_URL}/cas/redirect`;
 export const LDAP_AUTH_LOGIN_URL = `${USER_AUTH_URL}/ldap/login`;
 export const USER_INFO_COMPLETION = `${USER_AUTH_URL}/completion`;
 export const INVITE_LANDING_URL = "/invite/:invitationId";
+export const ORG_AUTH_LOGIN_URL = `/org/:orgId/auth/login`;
+export const ORG_AUTH_REGISTER_URL = `/org/:orgId/auth/register`;
 
 export const APPLICATION_VIEW_URL = (appId: string, viewMode: AppViewMode) =>
   `${ALL_APPLICATIONS_URL}/${appId}/${viewMode}`;
@@ -49,6 +51,8 @@ export const isAuthUnRequired = (pathname: string): boolean => {
   return (
     pathname.startsWith("/invite/") ||
     pathname.startsWith(USER_AUTH_URL) ||
+    pathname.endsWith('/auth/login') ||
+    pathname.endsWith('/auth/register') ||
     pathname.startsWith(COMPONENT_DOC_URL)
   );
 };

diff --git a/client/packages/lowcoder/src/pages/common/inviteLanding.tsx b/client/packages/lowcoder/src/pages/common/inviteLanding.tsx
@@ -58,7 +58,7 @@ function InviteLanding(props: InviteLandingProp) {
         messageInstance.error(errorResp.message);
         history.push(BASE_URL);
       }).finally(() => {
-        fetchConfig(orgId);
+        // fetchConfig(orgId);
       });
   }, [fetchUserFinished, invitationId, fetchConfig]);
   return null;

diff --git a/client/packages/lowcoder/src/pages/userAuth/authUtils.ts b/client/packages/lowcoder/src/pages/userAuth/authUtils.ts
@@ -23,7 +23,7 @@ import {
 } from "constants/authConstants";
 
 export const AuthContext = createContext<{
-  systemConfig: SystemConfig;
+  systemConfig?: SystemConfig;
   inviteInfo?: AuthInviteInfo;
   thirdPartyAuthError?: boolean;
 }>(undefined as any);

diff --git a/client/packages/lowcoder/src/pages/userAuth/formLogin.tsx b/client/packages/lowcoder/src/pages/userAuth/formLogin.tsx
@@ -6,7 +6,7 @@ import {
   LoginCardTitle,
   StyledRouteLink,
 } from "pages/userAuth/authComponents";
-import React, { useContext, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
 import UserApi from "api/userApi";
 import { useRedirectUrl } from "util/hooks";
@@ -15,8 +15,8 @@ import { UserConnectionSource } from "@lowcoder-ee/constants/userConstants";
 import { trans } from "i18n";
 import { AuthContext, useAuthSubmit } from "pages/userAuth/authUtils";
 import { ThirdPartyAuth } from "pages/userAuth/thirdParty/thirdPartyAuth";
-import { AUTH_REGISTER_URL } from "constants/routesURL";
-import { useLocation } from "react-router-dom";
+import { AUTH_REGISTER_URL, ORG_AUTH_REGISTER_URL } from "constants/routesURL";
+import { useLocation, useParams } from "react-router-dom";
 import { Divider } from "antd";
 
 const AccountLoginWrapper = styled(FormWrapperMobile)`
@@ -25,15 +25,26 @@ const AccountLoginWrapper = styled(FormWrapperMobile)`
   margin-bottom: 106px;
 `;
 
-export default function FormLogin() {
+type FormLoginProps = {
+  organizationId?: string;
+}
+
+export default function FormLogin(props: FormLoginProps) {
   const [account, setAccount] = useState("");
   const [password, setPassword] = useState("");
   const redirectUrl = useRedirectUrl();
   const { systemConfig, inviteInfo } = useContext(AuthContext);
   const invitationId = inviteInfo?.invitationId;
-  const invitedOrganizationId = inviteInfo?.invitedOrganizationId;
   const authId = systemConfig?.form.id;
   const location = useLocation();
+  const orgId = useParams<any>().orgId;
+
+  // const organizationId = useMemo(() => {
+  //   if(inviteInfo?.invitedOrganizationId) {
+  //     return inviteInfo?.invitedOrganizationId;
+  //   }
+  //   return orgId;
+  // }, [ inviteInfo, orgId ])
 
   const { onSubmit, loading } = useAuthSubmit(
     () =>
@@ -71,20 +82,27 @@ export default function FormLogin() {
         <ConfirmButton loading={loading} disabled={!account || !password} onClick={onSubmit}>
           {trans("userAuth.login")}
         </ConfirmButton>
-
-        <Divider />
-        <ThirdPartyAuth
-          invitationId={invitationId}
-          invitedOrganizationId={invitedOrganizationId}
-          authGoal="login"
-        />
+
+        {props.organizationId && (
+          <>
+            <Divider />
+            <ThirdPartyAuth
+              invitationId={invitationId}
+              invitedOrganizationId={props.organizationId}
+              authGoal="login"
+            />
+          </>
+        )}
       </AccountLoginWrapper>
       <AuthBottomView>
-        {systemConfig.form.enableRegister && (
-          <StyledRouteLink to={{ pathname: AUTH_REGISTER_URL, state: location.state }}>
-            {trans("userAuth.register")}
-          </StyledRouteLink>
-        )}
+        <StyledRouteLink to={{
+          pathname: orgId
+            ? ORG_AUTH_REGISTER_URL.replace(':orgId', orgId)
+            : AUTH_REGISTER_URL,
+          state: location.state
+        }}>
+          {trans("userAuth.register")}
+        </StyledRouteLink>
       </AuthBottomView>
     </>
   );

diff --git a/client/packages/lowcoder/src/pages/userAuth/index.tsx b/client/packages/lowcoder/src/pages/userAuth/index.tsx
@@ -1,19 +1,39 @@
 import { AUTH_LOGIN_URL, USER_AUTH_URL } from "constants/routesURL";
-import { Redirect, Route, Switch, useLocation } from "react-router-dom";
-import React from "react";
-import { useSelector } from "react-redux";
+import { Redirect, Route, Switch, useLocation, useParams } from "react-router-dom";
+import React, { useEffect, useMemo } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
 import { AuthContext } from "pages/userAuth/authUtils";
 import { AuthRoutes } from "@lowcoder-ee/constants/authConstants";
 import { AuthLocationState } from "constants/authConstants";
 import { ProductLoading } from "components/ProductLoading";
+import { fetchConfigAction } from "redux/reduxActions/configActions";
+import _ from "lodash";
 
 export default function UserAuth() {
+  const dispatch = useDispatch();
   const location = useLocation<AuthLocationState>();
-  const systemConfig = useSelector(selectSystemConfig);
-  if (!systemConfig) {
+  const systemConfig = useSelector(selectSystemConfig, _.isEqual);
+  const orgId = useParams<any>().orgId;
+  const inviteInfo = location.state?.inviteInfo;
+
+  const organizationId = useMemo(() => {
+    if(inviteInfo?.invitedOrganizationId) {
+      return inviteInfo?.invitedOrganizationId;
+    }
+    return orgId;
+  }, [ orgId, inviteInfo ])
+
+  useEffect(() => {
+    if(organizationId) {
+      dispatch(fetchConfigAction(organizationId));
+    }
+  }, [organizationId, dispatch])
+
+  if (organizationId && !systemConfig) {
     return <ProductLoading hideHeader />;
   }
+
   return (
     <AuthContext.Provider
       value={{
@@ -25,7 +45,7 @@ export default function UserAuth() {
       <Switch location={location}>
         <Redirect exact from={USER_AUTH_URL} to={AUTH_LOGIN_URL} />
         {AuthRoutes.map((route) => (
-          <Route key={route.path} exact path={route.path} component={route.component} />
+          <Route key={route.path} path={route.path} component={route.component} />
         ))}
       </Switch>
     </AuthContext.Provider>

diff --git a/client/packages/lowcoder/src/pages/userAuth/login.tsx b/client/packages/lowcoder/src/pages/userAuth/login.tsx
@@ -1,11 +1,11 @@
-import { useLocation } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { AuthSearchParams } from "constants/authConstants";
 import { CommonTextLabel } from "components/Label";
 import { trans } from "i18n";
 import { ThirdPartyAuth } from "pages/userAuth/thirdParty/thirdPartyAuth";
 import FormLogin from "@lowcoder-ee/pages/userAuth/formLogin";
 import { AuthContainer } from "pages/userAuth/authComponents";
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import { AuthContext, getLoginTitle } from "pages/userAuth/authUtils";
 import styled from "styled-components";
 import { requiresUnAuth } from "pages/userAuth/authHOC";
@@ -69,8 +69,8 @@ export const ThirdPartyBindCard = () => {
         <ThirdPartyAuth
           authGoal="bind"
           autoJumpSource={
-            systemConfig.authConfigs.length === 1
-              ? systemConfig.authConfigs[0].sourceType
+            systemConfig?.authConfigs.length === 1
+              ? systemConfig?.authConfigs[0].sourceType
               : undefined
           }
           labelFormatter={thirdPartyLoginLabel}
@@ -85,7 +85,9 @@ function Login() {
   const invitationId = inviteInfo?.invitationId;
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
-  const loginType = systemConfig.authConfigs.find(
+  const orgId = useParams<any>().orgId;
+
+  const loginType = systemConfig?.authConfigs.find(
     (config) => config.sourceType === queryParams.get(AuthSearchParams.loginType)
   )?.sourceType;
   let autoJumpSource: string | undefined;
@@ -96,6 +98,13 @@ function Login() {
     autoJumpSource = systemConfig.authConfigs[0].sourceType;
   }
 
+  const organizationId = useMemo(() => {
+    if(inviteInfo?.invitedOrganizationId) {
+      return inviteInfo?.invitedOrganizationId;
+    }
+    return orgId;
+  }, [ inviteInfo, orgId ])
+
   const thirdPartyLoginView = (
     <ThirdAuthWrapper>
       {!autoJumpSource && (
@@ -116,16 +125,18 @@ function Login() {
   if (loginType) {
     loginCardView = thirdPartyLoginView;
     // Specify the login type with query param
-  } else if (systemConfig.form.enableLogin) {
-    loginCardView = <FormLogin />;
+  } else if (systemConfig?.form.enableLogin) {
+    loginCardView = <FormLogin organizationId={organizationId} />;
   } else {
     loginCardView = thirdPartyLoginView;
   }
 
+  const loginTitle = organizationId && LOWCODER_CUSTOM_AUTH_WELCOME_TEXT !== ""
+    ? LOWCODER_CUSTOM_AUTH_WELCOME_TEXT
+    : getLoginTitle(inviteInfo?.createUserName, systemConfig?.branding?.brandName)
+
   return (
-    <AuthContainer
-      title={getLoginTitle(inviteInfo?.createUserName, systemConfig.branding?.brandName)}
-    >
+    <AuthContainer title={loginTitle} >
       {loginCardView}
     </AuthContainer>
   );