Avoid localhost based callbackUrl when redirecting from middleware

[hisapy]

Description 📓

Hi everyone,

I started working on a new NextJS app for a Backoffice application. In this app, all the pages must be protected and thus I used the next-auth/middleware as described in the next-auth/middleware docs.

This works fine on localhost development env but we had problems going to production. In our case, the app must live in an internal infra based on AWS, basically something like the following diagram

The problem is this scenario is that next-auth/middleware redirects to the signIn page with a callbackUrl based on req.url which includes the PORT assigned to the application internally by the PasS, ending up with a request URL like https://backoffice.example.com/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A53840%2Fmy-stuff and after login instead of going to https://backoffice.example.com/my-stuff you get redirected to http://localhost:53840/my-stuff.

In order to avoid localhost in the result URL we can setup a Custom Server but the problem with the protocol (which is just http and not https as in the browser) and the port still remains.

How to reproduce ☕️

I was thinking that maybe NextAuth should provide a config like BASE_URL or perhaps a middleware redirect callback to address the scenarios where the app lives behind a reverse proxy like setup.

What do you think would be the best approach to handle this? 🤔

Contributing 🙌🏽

Yes, I am willing to help implement this feature in a PR

[hisapy]

The workaround I found for the above issue is using the redirect callback, for example:

// pages/api/auth/[...nextauth].ts

import NextAuth from 'next-auth'
import type { NextApiRequest, NextApiResponse } from 'next'

export const options = {
  providers: [
    // your providers here
  ],
  callbacks: {
    async redirect(params: { url: string }) {
      const { url } = params

      // url is just a path, e.g.: /videos/pets
      if (!url.startsWith('http')) return url

      // If we have a callback use only its relative path
      const callbackUrl = new URL(url).searchParams.get('callbackUrl')
      if (!callbackUrl) return url

      return new URL(callbackUrl as string).pathname
    },
  }
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  return NextAuth(req, res, options)
}

The idea is to tell the browser to redirect to the path relative to its current HOSTNAME. Maybe we can just add this workaround somewhere in the docs (?) 🤔

[santilp95]

thank is work but i have a custom provier, when is in catch the page redirect to http://localhost/api/auth/error?error=InvalidOTP

try {
		const {
			data: { responsePayload },
		} = await authApi.post<OTPService>('/otp', {
			email,
			otp,
		})
		const { access_token, refresh_token } = responsePayload.data
		return {
			accessToken: access_token,
			refreshToken: refresh_token,
		}
	} catch (error) {
		console.error('error en otp')
		throw new Error('InvalidOTP')
	}

my nextauth is

        const jwtDecode: JWTResponse = jwt_decode(token.accessToken);
        token.user = jwtDecode;
        token.accessTokenExpires = jwtDecode.exp * 1000 - 6000;
      }

      if (token.accessTokenExpires > Date.now()) {
        return await token;
      }

      return await callBackApi.refreshAccessToken(token);
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      session.accessTokenExpires = token.accessTokenExpires;
      session.user = token.user;
      return await session;
    },
  },
});