Middleware error when deploying to Vercel

Help
,
1

Hello, I’ve deployed my app to Vercel and am using the NextJS SDK version 4.0.0-beta.14.
I’ve set up the relevant endpoints in my app for logging in, fetching profile data, logging out like so:

/auth/login
/auth/logout
/auth/profile

This is my middleware function in the app:

export async function middleware(request: NextRequest) {
    const authResponse = await auth0Client.middleware(request);

    if (request.nextUrl.pathname.startsWith("/auth")) {
        return authResponse;
    }

    if (request.nextUrl.pathname.startsWith('/profile')) {
        return profileMiddleWare(request);
    }

    if (request.nextUrl.pathname.startsWith('/')) {
        const existingCookies = request.cookies.get('user');

        if (!existingCookies) {
            const response = await createUserCookie();
            return response;
        }

        return NextResponse.next();
    }
}

I’ve changed the Auth0 application settings so that the login, logout and callback URIs include the Vercel domain + /auth/login (or callback). CORS is also enabled with my Vercel domain.

When I test locally (localhost) I have no issues with /auth/login - I get redirected to login page. But after deploying to Vercel I get a 500 error “MIDDLEWARE_INVOCATION_FAILED” when visiting the login page.
In my Vercel logs I have “Invalid URL” for this and /auth/callback. As for /auth/profile I just get unauthorized 401.
The environmental variables in Vercel are set up to match my client id, secret, etc with Auth0.

I also tried to integrate Auth0 from Vercel’s marketplace but it fails every time, even though a client gets created in my Auth0 apps. I get a message then:
Failed setting an environment variable: Attempted call to the API failed: non-2xx status code. Please contact Vercel for support.

What could be causing these errors? My app was working fine while using /api/auth endpoints before the v4 update. Thanks in advance.

PS - I relied on this guide for migrating to the newest version:

3

Hi @dimitar10000

Thank you for posting your question on the Auth0 Community!

Regarding the 401 Unauthorized that you receive for the profile, these could be possible causes for the issue:

  • For the Auth0 Scopes, can you double check if you have them declared as AUTH0_SCOPE= "openid email profile" in Vercel? Changing it to AUTH0_SCOPE=openid email profile might do the trick since quotation marks might cause the error in the environment variables.
  • I have checked your tenant and it appears that you have two similar applications, please double check if the Client ID and Client Secret are the correct ones.

For the Invalid URL error that you are receiving, please check if in your application’s settings you have the same URL that you are redirecting to in the Allowed Callback URLs. Please double check if all other URLs are matching as well.

For the Vercel 500 error, please review the following:

I had issue with .env having https, once changed to without https. The login url started to work.

AUTH0_DOMAIN=“.eu.auth0.com”

V3 supported https:// in AUTH0_DOMAIN and it looks like it has been dropped in V4. Find it out by console logging middleware object and seeing double https in issuer

It looks like the issue was that AUTH0_DOMAIN was set to localhost instead of the domain Auth0 provides for it’s identity service (the ENV variable that used to be AUTH0_ISSUER_BASE_URL ).

If you have any additional questions or if the proposed solutions above helped solve the issue, feel free to leave a reply on the post!

Kind Regard,
Nik

2 Likes
4

Hey Nik.

Thanks for the solutions. I changed the auth0 domain of the variable to using HTTP and renamed it to AUTH0_DOMAIN. I also changed AUTH0_BASE_URL to APP_BASE_URL since it was renamed in v4. Logging in seems to work normal now.

5

Hi @dimitar10000

Good to know that you managed to solve the issue and shared it with us!

1 Like