How to implement custom login page for magic link provider with Nuxt 3 and sidebase/nuxt-auth

Question

How to implement custom login page for magic link provider with Nuxt 3 and sidebase/nuxt-auth

I have a project with Magic Link (email) provider. I'm using version 0.6.0-beta.3 but the issue was the issue with 0.5.0. There must be something wrong in my code:

When I run the app locally, and I click on a link to the /dashboard page, that is a protected URL, I get redirected to my custom login page at pages/auth/login.vue, which is correct. However, in the URL I have a query &error=undefined.

Nothing is logged even if I enable Auth.js debug option.

A reproduction of my code is here

The important parts of my code are:

• nuxt.config.js

  modules: ['@sidebase/nuxt-auth'],

  auth: {
    provider: {
      type: 'authjs',
    },
    baseUrl: `http://localhost:3000/api/auth`,
    addDefaultCallbackUrl: true,
    globalAppMiddleware: true,
  },

• pages/auth/login.vue

<script setup>
definePageMeta({
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: `/dashboard`
  }
});
const { signIn } = useAuth();
const email = ref(null);
const signInHandler = async () => {
  console.log(email.value);
  try {
    const { error, url } = await signIn(undefined, {
      email: email.value,
      callbackUrl: 'http://localhost:3000/dashboard',
    });

    if (error) {
      alert(error);
    } else {
      alert(url);
      return navigateTo(url);
    }
  } catch (error) {
    alert(error);
  }
};
</script>

<template>
  <form @submit="signInHandler">
    <input v-model="email" />
    <input type="submit" value="Submit" />
  </form>
</template>

• server/api/auth/[...].js

import { NuxtAuthHandler } from '#auth';
import EmailProvider from 'next-auth/providers/email';
import faunadb from 'faunadb';
import { customFaunaAdapter } from '~/assets/js/customFaunaAdapter';

const {
  nextAuthSecret,
  faunaSecret,
  marangaduUser,
  marangaduPassword,
  marangaduHost,
  marangaduPort,
  marangaduFrom,
} = useRuntimeConfig();

const client = new faunadb.Client({
  secret: faunaSecret,
  scheme: 'https',
  domain: 'db.fauna.com',
  port: 443,
});

export default NuxtAuthHandler({
  debug: true,
  secret: '0123456789',
  pages: {
    signIn: `/auth/login`,
    verifyRequest: `/auth/verify`,
  },
  providers: [
    EmailProvider.default({
      id: 'magic-link',
      name: 'send magic link by email',
      type: 'email',
      server: {
        host: marangaduHost,
        port: marangaduPort,
        auth: {
          user: marangaduUser,
          pass: marangaduPassword,
        },
      },
      from: marangaduFrom,
      maxAge: 60 * 60,
    }),
  ],
  adapter: customFaunaAdapter(client),
});

This last file must be correct, because when used without the custom login page, it works as expected.

Has anyone successfully implemented magic link provider with custom login page and can help me to fix the issue?