Next.js app returns 502 Bad gateway for `/api/auth/me` after a successful login

Help
,
1

I am running a Next.js app and was able to get the user object from useUser() but had trouble getting page protection and logouts. After switching to using withMiddlewareAuthRequired() to middleware.ts, logins and logouts work fine, but now useUser() returns undefined for:

  • user object
  • error.message
  • error.cause

I also notice that after I successfully login, with either Google or Apple, I get an 502 (Bad gateway) error in Chrome’s console logs.

As an example, here is how I am console logging user and error in my main app’s page.tsx:

/* src/app/page.tsx */ 
'use client'

// Externals
import { useLayoutEffect } from 'react'
import { useUser } from '@auth0/nextjs-auth0/client'
// Locals
import MainPortal from '@/sections/main-portal'

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


  useLayoutEffect(() => {
    if (!isLoading) {
      console.log(
        `[${new Date().toLocaleString()} --filepath="src/app/page.tsx" --function="useLayoutEffect()"]: user: `,
        user
      )
      console.log(
        `[${new Date().toLocaleString()} --filepath="src/app/page.tsx" --function="useLayoutEffect()"]: error: `,
        error
      )
      console.log(
        `[${new Date().toLocaleString()} --filepath="src/app/page.tsx" --function="useLayoutEffect()"]: error.name: `,
        error?.name
      )
      console.log(
        `[${new Date().toLocaleString()} --filepath="src/app/page.tsx" --function="useLayoutEffect()"]: error.message: `,
        error?.message
      )
      console.log(
        `[${new Date().toLocaleString()} --filepath="src/app/page.tsx" --function="useLayoutEffect()"]: error.cause: `,
        error?.cause
      )
    }
  }, [ user, error, isLoading ])



  return (
    <>
      <main>
        <MainPortal />
      </main>
    </>
  )
}

To further debug this issue, I also console log the user object in my middleware.ts file, on the server.:

/* middleware.ts */
import { withMiddlewareAuthRequired, getSession } from '@auth0/nextjs-auth0/edge'
import { NextResponse } from 'next/server'
import { COOKIE_NAME } from './utils'

export default withMiddlewareAuthRequired(async function middleware(req) {
  const res = NextResponse.next()
  const user = await getSession(req, res)

  console.log(
    `[${ new Date().toLocaleString() } --filepath="src/middleware.ts" --function="middleware()"]: user: `, 
    user
  )
  
  // res.cookies.set(COOKIE_NAME, user?.user as any)
  
  return res
})

The user object is fully returned here, so I am not sure how this issue is manifesting on the client.

I can set the user object in the cookie as a stringified object and then do JSON.parse() on the client, but I would prefer to just use Auth0’s native useUser() hook to retrieve the user object client-side.

Why might this issue be happening?

2

Switched to using Caddy server from NGINX and the issue resolved itself

3

Hi
I encountered the same error and NGINX logged an error message upstream sent too big header while reading response header from upstream.

I resolved this by increasing buffer sizes

server {
    ...
    location / {
        proxy_pass http://localhost:3030;
        ...
        proxy_buffer_size 16k;
        proxy_buffers 4 32k;
        proxy_busy_buffers_size 64k;
    }
    ...
}