Corporate Proxy GitHub Provider

[PaulieScanlon]

Question 💬

Hi, i have a next.js app deployed on Vercel and am using the NextAuth GitHub Provider for Sign-in.

My app is behind a corporate proxy and i have applied the patch as suggested here. I'm not sure i fully understand all the ways to configure this to work and am not sure if i'm missing something so here's my current config. Perhaps you can help me work out which bits i need, and which bits i don't.

1. The CDN url is: https://demo-cloud-api.vercel.app/
2. The Proxy url is: https://www.cockroachlabs.com/demos/demo-cloud-api/
3. The basePath on the session provider is: basePath={isProd ? '/demos/demo-cloud-api/api/auth' : undefined}
4. The Authorization callback URL in my GitHub oAuthApp is https://demo-cloud-api.vercel.app/
5. The NEXTAUTH_URL in my env variable seeting is https://demo-cloud-api.vercel.app/
6. I also have the assetPrefix defined in next.config.js as /demos/demo-cloud-api.
7. I have also tried setting a rediect in callbacks like this:

    async redirect() {
      return 'https://cockroachlabs.com/demos/demo-cloud-api/'
    },

8. This is what happens when i click Sign in

9. And this is what happens after NextAuth tries to Sign in.

There's so much going on here and i've tried so many things i've kinda lost track of what combination of changes i need to keep. Could you outline what i need to set for all 7 steps and i'll try and work through this methodically.

Thanks in advance.

How to reproduce ☕️

Visit https://www.cockroachlabs.com/demos/demo-cloud-api/ and click Sign in in the top right hand corner.

The repo for the project is here: https://github.com/cockroachdb/demo-cloud-api

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[balazsorban44]

NEXTAUTH_URL: https://cockroachlabs.com/demos/demo-cloud-api/api/auth (the end needs to include wherever the api is. It's noted here https://next-auth.js.org/configuration/options#nextauth_url)
basePath : /demos/demo-cloud-api
GitHub callback URL is: https://cockroachlabs.com/demos/demo-cloud-api/api/auth/callback/github (same as NEXTAUTH_URL)

We don't use the next.config.js file config.

I don't believe you would need the patch in this case. 🤔

Cannot really check your deployed page, it crashes with 500 on https://www.cockroachlabs.com/demos/demo-cloud-api/api/auth/session, but it's also weird that it returns HTML, and not JSON like https://next-auth-example.vercel.app/api/auth/session would.

[PaulieScanlon]

Thanks so much @balazsorban44!!

Sorry for the delay, I've been working with the Vercel support team and we now have the page loading... I needed trailingSlash: true in next.config.js.

I still see a NextAuth error though. This occurs after clicking sign in and i'm redirected back to.

https://demo-cloud-api.vercel.app/api/auth/signin/github/

This is what i have currently setup.

• NEXTAUTH_URL=https://cockroachlabs.com/demos/demo-cloud-api/api/auth
• NEXT_PUBLIC_ASSET_PREFIX=/demos/demo-cloud-api

and in the GitHub oAuth app settings i have:

Authorization callback URL *
https://cockroachlabs.com/demos/demo-cloud-api/api/auth/callback/github

The Session Provider looks like this

  <SessionProvider session={session} basePath='https://www.cockroachlabs.com/demos/demo-cloud-api/api/auth/'>

Are either of those incorrect?

The two routes should now work:

• https://demo-cloud-api.vercel.app/demos/demo-cloud-api/api/auth/session/
• https://www.cockroachlabs.com/demos/demo-cloud-api/api/auth/session/

The .vercel.app url does show session info, but when i click the "Sign in" button i'm redirected back to the wrong URL.

What do you think, did i do something wrong?

[ThangHuuVu]

Summary of the setup:

First, the next-auth app:

• Next.js app, using next-auth latest.
• In next.config.js, set trailingSlash: true.
• Set custom basePath for next-auth: /demos/demo-cloud-api/api/auth
• Deploy this app to Vercel at https://demo-cloud-api.vercel.app/demos/demo-cloud-api/, and set NEXTAUTH_URL to https://demo-cloud-api.vercel.app/demos/demo-cloud-api/

Second, the Netlify configuration

• The main app is deployed at https://www.cockroachlabs.com/
• In the proxy configuration, use splat syntax to proxy /demos/demo-cloud-api to the next-auth app like this: /demos/demo-cloud-api* demo-cloud-api.vercel.app/demos/demo-cloud-api/:splat

Problem: next-auth checks for x-forwarded-host in the request to detect the host - but when the request comes from the Netlify proxy, the value is https://demo-cloud-api.vercel.app - so the host detection is wrong and results in sending us to https://next-auth-cockroachdb.vercel.app/api/auth/signin/github/

IMO this is a problem with either Vercel or Netlify - next-auth will use x-forwarded-host as-is and we don't want to change this logic. cc @balazsorban44

[balazsorban44]

x-forwarded-host looks correct to me, as per https://vercel.com/docs/concepts/edge-network/headers#host

[balazsorban44]

Looks like we need to prefer NEXTAUTH_URL on Vercel as done in #4509.

A temporary solution could be: #6526 (comment)

[PaulieScanlon]

Hey @balazsorban44 . I can confirm the advanced initialization config + process.env.VERCEL=trueworked for me as mentioned in #6526 (comment)

I've been talking with @ThangHuuVu on Twitter and... what a nice chap! He's been supurb in helping me work through this. ❤️

Thank you so much for all your efforts!!

I'll check with Thang and see if there's a logical way to document all the steps we took in case others run into the same problem.