Passport-ldapauth. How do I get my passport strategy to work?

[lilac sigil]

I am trying to add LDAP authentication to my payload app by using the strategies from passport
I installed a blank payloadcms template and made the following configurations
payload version

collections/User.ts

import { CollectionConfig } from 'payload/types'

import ldapStrategy  from './auth/ldapStrategy'

const Users: CollectionConfig = {
  slug: 'users',
  // auth: true,
  auth: {
    disableLocalStrategy: true,
    strategies: [
      {
        name: 'user-ldap',
        strategy: ldapStrategy,
      }
    ],
  },
  admin: {
    useAsTitle: 'email',
  },
  fields: [
    // Email added by default
    // Add more fields as needed
  ],
}

export default Users

install passport-ldapauth
collections/auth/ldapStrategy.ts

// var LdapStrategy = require('passport-ldapauth');
import LdapStrategy  from 'passport-ldapauth';

var options = {
    server:{
        url: 'ldap://localhost:389',
        bindDN: process.env.ADMINDN,
        bindCredentials: process.env.ADMINPASSWORD,
        searchBase: process.env.USERSEARCHBASE,
        searchFilter: process.env.USERNAMEATTRIBUTE,
    }
};

const ldapStrategy = new LdapStrategy(options);
export default ldapStrategy;

This will result in a bunch of webpack errors relating to the polyfill server modules

[gleaming torrent]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• strategies
• introduction
• options
• doc
• server

[lilac sigil]

I think what I did to fix it was the following:
Add alias to collections/payload.config.ts

import path from 'path'

import { payloadCloud } from '@payloadcms/plugin-cloud'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { webpackBundler } from '@payloadcms/bundler-webpack'
import { slateEditor } from '@payloadcms/richtext-slate'
import { buildConfig } from 'payload/config'

import Users from './collections/Users'
// Alias for Passport-LDAPauth
const ldapStrategyPath = path.resolve(
  __dirname,
  "collections/auth/ldapStrategy"
);
const mockModulePath = path.resolve(__dirname, "mocks/emptyObject.js");
// webpack configured to alias
// fallbacks added due to errors after aliasing
export default buildConfig({
  admin: {
    user: Users.slug,
    bundler: webpackBundler(),
    webpack: (config: any) => ({
      ...config,
      resolve: {
        ...config.resolve,
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        alias: {
          ...config.resolve.alias,
          [ldapStrategyPath]: mockModulePath,
        },
        fallback: {
          ...config.resolve.fallback,
          fs: false,
          querystring: false,
          stream: false,
          tls: false,
          net: false,
          "dtrace-provider": false,
          utils: false,
        },
      },
      // target: 'node',
      // externals: [nodeExternals({})],
    }),
  },
  
  editor: slateEditor({}),
  collections: [Users],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
  plugins: [payloadCloud()],
  db: mongooseAdapter({
    url: process.env.DATABASE_URI,
  }),
})

Deleted .cache in node_modules
Run npm install
Finally webpack will successfully compile
But when i go to localhost:3000/admin
The page will be blank with the following error in the console:

Uncaught ReferenceError: Buffer is not defined
    at ./node_modules/vasync/node_modules/core-util-is/lib/util.js (util.js:103:17)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/vasync/node_modules/verror/lib/verror.js (verror.js:9:19)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/vasync/lib/vasync.js (vasync.js:8:18)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/ldapjs/lib/client/client.js (client.js:14:16)

So I tried another way to fix this webpack erros/aliasing
Installed webpack-node-externlas through yarn add -D webpack-node-externals
So from my understanding we can use this to say that those server modules are external and ask webpack not to compile them
collections/payload.config.ts added the following in webpack config

target: 'node',
externals: [nodeExternals({})],

But this would also lead to a blank page with the following error in the console

external commonjs "strip-ansi":1 Uncaught ReferenceError: require is not defined
    at strip-ansi (external commonjs "strip-ansi":1:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at createReporter (client.js:166:15)
    at ./node_modules/webpack-hot-middleware/client.js?path=/admin/__webpack_hmr (client.js:160:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:4:1
    at startup:5:1
strip-ansi @ external commonjs "strip-ansi":1
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
createReporter @ client.js:166
./node_modules/webpack-hot-middleware/client.js?path=/admin/__webpack_hmr @ client.js:160
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:4
(anonymous) @ startup:5
client.js:99 

[HMR] connected
client.js:146 

Invalid HMR message: 
{"name":"","action":"sync","time":4214,"hash":"709a1d4c23edc4a3bfbf","warnings":[],"errors":[],"modules":{"undefined":"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/payload/dist/admin/components/views/LivePreview/Toolbar/SizeInput/index.scss"}}
TypeError: processUpdate is not a function

So I went back to just aliasing
But this time in my strategy
I changed the collections/auth/ldapStrategy.ts to

class LdapAuthStrategy {  
    constructor(){}
  }

const ldapStrategy = new LdapAuthStrategy();
export default ldapStrategy;

So i just exported a empty constructor
This atleast didn't lead to a blank page
I had the payload loading
but it would give me the following error:

 TypeError: strategy.authenticate is not a function
    at attempt (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/passport/lib/middleware/authenticate.js:369:16)
    at authenticate (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/passport/lib/middleware/authenticate.js:370:7)
    at Layer.handle [as handle_request] (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/express/lib/router/index.js:328:13)
    at /Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/express/lib/router/index.js:280:10)
    at /Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/payload/src/express/middleware/corsHeaders.ts:21:3
    at Layer.handle [as handle_request] (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/username/Work/react_projects/payload_sandbox/clean/payload_clean/node_modules/express/lib/router/index.js:328:13)

Browser console will output the following error:

[HMR] connected
api.js:43 
        
        
       GET http://localhost:3000/api/users/me 500 (Internal Server Error)
get @ api.js:43
(anonymous) @ index.js:219
(anonymous) @ index.js:273
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
api.js:43 
        
        
       GET http://localhost:3000/api/payload-preferences/nav 500 (Internal Server Error)

Please can I get some help on this
I am new to payload 🙂

new to web dev tbh

[lilac sigil]

i want to use the payload authentication system with ldap

I have already built a ldap authentication through express.
So if ldap isn't possible through payload passport strategy, I was wondering if I could reuse my express code and link it with payload (through maybe hooks?)

Does anyone have any alternatives if passport is not possible?

[lilac sigil]

[pliant sapphire]

Did you come to any solution? Webpack makes life difficult. I ended up using auth outside payloadcms

[lilac sigil]

no

[green violet]

Met the same similar issues but unfortunately didn't figured out a solution.