_middleware + nginx give incorrect callbackUrl

[musme]

Question 💬

Hi guys!

My application is deployed on a custom vps server with nginx proxy.

When I use _middleware I get incorrect callbackUrl if the user is not authorized. callbackUrl starts with http://localhost instead of https://mysite.com

How to reproduce ☕️

I use nginx configuration:

location / {
    # Reverse proxy for Next server
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
}

Also I am using mysite.com/pages/admin/_middleware.ts

mysite.com
└── pages
   └── admin
       ├── index.tsx
       └── _middleware.ts

_middleware.ts code is:

import { withAuth } from 'next-auth/middleware';

export default withAuth({
  callbacks: {
    authorized: ({ token }) => {
      return !!token;
    }
  }
});

If the user is not logged in, he is redirected to the login page.

next-auth/packages/next-auth/src/next/middleware.ts

Line 94 in a7c55b7

signInUrl.searchParams.append("callbackUrl", req.url)

The problem is that req.url in my case is localhost:3000 and callbackUrl is localhost:3000/admin

By default redirect callback is

callbacks: {
  redirect({ url, baseUrl   }) {
    if (url.startsWith(baseUrl)) return url
    // Allows relative callback URLs
    else if (url.startsWith("/")) return new URL(url, baseUrl).toString()
    return baseUrl
  }
}

As a result, the user is taken to the page mysite.com/auth/signIn?callbackUrl=mysite.com instead of
mysite.com/auth/signIn?callbackUrl=mysite.com/admin

Can someone help solve this problem?

Thanks!

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[musme]

As a temporary solution, I can use custom middleware:

import { getToken } from 'next-auth/jwt';
import { NextResponse, NextRequest } from 'next/server';

export const middleware = async (req: NextRequest) => {
  const token = await getToken({ req: req as any });

  if (!!token) {
    return NextResponse.next();
  } else {
    const signInUrl = new URL('/api/auth/signin', req.nextUrl.origin);
    const callbackUrl = new URL(req.nextUrl.pathname, process.env.NEXTAUTH_URL);
    signInUrl.searchParams.append('callbackUrl', callbackUrl.toString());

    return NextResponse.redirect(signInUrl);
  }
};

But I'm not sure if this is a good solution(

[ocbrollingpaper]

Problem with this is that its throwing too much redirects and not really helpful

[rwecho]

use custom middleware instead of withAuth won't produce extra redirects.
I use this way to resolve the problem.

next-auth/packages/next-auth/src/next/middleware.ts

Line 94 in dda4e0a

signInUrl.searchParams.append("callbackUrl", req.url)

the reason here should not use req.url

[ocbrollingpaper]

@rwecho we decided to tweak the next auth and crop it how it fits us :)
Thanks anyway

[rwecho]

Thanks for your work

[balazsorban44]

Guessing here, you likely need https://next-auth.js.org/configuration/options#nextauth_url_internal

[musme]

Thanks for answer! But it doesn't seem to work.
I have created a new page "testpage". And inside I added _middleware.ts

import type { NextFetchEvent, NextRequest } from 'next/server';

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  return new Response('Hello, world! -> ' + req.url);
}

When I open this page, I see "Hello, world! -> http://localhost:3000/testpage".
So req.url does not depend on NEXTAUTH_URL_INTERNAL variable and it is also used in

next-auth/packages/next-auth/src/next/middleware.ts

Line 94 in a7c55b7

signInUrl.searchParams.append("callbackUrl", req.url)

Does anyone else have any idea what I'm doing wrong?

[cbrianball]

I'm having this same exact issue. I found the same line of code you did. req.url is pointed to localhost. I don't know if this is a quirk of next.js middleware or what.

I got around the issue by writing code in the redirect callback configured in the [...nextauth] middleware file. The callbackUrl in the browser still shows localhost, but the code takes the fallback URL that next-auth would typically use and creates a new URL taking the path, querystring, and hash from the client provided url and adding it to the baseUrl (which I believe is configured via the NEXTAUTH_URL environment variable).

Anyways, here's my code:

export default NextAuth({
  providers: [...],
  callbacks: {
    redirect: ({ url, baseUrl }) => {
      const { pathname, search, hash } = new URL(url);
      return Promise.resolve(
        new URL(`${pathname}${search}${hash}`, baseUrl).href
      );
    },
  },
});

[ocbrollingpaper]

I am dealing with the same right now, however having callbackurl to localhost is a no go in production.
Did you manage to fix it? 🥴

[cbrianball]

@ocbrollingpaper I did not fix it, but the good news is this has been resolved in the latest update 4.4.0. Now the callbackUrl no longer has the domain, it's just a relative path. I updated to that version, removed my redirect implementation hack from above and it works just fine. It was fixed by PR #4534.

[ocbrollingpaper]

@cbrianball sweet, we pretty much did the same but never opened PR