next.jsauth0

TypeError: Invalid URL in @auth0/nextjs-auth0 Middleware Despite Correct Configuration


I'm developing an application with Next.js (App Router) and using the latest version of @auth0/nextjs-auth0 to handle authentication. My goal is to implement a passwordless email login using the Universal Login flow.

I've set up the auth0.middleware to protect my routes. However, when the middleware intercepts a request to /auth/login, it crashes with a 500 Internal Server Error, and my terminal shows a TypeError: Invalid URL.

The stack trace points to the error originating inside the auth0.middleware call, seemingly when it's trying to construct the redirect URL to the Auth0 /authorize endpoint.

Here is my setup:

middleware.ts

TypeScript
import { NextRequest } from 'next/server';
import { auth0 } from './lib/auth0';

export async function middleware(request: NextRequest) {
  return await auth0.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)
     * - public files
     * - /onboarding (public page)
     */
    '/((?!_next/static|_next/image|favicon.ico|onboarding).*)',
  ],
};

lib/auth0.ts

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

export const auth0 = new Auth0Client({
  authorizationParameters: {
    connection: 'email',
  }
});

I verified my env variables, which are all OK.

In Auth0 dashboard, Branding > Universal Login, I selected the passwordless template.

And finaly, my register button redirect to /auth/login?login_hint=xxx

Am I missing something ?


Solution

  • Could you double-check the existing configuration in the .env file to ensure it reflects the latest updates? Auth0 has changed some property names in the most recent version.

    In my case:

    You can refer to the latest documentation here for more details.

    The complete list of updated environment variable names is as follows:

    AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
    APP_BASE_URL='http://localhost:3000'
    AUTH0_DOMAIN='https://xxx.auth0.com'
    AUTH0_CLIENT_ID='{yourClientId}'
    AUTH0_CLIENT_SECRET='{yourClientSecret}'