How can I combine payloadcms username/password credentials and this library?

[engin-can]

Hi, I was wondering how I can combine default payloadcms username/password credentials with this library.

[CrawlerCode]

This is not possible at the moment, but it is already on my roadmap.

[CrawlerCode]

In the latest version 0.8.0 you have the option of enable the local strategy.

authjsPlugin({
  authjsConfig: authConfig,
  enableLocalStrategy: true // <-- Enable local strategy
}),

The feature is still experimental, but you are welcome to try it out. If you have found any issues, please report these. Thank you

[engin-can]

This is awesome! Looking into it...

[engin-can]

Does this mean I can use payload.login or should I use authjs's signIn with credentials?

[CrawlerCode]

Yes. You can use the native Payload authentication system and payload.login().

Normally, this plugin disables the local Payload strategy. The option enableLocalStrategy does not disable the local strategy, so both strategies (local and Auth.js) can be used in parallel.

[revnelson]

I'm using v0.8.4 with enableLocalStrategy enabled. It seems like the middleware is checking the session object which is null when a user has signed in with the local strategy. Is there a recommended way to be able to use the middleware and local strategy together?

[CrawlerCode]

The middleware causes problems if you use a local strategy. You could do various things. That depends on your use case.

1. Skip middleware for admin dashboard

If you only use the local strategy for the Payload admin dashboard and not for frontend users, you can simply disable the middleware for the /admin route:

// middleware.ts
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|admin).*)"],
};

2. Skip the middleware if a local auth cookie is present

export const authConfig: NextAuthConfig = {
  callbacks: {
    authorized: ({ auth, request }) => {
      // Skip middleware if using payload local auth
      if (request.cookies.get("payload-token")) {
        return true;
      }

      // ...
    },
  },
};

But then make sure that your pages are not only protected by the middleware.

3. Use a custom credentials provider

You could register a custom credentials provider that uses payload to log in the user.
However, this approach does not really utilize the local payload strategy. So you would use payload to log in or verify the user, but then you would use auth.js to manage the session.

export const authConfig: NextAuthConfig = {
  providers: [
    credentials({
      id: "payload-local",
      name: "Payload Local Auth",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      authorize: async credentials => {
        const payload = await getPayload({ config: payloadConfig });

        const { user } = await payload.login({
          collection: "users",
          data: {
            email: credentials.email,
            password: credentials.password,
          },
        });

        return user;
      },
    }),
  ],
};