next-auth: 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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 22
Comments: 20 (2 by maintainers)

Most upvoted comments

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,
      },
    }
}

ShadiBlitz on Jan 17, 2023

I added to the .env.local file in the root, NEXTAUTH_URL=<your_domain>api/auth and the problem was solved

MGlobus on Jul 30, 2023

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

rmgpinto on Apr 2, 2021



signIn('credentials', {

The magic for me was putting the right callback url in the signIn method:

<button 
  onClick={()=> signIn('google', {
    callbackUrl: `${new URLSearchParams(window.location.search).get('callbackUrl')}`
  })}
>
  Sign in with Google
</button>

gregg-cbs on Apr 14, 2023

I had a similiar issue and fixed it by specifiying the NEXTAUTH_URL with the proper base domain like https://example.org. This properly reformatted the callback url to my expected host.

DracoBlue on Nov 2, 2022

Please check if setting the env NEXTAUTH_URL in https://github.com/nextauthjs/next-auth/issues/1542#issuecomment-1300016433 helps.

I was only searching for callbackUrl because my next url was not correct. Fixing it, fixed my issue. Leaving no other changes - especially to the callbackUrl - necessary at all.

DracoBlue on Feb 13, 2023