[cueweb] Add CueWeb LDAP Authentication (#2096)

**Link the Issue(s) this Pull Request is related to.**
- #2097

**Summarize your change**

Add LDAP Authentication in CueWeb.  
- NextAuth Integration: Use
https://next-auth.js.org/providers/credentials with
https://www.npmjs.com/package/ldapjs
- Security:
  - Encrypt LDAP connections via TLS with custom certificate support
  - LDAP injection protection by escaping special DN characters
  - Input validation for empty username/password
- Configuration: Customizable Distinguished Name template

- DN is specified as a string template:
```tsx
dnTemplate = "uid={login},cn=users,cn=accounts,dc=company,dc=com"
dn = dnTemplate.replace("{login}", "username")
```

- Update cueweb/README.md
- Update documentation:
- docs/_docs/other-guides/cueweb.md -
https://docs.opencue.io/docs/other-guides/cueweb/
- docs/_docs/getting-started/deploying-cueweb.md -
https://docs.opencue.io/docs/getting-started/deploying-cueweb/
- Add LDAP authentication screenshots to documentation:
`cueweb-ldap-button.png` and `cueweb-ldap-login-password-page.png`

**Why this change is important?**

It can be more convenient to use the company's OpenLDAP for
authentication purposes. Fully intranet and can be easier for security
constraints.

**Screenshots**
<img width="531" height="176" alt="Capture d’écran 2025-12-09 à 00 05
57"
src="https://github.com/user-attachments/assets/f65b565b-799c-4f7a-82cd-af9c0a2c8962"
/>

<img width="657" height="252" alt="image"
src="https://github.com/user-attachments/assets/5afd3f85-6378-4eac-ab4d-8eeb3ab5b4b4"
/>


Co-authored-by: Alexis Oblet <[email protected]>
Co-authored-by: Ramon Figueiredo <[email protected]>

Author: aoblet

cueweb/.env.example

@@ -8,10 +8,15 @@ SENTRY_ORG = sentryorg
 SENTRY_PROJECT = sentryproject
 
 # Authentication Configuration:
-NEXT_PUBLIC_AUTH_PROVIDER=github,okta,google
+NEXT_PUBLIC_AUTH_PROVIDER=github,okta,google,ldap
 NEXTAUTH_URL=http://localhost:3000
 NEXTAUTH_SECRET=canbeanything
 
+# LDAP
+LDAP_URI=ldaps://company.ldap:636
+LDAP_LOGIN_DN="uid={login},cn=users,cn=accounts,dc=tobeoverriden"
+LDAP_CERTIFICATE=/etc/ssl/custom.crt
+
 # values from Okta OAuth 2.0
 NEXT_AUTH_OKTA_CLIENT_ID=oktaid
 NEXT_AUTH_OKTA_ISSUER=https://company.okta.com

cueweb/Dockerfile

@@ -57,12 +57,15 @@ ENV SENTRY_PROJECT=tobeoverriden
 ENV SENTRY_URL=tobeoverriden
 ENV SENTRY_ORG=tobeoverriden
 ENV SENTRY_DSN=tobeoverriden
+ENV LDAP_LOGIN_DN=tobeoverriden
+ENV LDAP_CERTIFICATE=tobeoverriden
+ENV LDAP_URI=tobeoverriden
 
 # The following environment variables need to be accurately defined during production or dev builds as their
 # values cannot be changed after build time
 ENV NEXT_PUBLIC_URL=tobeoverriden
 ENV NEXT_PUBLIC_OPENCUE_ENDPOINT=tobeoverriden
-ENV NEXT_PUBLIC_AUTH_PROVIDER=google,okta,github
+ENV NEXT_PUBLIC_AUTH_PROVIDER=google,okta,github,ldap
 
 RUN npm run build
 CMD ["npm", "run", "start"]

cueweb/README.md

@@ -225,9 +225,9 @@ Go back to [Contents](#contents).
 
 ### Configuration
 
-To enable Okta, Google or Github authentication, simply set the environment variable
-`NEXT_PUBLIC_AUTH_PROVIDER` to either `google`, `okta`,`github` or all of them combined seperated by comma
-(e.g. `google,okta,github`) along with  the OAuth 2.0 secrets listed in `lib/auth.ts`. 
+To enable Okta, Google, Github or LDAP authentication, simply set the environment variable
+`NEXT_PUBLIC_AUTH_PROVIDER` to either `google`, `okta`, `github`, `ldap` or all of them combined separated by comma
+(e.g. `google,okta,github,ldap`) along with  the OAuth 2.0 secrets listed in `lib/auth.ts`. 
 For example, providing the `GOOGLE_CLIENT_ID`, 
 `GOOGLE_CLIENT_SECRET` Google OAuth 2.0 environment variables and setting `NEXT_PUBLIC_AUTH_PROVIDER=google`
 will automatically enable google authentication. See `.env.example` on a list of environment variables to provide.

cueweb/app/login/ldap/page.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+// Custom authentication page
+import { signIn } from "next-auth/react";
+import React from "react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import CueWebIcon from "@/components/ui/cuewebicon";
+import { handleError } from "@/app/utils/notify_utils";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export default function Page() {
+    const router = useRouter();
+    const [name, setName] = useState("");
+    const [password, setPassword] = useState("");
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        let res = null;
+
+        try {
+            res = await signIn("credentials", {
+                redirect: false,
+                name,
+                password,
+            });
+        } catch(error) {
+            handleError(error, "An error occured on server side")
+            return;
+        }
+
+        if (res?.error){
+            handleError(res?.error, "Authentication Failed")
+            return;
+        }
+
+        // Redirect on success
+        router.push("/");
+    };
+
+
+    return (
+        <div className="flex flex-col sm:flex-row w-full justify-center items-center h-screen bg-gray-100 
+            dark:bg-gray-800">
+            <ToastContainer />
+            <div className="flex flex-col sm:flex-row sm:space-x-20 max-w-[100vh] bg-white dark:bg-black sm:px-16 
+                sm:py-8 rounded-xl">
+                <div className="flex flex-col justify-center items-center">
+                    <CueWebIcon/>
+                </div>
+                <form onSubmit={handleSubmit}>
+                    <div className="flex flex-col w-full space-y-3 ">
+                        <div className="mb-4">
+                            <input type="text" name="name" placeholder="Login" value={name} onChange={(e) => setName(e.target.value)} className="w-full px-3 py-2 border rounded" required />
+                        </div>
+                        <div className="mb-4">
+                            <input type="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full px-3 py-2 border rounded" required />
+                        </div>
+                        <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition" > Sign In </button>    
+                    </div>
+                </form>
+            </div>
+        </div>
+        
+    );
+}

cueweb/app/login/page.tsx

@@ -4,7 +4,7 @@
 import { signIn } from "next-auth/react";
 import React from "react";
 import { useRouter } from "next/navigation";
-import { GmailSignInButton, OktaSignInButton, GithubSignInButton, CuewebRedirectButton } from "@/components/ui/auth-button"
+import { GmailSignInButton, OktaSignInButton, GithubSignInButton, LdapSignInButton, CuewebRedirectButton } from "@/components/ui/auth-button"
 import CueWebIcon from "../../components/ui/cuewebicon";
 
 export default function Page() {
@@ -22,6 +22,10 @@ export default function Page() {
         signIn("github", { callbackUrl: "/"});
     };
 
+    const ldapLogin = async () => {
+        router.push('/login/ldap');
+    };
+
     const cuewebRedirect = () => {
         router.push('/');
     };
@@ -51,6 +55,9 @@ export default function Page() {
                         {process.env.NEXT_PUBLIC_AUTH_PROVIDER && process.env.NEXT_PUBLIC_AUTH_PROVIDER.indexOf('github') >= 0 && 
                             <GithubSignInButton onClick={githubLogin} /> 
                         }
+                        {process.env.NEXT_PUBLIC_AUTH_PROVIDER && process.env.NEXT_PUBLIC_AUTH_PROVIDER.indexOf('ldap') >= 0 && 
+                            <LdapSignInButton onClick={ldapLogin} /> 
+                        }
                     </div>
                 </div>
             </div>

cueweb/app/page.tsx

@@ -21,8 +21,14 @@ export default async function Page() {
   const session = await getServerSession(authOptions);
   let username = UNKNOWN_USER;
 
-  if (session && session.user && session.user.email) {
-    username = session.user.email.split('@')[0];
+  if (session && session.user) {
+    if (session.user.email) {
+        username = session.user.email.split('@')[0];
+    }
+    else if (session.user.name) {
+        username = session.user.name;
+    }
+
     // Increment Prometheus metric - number of log ins for this user
     try {
       await fetch(`${process.env.NEXTAUTH_URL}/api/increment?username=${username}`);

cueweb/components/ui/auth-button.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import React from "react";
 import { Button } from "@/components/ui/button"
 import oktaicon from "../../public/okta-logo.png";
-import { FaGithub } from "react-icons/fa"
+import { FaGithub, FaAddressBook } from "react-icons/fa"
 import { FcGoogle } from "react-icons/fc"
 
 export function OktaSignInButton({onClick}: {onClick: ()=> void}) {
@@ -46,6 +46,19 @@ export function GithubSignInButton({onClick}: {onClick: ()=> void}) {
     );
 }
 
+export function LdapSignInButton({onClick}: {onClick: ()=> void}) {
+    return (
+        <Button
+            className="w-full"
+            aria-label="Sign in with Domain Account"
+            onClick={onClick}
+        >
+            <FaAddressBook className="mr-2" />
+            LDAP
+        </Button>
+    );
+}
+
 export function CuewebRedirectButton({onClick}: {onClick: ()=> void}) {
     return (
         <Button

cueweb/lib/auth.ts

@@ -3,6 +3,17 @@ import { NextAuthOptions } from "next-auth";
 import OktaProvider from "next-auth/providers/okta";
 import GoogleProvider from "next-auth/providers/google";
 import GitHubProvider from "next-auth/providers/github";
+import CredentialsProvider from "next-auth/providers/credentials";
+import ldap from "ldapjs";
+import fs from "fs";
+
+/**
+ * Escapes special characters in LDAP DN components to prevent injection attacks.
+ * Characters that have special meaning in DNs: , = + < > # ; \ "
+ */
+function escapeLdapDn(str: string): string {
+    return str.replace(/[,=+<>#;\\"\x00]/g, (char) => `\\${char}`);
+}
 
 const providerConfigs = [
     {
@@ -30,6 +41,14 @@ const providerConfigs = [
             clientSecret: "GITHUB_SECRET",
         },
     },
+    {
+        type: "LDAP",
+        envKeys: {
+            url: "LDAP_URI",
+            login_dn: "LDAP_LOGIN_DN",
+            certificate: "LDAP_CERTIFICATE",
+        }
+    },
 ];
 
 interface Settings {
@@ -48,6 +67,58 @@ function loadProviderConfig(type: string, envKeys: any) {
     return settings;
 }
 
+function buildLdapProvider(settings: Settings) {
+    return CredentialsProvider({
+        name: "Domain Account",
+        credentials: {
+            name: { label: "Login", type: "text", placeholder: "" },
+            password: { label: "Password", type: "password" },
+        },
+
+        async authorize(credentials, req) {
+            if (!credentials || !credentials.name || !credentials.password)
+                return null;
+
+            // Configure TLS options if certificate is provided
+            let tls = {}
+            if(settings.certificate){
+                tls = {
+                    rejectUnauthorized: true,
+                    ca: [fs.readFileSync(settings.certificate)],
+                }
+            }
+
+            const client = ldap.createClient({
+                url: settings.url,
+                timeout: 5000,
+                connectTimeout: 3000,
+                tlsOptions: tls,
+            })
+
+
+            return new Promise((resolve, reject) => {
+                const dn = settings.login_dn.replace("{login}", escapeLdapDn(credentials.name))
+                client.bind(dn, credentials.password, (error: Error | null) => {
+                    client.unbind((unbindErr: Error | null) => {
+                        if (unbindErr) {
+                            console.error(`LDAP unbind error: ${unbindErr.message}`)
+                        }
+                    })
+                    if (error) {
+                        console.error(`LDAP bind failed for user: ${error.message}`)
+                        resolve(null)
+                    } else {
+                        resolve({
+                            id: credentials.name,
+                            name: credentials.name,
+                        })
+                    }
+                })
+            })
+        },
+    });
+}
+
 const providers = providerConfigs.map(({ type, provider, envKeys }) => {
     const settings = loadProviderConfig(type, envKeys);
     if (!settings) return null;
@@ -68,6 +139,8 @@ const providers = providerConfigs.map(({ type, provider, envKeys }) => {
             clientId: settings.clientId,
             clientSecret: settings.clientSecret,
         });
+    } else if (type === "LDAP") {
+        return buildLdapProvider(settings);
     }
     return null;
 }).filter(provider => provider !== null) as any;
@@ -77,5 +150,3 @@ export const authOptions: NextAuthOptions = {
     // Additional NextAuth configurations can be added here
 };
 
-
-