Not working with Credentials provider

Environment

Nuxi 3.0.0-rc.11 Nuxt 3.0.0-rc.11 with Nitro 0.5.4 @sidebase/nuxt-auth 0.0.1-beta.3

Reproduction

No response

Describe the bug

Thank you for this awesome module, it is the missing piece for the Nuxt universe.

I have try to setup nuxt-auth with the credentials Provider which is the most common type when using a decoupled backend.

this is my auth config in nuxt.config.ts copied from official docs in NextAuth

NUXT_URL = http://localhost/api/auth/

  auth: {
    nextAuth: {
      url: process.env.NUXT_URL,
      options: {
        secret: process.env.NUXT_SECRET,
        providers: [
          CredentialsProvider({
            // The name to display on the sign in form (e.g. 'Sign in with...')
            name: 'Credentials',
            // The credentials is used to generate a suitable form on the sign in page.
            // You can specify whatever fields you are expecting to be submitted.
            // e.g. domain, username, password, 2FA token, etc.
            // You can pass any HTML attribute to the <input> tag through the object.
            credentials: {
              username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
              password: { label: 'Password', type: 'password' },
            },
            async authorize(credentials, req) {
              // You need to provide your own logic here that takes the credentials
              // submitted and returns either a object representing a user or value
              // that is false/null if the credentials are invalid.
              // e.g. return { id: 1, name: 'J Smith', email: '[e-mail]' }
              // You can also use the `req` object to obtain additional parameters
              // (i.e., the request IP address)
              // eslint-disable-next-line no-console
              console.log(credentials)
              const user = { id: '1', name: 'J Smith', email: '[e-mail]' }

              if (user) {
                // Any object returned will be saved in `user` property of the JWT
                return user
              }
              else {
                // If you return null then an error will be displayed advising the user to check their details.
                return null

                // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
              }
            },
          }),
        ],
      },
    },

Login form its showing but not matter what is the input for username and password it always show the error: “Sign in failed. Check the details you provided are correct.”

the authorize function its never reach when submitting the form.

Is there anything else I am missing in order to make it work

Additional context

No response

Logs

No response

[BracketJohn]

@jorgv checkout 0.0.1-beta.4 -> credentials flow should work. Please give feedback here (:

@zoey-kaiser please update the nuxt auth demo!

Note to both: You will habe to change some stuff, as the way to setup nuxt-auth changed -> please refer to the quick start (and give feedbaxk where applicable (: )

[jorgv]

@BracketJohn works perfectly! Thanks so much. I will leave my […].ts in case someone else needs it for Credentials provider:

import CredentialsProvider from 'next-auth/providers/credentials'
import { NuxtAuthHandler } from '#auth'

export default NuxtAuthHandler({
  providers: [
    // @ts-expect-error Import is exported on .default during SSR, so we need to call it this way. May be fixed via Vite at some point
    CredentialsProvider.default({
      name: 'Credentials',

      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        
        // const user = { id: '1', name: 'J Smith', email: '[e-mail]' }
        const token = Buffer.from(`${credentials.username}:${credentials.password}`).toString('base64')
        const res = await fetch('http://localhost/login', {
          method: 'post',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Basic ${token}`,
          },
        })
        const user = await res.json()
        // If no error and we have user data, return it
        if (res.ok && user) {
          return user
        }
        else {
          // If you return null then an error will be displayed advising the user to check their details.
          return null
          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
        }
      },
    }),
  ],
})