Enabling selection of OAuth Token in FE

Author: FalkWolsky

.DS_Store

@@ -9,3 +9,4 @@ client/node_modules/
 client/packages/lowcoder-plugin-demo/.yarn/install-state.gz
 client/packages/lowcoder-plugin-demo/yarn.lock
 client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip
+.DS_Store

.gitignore

@@ -102,6 +102,7 @@ export interface HttpConfig {
 
   authConfig: {
     type: AuthType;
+    authId?: string;
   } & (
     | {
         username: string; // basic auth

client/packages/lowcoder/src/api/datasourceApi.ts

@@ -11,6 +11,7 @@ export const UserConnectionSource = {
 };
 
 export type UserConnection = {
+  authId: any;
   source: string;
   name: string;
   rawUserInfo?: JSONObject;

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

@@ -1,5 +1,5 @@
 import { Rule } from "antd/lib/form";
-import { HttpConfig } from "api/datasourceApi";
+import { HttpConfig, OAuthConfig } from "api/datasourceApi";
 import {
   DatasourceForm,
   FormInputItem,
@@ -21,12 +21,14 @@ import {
 } from "../form";
 import { DatasourceFormProps } from "./datasourceFormRegistry";
 import { useHostCheck } from "./useHostCheck";
+import { useSelector } from "react-redux";
+import { getUser } from "redux/selectors/usersSelectors";
 
 const AuthTypeOptions = [
   { label: "None", value: "NO_AUTH" },
   { label: "Basic", value: "BASIC_AUTH" },
   { label: "Digest", value: "DIGEST_AUTH" },
-  { label: "OAuth 2.0(Inherit from login)", value: "OAUTH2_INHERIT_FROM_LOGIN" },
+  { label: "OAuth 2.0 (Inherit from login)", value: "OAUTH2_INHERIT_FROM_LOGIN" },
   // { label: "OAuth 2.0", value: "oAuth2" },
 ] as const;
 
@@ -50,7 +52,16 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
   const datasourceConfig = datasource?.datasourceConfig as HttpConfig;
   // const oauthConfig = datasourceConfig?.authConfig as OAuthConfig;
 
+  // here we get the Auth Sources from a user to enable user impersonation
+  const userAuthSources = useSelector(getUser).connections?.filter(authSource => authSource.source !== "EMAIL");;
+  const userAuthSourcesOptions = userAuthSources?.map(item => ({
+    label: item.source,
+    value: item.authId
+  })) || [];
+
   const [authType, setAuthType] = useState(datasourceConfig?.authConfig?.type);
+  const [authId, setAuthId] = useState(datasourceConfig?.authConfig?.authId);
+  
   // const [grantType, setGrantType] = useState(oauthConfig?.grantType ?? "authorization_code");
 
   const hostRule = useHostCheck();
@@ -98,6 +109,22 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
     }
   };
 
+  const showUserAuthSourceSelector = () => {
+    if (authType === "OAUTH2_INHERIT_FROM_LOGIN") {
+      return (
+        <FormSelectItem
+          name={"authId"}
+          label="User Authentication Source"
+          options={userAuthSourcesOptions}
+          initialValue={datasourceConfig?.authConfig?authId : null}
+          afterChange={(value) => setAuthId(value) }
+          labelWidth={142}
+        />
+      );
+    }
+    return null;
+  };
+
   return (
     <DatasourceForm form={form} preserve={false}>
       <FormSection size={props.size}>
@@ -149,6 +176,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
           afterChange={(value) => setAuthType(value)}
           labelWidth={142}
         />
+        {showUserAuthSourceSelector()}
         {showAuthItem(authType)}
       </FormSection>
 

client/packages/lowcoder/src/pages/datasource/form/httpDatasourceForm.tsx

@@ -50,6 +50,7 @@ export function useDatasourceForm() {
             ...config,
             authConfig: {
               type: form.getFieldsValue()["authConfigType"],
+              authId: form.getFieldsValue()["authId"],
               username: form.getFieldsValue()["username"],
               password: form.getFieldsValue()["password"],
             },