@auth0/nextjs-auth0 4.0.0-beta.8 next15.0.3 not working on vercel cloud

[droganov]

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

I’m experiencing a similar issue to the one discussed in this thread: Trying out v4 beta, receiving generic error

The key difference is that I’ve managed to get it working locally, but when I attempt to access “/auth/login” on either Vercel or my app domain, I receive a generic error message stating “An error occurred while trying to initiate the login request.”

My application is configured as a “Regular Web Application” with the following settings:

Allowed Callback URLs:

https://my.app/auth/callback,
https://my-app.vercel.app/auth/callback,
http://localhost:3000/auth/callback

Allowed Logout URLs:

https://my.app,
https://my-app.vercel.app/,
http://localhost:3000/

My environment variables are set as follows:

.env.local

AUTH0_DOMAIN='auth.my.app'
AUTH0_CLIENT_ID='...'
AUTH0_CLIENT_SECRET='...'
AUTH0_SECRET='...'
APP_BASE_URL='http://localhost:3000'

.env.production

AUTH0_DOMAIN='auth.my.app'
AUTH0_CLIENT_ID='...'
AUTH0_CLIENT_SECRET='...'
AUTH0_SECRET='...'
APP_BASE_URL='https://my.app'

As I mentioned earlier, this setup works seamlessly on my local machine, but throws an error when deployed to Vercel. The Vercel logs reveal the following error:

Hi: "response" is not a conform Authorization Server Metadata response (unexpected HTTP status code)
at (node_modules/.pnpm/oauth4webapi@3.1.3/node_modules/oauth4webapi/build/index.js:92:0)
at (node_modules/.pnpm/oauth4webapi@3.1.3/node_modules/oauth4webapi/build/index.js:221:0)
at (node_modules/.pnpm/@auth0+nextjs-auth0@4.0.0-beta.8_next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass_nalkpas7ifge363zka4f67ub7m/node_modules/@auth0/nextjs-auth0/dist/server/auth-client.js:369:36)
at (node_modules/.pnpm/@auth0+nextjs-auth0@4.0.0-beta.8_next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass_nalkpas7ifge363zka4f67ub7m/node_modules/@auth0/nextjs-auth0/dist/server/auth-client.js:365:0)
at (node_modules/.pnpm/@auth0+nextjs-auth0@4.0.0-beta.8_next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass_nalkpas7ifge363zka4f67ub7m/node_modules/@auth0/nextjs-auth0/dist/server/auth-client.js:92:0)
at (src/middleware.ts:6:9)
at (node_modules/.pnpm/next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.81.0/node_modules/next/dist/esm/server/web/adapter.js:212:0)
at (node_modules/.pnpm/next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.81.0/node_modules/next/dist/esm/server/web/adapter.js:163:0)

and, as @bryso mentioned, it would be really nice to have informative errors, or at least log traces, where we can see which url is requested and what response is receved

Reproduction

src/components/Auth/auth0SDK.ts:

import { Auth0Client } from '@auth0/nextjs-auth0/server'

export const auth0SDK = new Auth0Client({})

src/middleware.ts

import type { NextRequest, NextResponse } from 'next/server'

import { auth0SDK } from './components/Auth/auth0SDK'

export async function middleware(request: NextRequest): Promise<NextResponse> {
  return await auth0SDK.middleware(request)
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    '/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
}

.env.production

AUTH0_DOMAIN='auth.my.app'
AUTH0_CLIENT_ID='...screened'
AUTH0_CLIENT_SECRET='...screened'
AUTH0_SECRET='...screened'
APP_BASE_URL='https://my.app'

src/components/Auth/useAuth.ts

import { useUser } from '@auth0/nextjs-auth0'

import { useIsMounted } from '../../ui/icons/hooks/useIsMounted'

export type UserContext = ReturnType<typeof useUser>

export const useAuth = (): null | UserContext => {
  const userContext = useUser()
  const isMounted = useIsMounted()
  return isMounted ? userContext : null
}

src/components/Auth/DashboardLink.tsx

/* eslint-disable @next/next/no-html-link-for-pages */
'use client'

import type { FunctionComponent } from 'react'

import { useAuth } from './useAuth'

const className = 'btn bg-paper-reverse btn-sm rounded-full'

export const DashboardLink: FunctionComponent = () => {
  const auth = useAuth()

  if (auth?.user) {
    return (
      <div>
        <a className={className} href="/dashboard">
          {/* <a className={className} href="/auth/logout"> */}
          Dashboard
        </a>
      </div>
    )
  }

  return (
    <a className={className} href="/auth/login">
      Sign In
    </a>
  )
}

Visiting /auth/login results in An error occured while trying to initiate the login request.

Additional context

No response

nextjs-auth0 version

@auth0/nextjs-auth0 4.0.0-beta.8

Next.js version

next15.0.3

Node.js version

20.10.0

[guabu]

Hey @droganov 👋 It looks like the error you're getting is related to the discovery request — this happens when the SDK fetches metadata about your Auth0 tenant.

This error typically happens when the AUTH0_DOMAIN is not correctly set or is in the wrong format.

Could you share your exact value for your AUTH0_DOMAIN as you have it configured in your Vercel environment variables for the deployment you're seeing that error in?

I agree, the error message can definitely be improved here. We'll make sure to add a more descriptive message here — thanks for the feedback!

[droganov]

@guabu sure!
I tested 2 variants:
[upd: removed domains]

Both fail with the same error, both work locally.

I would say Auth0 Vercel integration spoils env, but let me check first

[droganov]

@guabu AUTH0_DOMAIN was missing for some reason, could be cache. I edited env manually in deployment props, and got a new crash error:

Vercel logs:

[GET] [middleware: "src/middleware"] /auth/login reason=EDGE_FUNCTION_INVOCATION_FAILED, status=500, user_error=true

TypeError: Invalid URL string.
    at (node_modules/.pnpm/@auth0+nextjs-auth0@4.0.0-beta.8_next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass_nalkpas7ifge363zka4f67ub7m/node_modules/@auth0/nextjs-auth0/dist/server/auth-client.js:98:0)
    at (src/middleware.ts:6:9)
    at (node_modules/.pnpm/next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.81.0/node_modules/next/dist/esm/server/web/adapter.js:212:0)
    at (node_modules/.pnpm/next@15.0.3_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.81.0/node_modules/next/dist/esm/server/web/adapter.js:163:0)

[droganov]

Hey @guabu, I finally got it working.

Here's what I discovered:

• I used the CLI to deploy from my local machine: npx vercel --prod
• The .env.production file seemed to be cached (perhaps it wasn't an Auth0 issue after all)
• After manually loading the env variables into Vercel and redeploying via the UI, I encountered an Invalid URL string error
• I removed the Auth0 Vercel integration and redeployed again with npx vercel --prod
• The .env.production file didn't upload at all; I saw an empty env on Vercel after deploying
• I manually uploaded the env variables
• Rebuilt the project
• And it worked!

[guabu]

Thanks for following up @droganov! I'm glad to hear the issue was resolved — ultimately it seems like the environment variables were not correctly being set on Vercel.

I've added a log in the upcoming release that will hopefully make it easier to troubleshoot these errors based on your feedback!