Finish frame for LDAP auth

2026-10-14 00:29:34 +00:00 · 2024-02-23 10:00:30 -08:00
parent acfa89ba8b
commit 5053069bfc
51 changed files with 1652 additions and 68 deletions
@@ -14,6 +14,8 @@ import {
  Login1Res,
  Login2DTO,
  Login2Res,
+  LoginLDAPDTO,
+  LoginLDAPRes,
  ResetPasswordDTO,
  SendMfaTokenDTO,
  SRP1DTO,
@@ -37,6 +39,11 @@ export const login2 = async (loginDetails: Login2DTO) => {
  return data;
 };

+export const loginLDAPRedirect = async (loginLDAPDetails: LoginLDAPDTO) => {
+  const { data } = await apiRequest.post<LoginLDAPRes>("/api/v1/ldap/login", loginLDAPDetails); // return if account is complete or not + provider auth token
+  return data;
+}
+
 export const useLogin1 = () => {
  return useMutation({
    mutationFn: async (details: {
@@ -53,6 +53,16 @@ export type Login2Res = {
  tag?: string;
 }

+export type LoginLDAPDTO = {
+  organizationSlug: string;
+  username: string;
+  password: string;
+}
+
+export type LoginLDAPRes = {
+  nextUrl: string;
+}
+
 export type SRP1DTO = {
  clientPublicKey: string;
 }
@@ -8,6 +8,7 @@ export * from "./incidentContacts";
 export * from "./integrationAuth";
 export * from "./integrations";
 export * from "./keys";
+export * from "./ldapConfig";
 export * from "./organization";
 export * from "./roles";
 export * from "./scim";
@@ -0,0 +1,5 @@
+export {
+    useCreateLDAPConfig,
+    useGetLDAPConfig,
+    useUpdateLDAPConfig
+} from "./queries";
@@ -0,0 +1,103 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+const ldapConfigKeys = {
+  getLDAPConfig: (orgId: string) => [{ orgId }, "organization-ldap"] as const,
+}
+
+export const useGetLDAPConfig = (organizationId: string) => {
+  return useQuery({
+    queryKey: ldapConfigKeys.getLDAPConfig(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get(
+        `/api/v1/ldap/config?organizationId=${organizationId}`
+      );
+
+      return data;
+    },
+    enabled: true
+  });
+}
+
+export const useCreateLDAPConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+        organizationId,
+        isActive,
+        url,
+        bindDN,
+        bindPass,
+        searchBase,
+        caCert
+    }: {
+        organizationId: string;
+        isActive: boolean;
+        url: string;
+        bindDN: string;
+        bindPass: string;
+        searchBase: string;
+        caCert?: string;
+    }) => {
+      const { data } = await apiRequest.post(
+        "/api/v1/ldap/config",
+        {
+            organizationId,
+            isActive,
+            url,
+            bindDN,
+            bindPass,
+            searchBase,
+            caCert
+        }
+      );
+      
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(ldapConfigKeys.getLDAPConfig(dto.organizationId));
+    }
+  });
+};
+
+export const useUpdateLDAPConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+        organizationId,
+        isActive,
+        url,
+        bindDN,
+        bindPass,
+        searchBase,
+        caCert
+    }: {
+        organizationId: string;
+        isActive?: boolean;
+        url?: string;
+        bindDN?: string;
+        bindPass?: string;
+        searchBase?: string;
+        caCert?: string;
+    }) => {
+      const { data } = await apiRequest.patch(
+        "/api/v1/ldap/config",
+        {
+            organizationId,
+            isActive,
+            url,
+            bindDN,
+            bindPass,
+            searchBase,
+            caCert
+        }
+      );
+      
+      return data;
+    },
+    onSuccess(_, dto) {
+      queryClient.invalidateQueries(ldapConfigKeys.getLDAPConfig(dto.organizationId));
+    }
+  });
+};
@@ -7,9 +7,9 @@ import { getAuthToken, isLoggedIn } from "@app/reactQuery";

 import { 
    InitialStep,
+    LDAPStep,
    MFAStep,
-    SAMLSSOStep
-} from "./components";
+    SAMLSSOStep} from "./components";
 import { navigateUserToOrg } from "./Login.utils";

 export const Login = () => {
@@ -72,7 +72,10 @@ export const Login = () => {
                return (
                    <SAMLSSOStep setStep={setStep} />
                );
-            
+            case 3:
+                return (
+                    <LDAPStep setStep={setStep} />
+                );
            default:
                return <div />;
        }
@@ -180,7 +180,20 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
          className="mx-0 h-10 w-full"
        >
-          Continue with SAML SSO
+          Continue with SAML
+        </Button>
+      </div>
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            setStep(3);
+          }}
+          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+          className="mx-0 h-10 w-full"
+        >
+          Continue with LDAP
        </Button>
      </div>
      <div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, Input } from "@app/components/v2";
+import { loginLDAPRedirect } from "@app/hooks/api/auth/queries";
+
+type Props = {
+    setStep: (step: number) => void;
+}
+
+export const LDAPStep = ({
+    setStep
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const [organizationSlug, setOrganizationSlug] = useState("");
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    
+    const { t } = useTranslation();
+
+    // const queryParams = new URLSearchParams(window.location.search);
+
+    const handleSubmission = async (e:React.FormEvent) => {
+        e.preventDefault()
+        try {
+            const { nextUrl } = await loginLDAPRedirect({
+                organizationSlug,
+                username,
+                password
+            });
+            
+            createNotification({
+                text: "Successfully logged in",
+                type: "success"
+            });
+
+            // redirects either to /login/sso or /signup/sso
+            window.open(nextUrl);
+            window.close();
+        } catch (err) {
+            createNotification({
+                text: "Login unsuccessful. Double-check your credentials and try again.",
+                type: "error"
+            });
+        }
+        
+        // TODO: add callback port support
+        
+        // const callbackPort = queryParams.get("callback_port");
+        // window.open(`/api/v1/ldap/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+        // window.close();
+    }
+
+    return (
+        <div className="mx-auto w-full max-w-md md:px-6">
+            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
+                What&apos;s your LDAP Login?
+            </p>
+            <form onSubmit={handleSubmission}>
+            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
+                <Input
+                    value={organizationSlug}
+                    onChange={(e) => setOrganizationSlug(e.target.value)}
+                    type="text"
+                    placeholder="Enter your organization slug..."
+                    isRequired
+                    autoComplete="email"
+                    id="email"
+                    className="h-12"
+                />
+                </div>
+            </div>
+            <div className="mt-2 relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
+                <Input
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    type="text"
+                    placeholder="Enter your LDAP username..."
+                    isRequired
+                    autoComplete="email"
+                    id="email"
+                    className="h-12"
+                />
+                </div>
+            </div>
+            <div className="mt-2 relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
+                <Input
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    type="password"
+                    placeholder="Enter your LDAP password..."
+                    isRequired
+                    autoComplete="current-password"
+                    id="current-password"
+                    className="select:-webkit-autofill:focus h-10"
+                />
+                </div>
+            </div>
+            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
+                <Button
+                    type="submit" 
+                    colorSchema="primary" 
+                    variant="outline_bg"
+                    isFullWidth
+                    className="h-14"
+                > 
+                    {t("login.login")} 
+                </Button>
+            </div>
+            </form>
+            <div className="flex flex-row items-center justify-center mt-4">
+                <button
+                onClick={() => {
+                    setStep(0);
+                }}
+                type="button"
+                className="text-bunker-300 text-sm hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
+                >
+                {t("login.other-option")}
+                </button>
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1 @@
+export { LDAPStep } from "./LDAPStep";
@@ -1,4 +1,5 @@
 export { InitialStep } from "./InitialStep";
+export { LDAPStep } from "./LDAPStep";
 export { MFAStep } from "./MFAStep";
 export { SAMLSSOStep } from "./SAMLSSOStep";

@@ -0,0 +1,228 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Input,
+    Modal,
+    ModalContent,
+    TextArea
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+    useCreateLDAPConfig,
+    useGetLDAPConfig,
+    useUpdateLDAPConfig
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+    url: yup.string().required("URL is required"),
+    bindDN: yup.string().required("Bind DN is required"),
+    bindPass: yup.string().required("Bind Pass is required"),
+    searchBase: yup.string().required("Search Base is required"),
+    caCert: yup.string()
+}).required();
+
+export type AddLDAPFormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["addLDAP"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addLDAP"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addLDAP"]>, state?: boolean) => void;
+};
+
+export const LDAPModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
+    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
+    const { data } = useGetLDAPConfig(currentOrg?.id?? "");
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+    } = useForm<AddLDAPFormData>({
+        resolver: yupResolver(schema)
+    });
+    
+    useEffect(() => {
+        if (data) {
+            reset({
+                url: data?.url ?? "",
+                bindDN: data?.bindDN ?? "",
+                bindPass: data?.bindPass ?? "",
+                searchBase: data?.searchBase ?? "",
+                caCert: data?.caCert ?? ""
+            });
+        }
+    }, [data]);
+    
+    const onSSOModalSubmit = async ({
+        url,
+        bindDN,
+        bindPass,
+        searchBase,
+        caCert
+    }: AddLDAPFormData) => {
+        try {
+            if (!currentOrg) return;
+            
+            if (!data) {
+                await createMutateAsync({
+                    organizationId: currentOrg.id,
+                    isActive: false,
+                    url,
+                    bindDN,
+                    bindPass,
+                    searchBase,
+                    caCert
+                });
+            } else {
+                await updateMutateAsync({
+                    organizationId: currentOrg.id,
+                    isActive: false,
+                    url,
+                    bindDN,
+                    bindPass,
+                    searchBase,
+                    caCert
+                });
+            }
+
+            handlePopUpClose("addLDAP");
+
+            createNotification({
+                text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${!data ? "add" : "update"} LDAP configuration`,
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <Modal
+            isOpen={popUp?.addLDAP?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addLDAP", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add LDAP">
+                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+                    <Controller
+                            control={control}
+                            name="url"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="URL"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="ldaps://ldap.myorg.com:636"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="bindDN"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Bind DN"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="cn=infisical,ou=Users,dc=example,dc=com"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="bindPass"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Bind Pass"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="********"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="searchBase"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Search Base / User DN"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="ou=people,dc=acme,dc=com"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="caCert"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="CA Certificate"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <TextArea 
+                                        {...field} 
+                                        placeholder="-----BEGIN CERTIFICATE----- ..."
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                    <div className="mt-8 flex items-center">
+                        <Button
+                            className="mr-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={createIsLoading || updateIsLoading}
+                        >
+                            {!data ? "Add" : "Update"}
+                        </Button>
+                        <Button 
+                            colorSchema="secondary" 
+                            variant="plain"
+                            onClick={() => handlePopUpClose("addLDAP")}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}
@@ -2,6 +2,7 @@ import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";

 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
+import { OrgLDAPSection } from "./OrgLDAPSection";
 import { OrgScimSection } from "./OrgSCIMSection";
 import { OrgSSOSection } from "./OrgSSOSection";

@@ -11,6 +12,7 @@ export const OrgAuthTab = withPermission(
      <div>
        <OrgGeneralAuthSection />
        <OrgSSOSection />
+        <OrgLDAPSection />
        <OrgScimSection />
      </div>
    );
@@ -0,0 +1,137 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, Switch } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+} from "@app/context";
+import { 
+    useCreateLDAPConfig,
+    useGetLDAPConfig,
+    useUpdateLDAPConfig
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { LDAPModal } from "./LDAPModal";
+
+export const OrgLDAPSection = (): JSX.Element => {
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { data, isLoading } = useGetLDAPConfig(currentOrg?.id ?? "");
+  const { mutateAsync } = useUpdateLDAPConfig();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "addLDAP"
+  ] as const);
+  
+  const { mutateAsync: createMutateAsync } = useCreateLDAPConfig();
+
+  const handleSamlSSOToggle = async (value: boolean) => { // TODO: rename to LDAP toggle
+    try {
+      if (!currentOrg?.id) return;
+
+      await mutateAsync({
+        organizationId: currentOrg?.id,
+        isActive: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} LDAP`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${value ? "enable" : "disable"} LDAP`,
+        type: "error"
+      });
+    }
+  };
+
+  const addLDAPBtnClick = async () => {
+    try {
+      if (currentOrg) {
+        if (!data) {
+          // case: LDAP is not configured
+          // -> initialize empty LDAP configuration
+          await createMutateAsync({
+            organizationId: currentOrg.id,
+            isActive: false,
+            url: "",
+            bindDN: "",
+            bindPass: "",
+            searchBase: "",
+          });
+        }
+
+        handlePopUpOpen("addLDAP");
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
+      <div className="flex items-center mb-8">
+        <h2 className="text-xl font-semibold flex-1 text-white">LDAP Configuration</h2>
+        {!isLoading && (
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Button
+                onClick={addLDAPBtnClick}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              >
+                {data ? "Update LDAP" : "Set up LDAP"}
+              </Button>
+            )}
+          </OrgPermissionCan>
+        )}
+      </div>
+      {data && (
+        <div className="mb-4">
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+            {(isAllowed) => (
+              <Switch
+                id="enable-saml-sso"
+                onCheckedChange={(value) => handleSamlSSOToggle(value)}
+                isChecked={data ? data.isActive : false}
+                isDisabled={!isAllowed}
+              >
+                Enable LDAP
+              </Switch>
+            )}
+          </OrgPermissionCan>
+        </div>
+      )}
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">URL</h3>
+        <p className="text-gray-400 text-md">{data && data.url !== "" ? data.url : "-"}</p>
+      </div>
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">Bind DN</h3>
+        <p className="text-gray-400 text-md">{data && data.bindDN !== "" ? data.bindDN : "-"}</p>
+      </div>
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">Bind Pass</h3>
+        <p className="text-gray-400 text-md">
+          {data && data.bindPass !== "" ? "*".repeat(data.bindPass.length) : "-"}
+        </p>
+      </div>
+      <div className="mb-4">
+        <h3 className="text-mineshaft-400 text-sm">Search Base / User DN</h3>
+        <p className="text-gray-400 text-md">{data && data.searchBase !== "" ? data.searchBase : "-"}</p>
+      </div>
+      <LDAPModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    </div>
+  );
+};