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

Questions and Answers Deployment
1

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.

screenshot
screenshot1458×337 58.8 KB

  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"]
2

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

image
image1544×506 129 KB

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

3

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?).

4

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:

5

@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)

Screenshot 2022-06-29 at 9.03.45 AM
Screenshot 2022-06-29 at 9.03.45 AM1818×401 31.8 KB

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

6

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.

7

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.

8

Hey, @rophilogene we’d need same configuration.
proxy-buffer-size yet to be added to Advanced Settings | Docs | Qovery ?

9

Hi @omaiboroda ,

it has been implemented, the parameter is network.ingress_proxy_body_size_mb

10

@a_carrano, can you double-check?
proxy-buffer-size and proxy-body-size are different params.

Thanks.

11

you are right, my bad I’ve read too fast!
Indeed this one has not been implemented yet

12

No worries! Can it be updated for our project?

13

Hi Oles, I am going to add this parameter today and it will be validated and merged by the team tomorrow. I keep you posted

14

Hi @omaiboroda and @soywod , the pull requests have been released. My team will review and release them tomorrow hopefully :crossed_fingers: - our doc has been updated: Advanced Settings | Docs | Qovery

https://api-doc.qovery.com/#tag/Application-Configuration/operation/getAdvancedSettings

15

Thanks @rophilogene.

16

@rophilogene @soywod wondering if I can apply this rule per project?
Otherwise, it’s cumbersome to keep this config for every application

17

@omaiboroda - it has been released, and it’s configurable via the Qovery API.

Unfortunately no, but once you have done it for your apps, it will not change. Even for cloned environments.

18

We are experiencing this issue on production (using custom domain) even after calling qovery api to update {"network.ingress.proxy_buffer_size_kb": 10} Is there any other configuration we need to perform for custom domains?

19

Did you redeploy your app?

1 Like
20

Yes still doesn’t work

EDIT: Sorry, I retried and it worked. I must have mixed the application ids

1 Like