502 issue on Production nextjs-auth0

Help
,
1

Nest-Auth0: Empty req Object on /api/auth/callback?code in Production

Setup:

  • Node.js Version: 18
  • Package Manager: Yarn
  • Framework: Next.js (using nest-auth0 package)
  • Server: EC2 Ubuntu with Nginx as a reverse proxy

Issue:

I’m encountering a 502 Bad Gateway error on the /api/auth/callback?code endpoint when trying to sign up a user in production (yarn build + yarn start). The same functionality works perfectly in development mode (yarn dev).

Upon investigation, I found that in production, the entire req object is empty when the callback route is triggered. For other routes like /api/auth/login or /api/auth/logout, req is populated as expected.

I’ve already tried several solutions from online resources, including updating the Nginx configuration, but the problem persists.

Nginx Config:

nginx

Copy code

location /api/ {
    proxy_pass http://localhost:5020;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_buffering off;
    proxy_request_buffering off;
}

Code Snippet:

The issue occurs in the callback handler in this function:

javascript

Copy code

function handlerFactory({ handleLogin, handleLogout, handleCallback, handleProfile }) {
    return (userHandlers = {}) => {
        const { login, logout, callback, profile } = Object.assign({
            login: wrapErrorHandling(handleLogin),
            logout: wrapErrorHandling(handleLogout),
            callback: wrapErrorHandling(handleCallback),
            profile: wrapErrorHandling(handleProfile),
        }, userHandlers);
        return async (req, res) => {
            console.log(req); // Logs {} for the callback route in production
            let { query: { auth0: route } } = req; // Fails due to empty req object
            route = Array.isArray(route) ? route[0] : route;
            switch (route) {
                case 'login':
                    return login(req, res);
                case 'logout':
                    return logout(req, res);
                case 'callback':
                    return callback(req, res);
                case 'me':
                    return profile(req, res);
                default:
                    res.status(404).end();
            }
        };
    };
}

When I print req for /api/auth/callback?code=..., it logs {}. This issue is only for the callback route. Other routes (login, logout, me) work fine in production.

What I’ve Tried:

  1. Updating Nginx Config: Added proxy_buffering off, proxy_request_buffering off, and other settings to ensure proper request forwarding.
  2. Testing Without Nginx: Stopped Nginx and directly accessed the Next.js server on port 5020. The issue still persists.
  3. Environment Variables: Verified that all necessary environment variables are set correctly in production.
  4. Manual Request Parsing: Attempted to manually parse the query string using url.parse(req.url, true), but since req is empty, this approach also fails.

Observations:

  • In development (yarn dev), everything works as expected.
  • Previously, I faced a similar issue with the logout route, which was resolved by replacing the Link tag with an <a> tag in the component. However, this workaround doesn’t apply to the signup flow.

Request for Help:

Does anyone know why the req object might be empty for the callback route in production or how to debug this further? Any insights on how to resolve this issue would be greatly appreciated!

3

Hi @eng3,

I see you have opened a support ticket about this issue. Please continue working with your Developer Support Engineer on this!

Thanks,

Mary Beth