Incompatibility with next ^14.2.4

[davies-a]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Hi there - apologies if this is the wrong place, just thought we'd raise the below. We use Next JS with this plugin in our frontend application, using the useUser hook. Following a dependabot update we moved next from "^14.2.4" to "^14.2.12"; following this adjustment the useUser hook started hanging when calling the auth0 API. We've not had time to investigate further, but wanted to open the issue in case others are encountering this (since it's a relatively early change).

Reproduction

1. relevant dependencies in package.json: "@auth0/nextjs-auth0": "^3.5.0", "next": "^14.2.12",
2. Use UserProvider in root UI page; with a subcomponent containing the following code in its function:

  const { user, isLoading } = useUser();
  const router = useRouter();

  let authNavItem = navItems.anchorLinks.loginItem;

  if (!isLoading && user) {
    authNavItem = navItems.anchorLinks.logoutItem;
  }

3. Register custom afterCallback (this code doesn't error)

It's a closed repo and we've not had time to investigate fully, but we can do some investigation/question-answering if this is a live issue.

Additional context

No response

nextjs-auth0 version

3.5.0

Next.js version

14.2.12

Node.js version

20.11.1

[kylehotchkiss]

I'm seeing similar issues in other 14.2.* releases, where the error causing the failures is Missing state cookie from login request on /api/auth/callback. Interestingly, only on vercel and not on my localhost.

[aorsten]

@adamjmcgrath or other maintainers: Are you planning on upgrading the Next-js version to 14 (and soon 15) in this repo?

[mickaeltr]

We've noticed the same errors. I believe (but not 100% sure) that it started with Next.js v14.2.7. We also have an custom afterCallback on handleAuth.

[guabu]

Hi all 👋 I've tried to reproduce the issue @davies-a describes with the useUser() hook hanging using the following dependencies:

"@auth0/nextjs-auth0": "^3.5.0",
"next": "14.2.14",

The following auth handler app/api/auth/[auth0]/route.ts:

import { handleAuth, handleCallback } from "@auth0/nextjs-auth0";

export const GET = handleAuth({
  callback: handleCallback({
    async afterCallback(req, session, state) {
      return session;
    },
  }),
});

A page with the following components and the useUser() hook:

"use client";

import { useUser } from "@auth0/nextjs-auth0/client";

export default function Index() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
    return (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}

However, I have not been able to reproduce the "hanging" behaviour being described nor the Missing state cookie from login request.

Would you be able to provide some minimal reproduction of the error you're seeing as a GitHub repository so we can dig into it further?

As an aside, we're also working on a new version of the SDK that will fix some existing issues, improve compatibility with the latest Next.js versions (including Next 15), and provide a better overall DX.

[ymonye]

Hi,

Seeing this same error on v14.2.*. My Next.js app is locally hosted, with my website domain setup via proxy_pass in Nginx using my Cloudflare SSL cert & key. Cloudflare's dashboard then points to my server via A record & CNAME. My AUTH0_BASE_URL is my domain.

The above has worked without issue since Next.js v13, and again on v14.1.* until recently upgrading to v14.2.* . Took a while to realize this was a Next.js problem after updating a number of other dependencies. The actually issue: the /api/auth/callback endpoint returns a Cloudflare 502 bad gateway error. Downgrading to v14.1.4 and forcing that version in my package.json erased all problems, as my package-lock.json was using v14.2.* as a dependency which broke things.

I guess we'll patiently wait for Next.js v15 support, then will return to this issue if it persists in v15.