Nextjs + Authjs v5 Callback Error with Duende Identity Server provider in a Azure Static Web App

[OsoThevenin]

Describe the bug

After the user is successfully logged in on my duende identity server v6, it tries to redirect the user to the specified callback url (following the Auth.js documentation here).

Here's an example redirect url:\ \ https://mydomain/api/auth/callback/duende-identity-service?code=3D96EBB5721191CD18CDBBFE5FFD818017E4C59F09214552AE74636913DB21B6-1&scope=openid profile email&session_state=G2eqKlEXsiOGOl0W5zNmDk7MloXu18w1M3YapSqv7qI.E986B1AED0AC76CFE51406215F9A08F6&iss=myidentityserver

My SWA instead of retrieving the session and redirecting back the user to the "dashboard" it returns a 302 status code with this weird url as location. https://1dd4069c374e:8080/api/auth/error?error=Configuration

On localhost the redirect works as expected.

To Reproduce\ Can't give much details of the code as it's private. But will try to create a mock application to replicate this behaviour.

auth.config.ts

export default {
  providers: [
    DuendeIDS6Provider({
      id: 'duende-identity-service', // default id duende-identityserver6!!
      name: 'Duende Identity Service',
      clientId: process.env.AUTH_DUENDE_IDENTITY_SERVER6_ID!,
      clientSecret: process.env.AUTH_DUENDE_IDENTITY_SERVER6_SECRET!,
      issuer: process.env.AUTH_DUENDE_IDENTITY_SERVER6_ISSUER,
    }),
  ],
} satisfies NextAuthConfig;

middleware.ts

const intlMiddleware = createMiddleware({
  defaultLocale,
  localePrefix,
  locales,
  pathnames,
});

const authMiddleware = auth(
  (req: NextRequest & { auth: Session | null }): Response | void => {
    const session = req.auth;

    // Handle session

    return intlMiddleware(req);
  },
);

const middleware = (req: NextRequest) => {
  // some validations

  if (isAuthPage) {
    return (authMiddleware as any)(req);
  }

  if (isPublicPage) {
    return intlMiddleware(req);
  }
  return (authMiddleware as any)(req);
};

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|.*.swa).*)/'],
};

export default middleware;

staticwebapp.config.json

{
  "forwardingGateway": {
    "allowedForwardedHosts": [
      "mydomain"
    ]
  }
}

Expected behavior\ Location should be https://mydomain/dashboard

Actual response:

Device info (if applicable):

• OS: Windows
• Browsers: Brave, Firefox, Chrome, Edge
• Version: Latest

[alasdairmackenzie]

@OsoThevenin This was happening to me too. I spent quite a while working through the code and realised the way AuthJS was setting the hostname was a bit odd. The weird url is actually the HOST of the server.

I can't recall exactly how I worked around the issue but it was either setting the AUTH_URL or the AUTH_REDIRECT_PROXY_URL to the actual domain i.e. "https:///api/auth"

See this issue https://github.com/nextauthjs/next-auth/issues/10928#issuecomment-2121092912

[OsoThevenin]

@OsoThevenin This was happening to me too. I spent quite a while working through the code and realised the way AuthJS was setting the hostname was a bit odd. The weird url is actually the HOST of the server.

I can't recall exactly how I worked around the issue but it was either setting the AUTH_URL or the AUTH_REDIRECT_PROXY_URL to the actual domain i.e. "https:///api/auth"

See this issue nextauthjs/next-auth#10928 (comment)

Definitely this helped fix the issue. Thanks a lot @alasdairmackenzie ❤️