INVALID_CALLBACK_URL_ERROR when deployed on cyclic

[learntheropes]

Environment

• Operating System: Linux
• Node Version: v16.15.1
• Nuxt Version: 3.6.1
• Nitro Version: 2.5.2
• Package Manager: [email protected]
• Builder: vite
• User Config: runtimeConfig, modules, auth
• Runtime Modules: @sidebase/[email protected]
• Build Modules: -

Reproduction

Github repo

Vercel deployment

Cyclic deployment

Describe the bug

With both versions 0.5.0 and 0.6.0-beta.3 it works correctly locally and on Vercel, but when deployed on Dyclic, the project can't start with INVALID_CALLBACK_URL_ERROR. See log below.

Additional context

I think this issue was similar but closed due to lack of reproduction.

The important parts of my code:

• .env

NEXTAUTH_SECRET       = 'my-auth-secret'
AUTH_ORIGIN           = 'https://my-domain.com'
FAUNA_SECRET          = 'fauna-secret'
MARANGADU_USER        = 'my-email'
MARANGADU_PASSWORD    = 'email-password'
MARANGADU_HOST        = 'email-smtp-server'
MARANGADU_PORT        = 465
MARANGADU_FROM        = 'my-email'

• packages.json

  "devDependencies": {
    "@sidebase/nuxt-auth": "^0.6.0-beta.3",
    "nuxt": "^3.6.1"
  },
  "dependencies": {
    "faunadb": "^4.8.0",
    "nodemailer": "^6.9.3"
  }

• nuxt.config.js

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

  auth: {
    provider: {
      type: 'authjs',
      addDefaultCallbackUrl: true
    },
    origin: process.env.AUTH_ORIGIN,
    baseUrl: `/api/auth`,
    addDefaultCallbackUrl: true,
    globalAppMiddleware: {
      isEnabled: true,
      allow404WithoutAuth: true,
      addDefaultCallbackUrl: true
    },
  }

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

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

export default NuxtAuthHandler({
  secret: nextAuthSecret,
  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: myLoginAdapter(client)
});

• server/middleware/auth.js

import { getServerSession } from '#auth';

export default defineEventHandler(async (event) => {

  const targetUrl = event.req.url;
	const securedUrls = '/api/dashboard/';
  
  if (targetUrl.startsWith(securedUrls)) {

    const session = await getServerSession(event);

    if (!session) {
      throw createError({
        statusMessage: 'Unauthenticated',
        statusCode: 403
      });
    };

    event.session = session
  }
});

• pages/login.vue

<script setup>
definePageMeta({
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: `/dashboard`,
  },
});

const { signIn } = useAuth();

const email = ref(null);

const signInHandler = async () => {
  try {
    await signIn('magic-link', {
      email: email.value,
      callbackUrl: `/dashboard`,
    });
  } catch (error) {
    alert(error);
  }
};
const { query } = useRoute();
</script>

<template>
  This page query: {{ query }}
  <NuxtLayout>
    <form @submit.prevent="signInHandler">
      <input v-model="email" />
      <input type="submit" value="Send email" />
    </form>
  </NuxtLayout>
</template>

Logs

GET/api/auth/session?callbackUrl=https://outrageous-ox-hat.cyclic.app/__nuxt_error?url=/%26statusCode=500%26statusMessage=Internal%2BServer%2BError%26message=%2B(500%2BInternal%2BServer%2BError%2B(https://outrageous-ox-hat.cyclic.app/api/auth/session?callbackUrl=https://outrageous-ox-hat.cyclic.app/))%26stack%26data=%25257B%252522message%252522:%252522There%2Bis%2Ba%2Bproblem%2Bwith%2Bthe%2Bserver%2Bconfiguration.%2BCheck%2Bthe%2Bserver%2Blogs%2Bfor%2Bmore%2Binformation.%252522%25257D
 Request Headers
2023-06-30 21:24:35.191: [next-auth][error][INVALID_CALLBACK_URL_ERROR] 
https://next-auth.js.org/errors#invalid_callback_url_error Invalid callback URL. Received: https:// InvalidCallbackUrl: Invalid callback URL. Received: https://
    at assertConfig (/var/task/.output/server/node_modules/next-auth/core/lib/assert.js:53:12)
    at AuthHandler (/var/task/.output/server/node_modules/next-auth/core/index.js:77:52)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///var/task/.output/server/chunks/nitro/node-server.mjs:859:24
    at async Object.handler (file:///var/task/.output/server/node_modules/h3/dist/index.mjs:1284:19)
    at async Server.toNodeHandle (file:///var/task/.output/server/node_modules/h3/dist/index.mjs:1359:7) {
  code: 'INVALID_CALLBACK_URL_ERROR'
}
500 09:24:35.191 (0.055s)
 Response Headers
 Response Payload
{
  "message": "There is a problem with the server configuration. Check the server logs for more information."
}

[kennedyngigi4]

@learntheropes did you get a solution for this?

[learntheropes]

No. I moved to a different hosting provider.

[kennedyngigi4]

Thanks, but I just realized that issue pops up in version 0.6 and not 0.5

[zoey-kaiser]

Closed due to an old version. If anyone is still experiencing this issue, please check if it still exists in 0.8.0 and that the module has been setup using the new docs: https://auth.sidebase.io