Authentication Error SignIn: Error: Configuration

[AiCodeHunter]

@Hebilicious: I created an example for latest v. of auth/code and authjs-nuxt with Credentials method based on your example:

https://stackblitz.com/edit/nuxt-starter-vq6pz6?file=pages%2Findex.vue

The First Scenario: username and password are corrected, and authentication is worked.

The Second Scenario: username and password are not corrected in this case (username: admin4, password: admin), and authentication show error in console.

Error SignIn: Error: Configuration

Response error:

Error:

 ERROR  Read more at https://errors.authjs.dev/#credentialssignin


 ERROR  [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror


 ERROR  [auth][cause]: Error
    at Module.callback (file:///D:/nuxi/authjs/node_modules/@auth/core/lib/actions/callback/index.js:221:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AuthInternal (file:///D:/nuxi/authjs/node_modules/@auth/core/lib/index.js:54:24)
    at async Auth (file:///D:/nuxi/authjs/node_modules/@auth/core/index.js:109:34)
    at Object.handler (D:\nuxi\authjs\node_modules\@hebilicious\authjs-nuxt\dist\runtime\lib\server.mjs:23:22)
    at async file:///D:/nuxi/authjs/node_modules/h3/dist/index.mjs:1975:19
    at async Object.callAsync (file:///D:/nuxi/authjs/node_modules/unctx/dist/index.mjs:72:16)
    at async Server.toNodeHandle (file:///D:/nuxi/authjs/node_modules/h3/dist/index.mjs:2266:7)


 ERROR  [auth][details]: {
  "provider": "credentials"
}

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "HOST=0.0.0.0 nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@auth/core": "^0.34.1",
    "@hebilicious/authjs-nuxt": "^0.3.5",
    "nuxt": "^3.12.3"
  }
}

[...].ts

import CredentialsProvider from '@auth/core/providers/credentials';
import type { AuthConfig } from '@auth/core/types';
import { CredentialsSignin } from '@auth/core/errors';
import { NuxtAuthHandler } from '#auth';

// The #auth virtual import comes from this module. You can use it on the client
// and server side, however not every export is universal. For example do not
// use sign-in and sign-out on the server side.

const runtimeConfig = useRuntimeConfig();

// Refer to Auth.js docs for more details

export const authOptions: AuthConfig = {
  basePath: '/api/auth',
  pages: {
    signIn: '/login',
  },
  providers: [
    CredentialsProvider({
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'admin' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        if (
          credentials.username === 'admin' &&
          credentials.password === 'admin'
        )
          return { id: '1', name: 'admin', email: 'admin', role: 'test' };

        return null;
      },
    }),
  ],
  secret: runtimeConfig.authJs.secret,
  callbacks: {
    async jwt({ token, user, session }) {
      // eslint-disable-next-line no-console
      console.log('jwt callback', { token, user, session });
      return token;
    },
  },
};

export default NuxtAuthHandler(authOptions, runtimeConfig);
// If you don't want to pass the full runtime config,
//  you can pass something like this: { public: { authJs: { baseUrl: "" } } }

nuxt.config.ts

import { resolve } from 'node:path';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  alias: {
    cookie: resolve(__dirname, 'node_modules/cookie'),
  },
  modules: ['@hebilicious/authjs-nuxt'],
  authJs: {
    guestRedirectTo: '/redirected',
  },
  nitro: {
    routeRules: {
      '/': { ssr: true, prerender: true },
      '/private': { ssr: true, prerender: true },
    },
  },
  experimental: {
    renderJsonPayloads: true,
  },
  runtimeConfig: {
    authJs: { secret: process.env.AUTH_SECRET },
    github: {
      clientId: '',
      clientSecret: '',
    },
    public: {
      authJs: {
        baseUrl: process.env.AUTH_URL,
        verifyClientOnEveryRequest: true,
      },
    },
  },
});

index.vue

<script setup lang="ts">
const { signIn, signOut, session, status, cookies } = useAuth();

async function check() {
  try {
    await signIn('credentials', {
      redirect: false,
      username: 'admin4',
      password: 'admin',
    });
    // eslint-disable-next-line no-console
    console.log('SignIn', session.value?.user);
  } catch (error) {
    // eslint-disable-next-line no-console
    console.log(`Error SignIn: ${error}`);
  }
}
</script>

<template>
  <div>
    <div>
      <a href="/api/auth/signin" class="buttonPrimary">Native Link Sign in</a>
      <button @click="check()">Credentials Sign In</button>
      <button @click="signOut()">Sign Out</button>
    </div>
    <div>
      <pre>{{ status }}</pre>
      <pre>{{ session }}</pre>
      <pre>{{ cookies }}</pre>
    </div>
  </div>
</template>