Nginx 502 Bad Gateway with Next.js and Auth0 after login

Issues information

  • OS:
  • databases: postgresql, redis
  • Programming language and version: TypeScript v4.7.2
  • Link to your project on Github/Gitlab: private

Your issue

After successfully logged in my Next.js application via Auth0 (I use the auth0-nextjs package Auth0 Next.js SDK Quickstarts: Login), I get a 502 Bad Gateway on the redirect page /api/auth/callback?code=xxx&state=yyy.

  1. The first call to the Next.js server API is OK (https://my-app.xmx.sh/api/auth/login?returnTo=%2F).
  2. The second call to Auth0 is OK (https://dev-kduur0-e.us.auth0.com/authorize?client_id=xxx…).
  3. The third and last call fails (https://my-app.xmx.sh/api/auth/callback?code=xxx…).

The application is simply started with a yarn next start command that spawns a Next.js instance.

Dockerfile content (if any)

FROM node:16-alpine as build

WORKDIR /app
COPY package.json .
COPY yarn.lock .
COPY .npmrc .
COPY backend/package.json backend/
COPY frontend/package.json frontend/
RUN yarn --frozen-lockfile --ignore-scripts --ignore-engines
COPY tsconfig.json .
COPY .eslintrc.js .

WORKDIR /app/backend
COPY backend .
RUN yarn prisma generate

WORKDIR /app/frontend
COPY frontend .
RUN yarn build

FROM node:16-alpine
WORKDIR /app
EXPOSE 3000

COPY --from=build /app/package.json .
COPY --from=build /app/yarn.lock .
COPY --from=build /app/node_modules node_modules
COPY --from=build /app/backend backend

WORKDIR /app/frontend
COPY --from=build /app/frontend/package.json .
COPY --from=build /app/frontend/next.config.js .
COPY --from=build /app/frontend/public public
COPY --from=build /app/frontend/.next .next

ARG FRONTEND_URL_QOVERY
ARG BACKEND_URL
ENV BACKEND_URL $BACKEND_URL
ENV AUTH0_BASE_URL "https://$FRONTEND_URL_QOVERY"
ARG AUTH0_ISSUER_BASE_URL
ENV AUTH0_ISSUER_BASE_URL $AUTH0_ISSUER_BASE_URL
ARG AUTH0_AUDIENCE
ENV AUTH0_AUDIENCE $AUTH0_AUDIENCE
ARG AUTH0_SCOPE
ENV AUTH0_SCOPE $AUTH0_SCOPE
ARG AUTH0_CLIENT_ID
ENV AUTH0_CLIENT_ID $AUTH0_CLIENT_ID
ARG AUTH0_CLIENT_SECRET
ENV AUTH0_CLIENT_SECRET $AUTH0_CLIENT_SECRET
ENV AUTH0_SECRET $AUTH0_CLIENT_SECRET

CMD ["yarn", "start"]

Hi @soywod , the 502 seems to be returned by Auth0 (cf screenshot)

Can you check what this 502 means on Auth0? (I’ve found this thread for example)

The 502 seems not to be returned by Auth0, what you show on the screenshot is the initiator. I understand it more in a way that the call started from Auth0 and pointed to our domain (which is the /api/auth/callback endpoint). I checked your link but I did not find anything relevant there. I sense there is an issue with the way Next.js redirects to the front, maybe it conflicts with Qovery nginx config (like a bad redirect code or sth?).

I don’t know but I can take a look since Qovery itself uses Auth0. We are developing the Qovery web interface with Qovery (hehe) and we have no issues like this. But I can definitely investigate in a few hours with one of my engineers. I am pretty we’ll find out what’s going on :muscle:

@soywod I tried and I have the feeling that the problem is coming from the configuration of NextJS with Auth0. The error I receive is invalid_grant (Invalid authorization code)

Can you take a look at your application logs because I think the final error comes from your frontend app.

This error happens when the auth code is not valid. I can reproduce this error when I use a invalid or already used token in the url. But from a fresh login with a valid code, I have this 502 Bad Gateway.

Ok it seems that we need to add the parameter nginx.ingress.kubernetes.io/proxy-buffer-size: "8k" - related to this issue Getting 502 after login · Issue #382 · auth0/nextjs-auth0 · GitHub

I will add this parameter in our app advanced settings this week. :+1: - it has been modified manually on your cluster at the moment.