callbackUrl seems to be ignored

Describe the bug

Using callbackUrl with email, google, and twitter providers. I would expect the application to redirect to this URL after successful sign-in. Instead, it always redirects to the root.

Steps to reproduce

const { error: signInError } = await signIn('email', {
  callbackUrl,
  email,
  redirect: false,
});

…where callbackUrl is currently hardcoded to http://localhost:3000/picks/set. I have confirmed this value, however, there is a cookie I see with the name next-auth.callback-url that is always set to http%3A%2F%2Flocalhost%3A3000.

Expected behavior

I would expect the application to be redirected to http://localhost:3000/picks/set after successful authentication.

Screenshots or error logs

N/A

Additional context

I am using the latest NextAuth (3.13.0) and NextJS (10.0.9). Node version is 14.15.4.

Feedback Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[rmgpinto]

There’s a solution while this bug isn’t fixed. $ yarn add cookies

Then on your page:

import Cookies from 'cookies'

add this to getServerSideProps(context):

const cookies = new Cookies(context.req, context.res)
cookies.set("next-auth.callback-url", <URL>)

thanks for pointing out to next-auth.callback-url

[ShadiBlitz]

I have found a workaround fix (tested locally and production) for this issue by doing the following:

in [...nextauth.ts] add a custom login page:

pages: {
  signIn: '/login',
},

in [...nextauth.ts] add the following under callbacks:

callbacks: {
  async redirect({ url, baseUrl }) {
    // Allows relative callback URLs
    if (url.startsWith("/")) return `${baseUrl}${url}`
    // Allows callback URLs on the same origin
    else if (new URL(url).origin === baseUrl) return url
    return baseUrl
  },
}

in custom login page (e.g login.tsx) :

import { signIn } from 'next-auth/react'
import { useRouter } from 'next/router'
const router = useRouter()

signIn('credentials', {
  redirect: false,
  callbackUrl: `${
    router.query.callbackUrl
      ? router.query.callbackUrl
      : window.location.origin
  }`,
})

in any page (e.g: index.tsx) :

export async function getServerSideProps(context) {
  const { req, resolvedUrl } = context
  const session = await getSession({ req })
  const destination = `${process.env.NEXTAUTH_URL}${resolvedUrl}`
  const callbackUrl = `/login?callbackUrl=${encodeURIComponent(destination)}`
  
  if (!session) {
    return {
      redirect: {
        destination: callbackUrl,
        permenant: false,
      },
    }
  }

  if (session) {
    return {
      props: {
        session,
      },
    }
}