Payload CMS use Magic Login Strategy from passport.js

Question

I want to be able to log into Payload admin panel using magic login. The problem is that the payload docs aren't very specific about how to implement Passport strategies. Also the public demo of payload doesn't mention passport anywhere.

https://payloadcms.com/docs/authentication/config#strategies

https://github.com/payloadcms/public-demo

I created a new payload app using npx create-payload-app and chosing the blog template. Then I npm installed the packages passport and passport-magic-login and edited the Users.ts file so that payload uses the MagicLoginStrategy to authenticate. This is the state where i am stuck at the moment because trying to run the project throws a bunch of errors apparently relating to webpack and polyfills.

Users.ts

import { CollectionConfig } from "payload/types";

import MagicLoginStrategy from "passport-magic-login";

const sendEmail = (a, b, c, d) => {
  console.log("sendEmail");
  console.log(a, b, c, d);
};

const verify = (a, b) => {
  console.log("verify");
  console.log(a, b);
};

const Users: CollectionConfig = {
  slug: "users",
  auth: {
    tokenExpiration: 7200,
    maxLoginAttempts: 5,
    lockTime: 600 * 1000,
    strategies: [
      {
        strategy: new MagicLoginStrategy({
          secret: "my-secret",
          callbackUrl: `api/auth/magiclink/callback`,
          sendMagicLink: async (destination, href, _, req) => {
            await sendEmail(destination, href, _, req);
          },
          verify: async (payload, callback) => {
            verify(payload, callback);
          },
        }),
      },
    ],
  },
  admin: {
    useAsTitle: "email",
  },
  access: {
    read: () => true,
  },
  fields: [
    // Email added by default
    {
      name: "name",
      type: "text",
    },
  ],
};

export default Users;

Error Log

ERROR in ./node_modules/jwa/index.js 5:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/data-stream.js 3:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/data-stream.js 4:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

webpack compiled with 7 errors

Answer 1

For me, installing polyfills for each dependency was helpful. For instance, npm install util.

It seems to me that either Webpack, during compilation time, or PayloadCMS itself, is attempting to use dependencies from passport-*some-strategy* in the browser's environment.