Can't sign in with Github (Deployed on Vercel)

[cachho]

I just deployed this on Vercel and I can't sign in with Github. I already redeployed and recloned.

Here are all the changes I did.

1. Add the required keys (OPENAI_API_KEY, AUTH_GITHUB_SECRET, AUTH_GITHUB_ID)
2. Rename opengraph-image.tsx and remove the export const runtime = 'edge' line
3. Redeploy
4. Fix the https://errors.authjs.dev#errors_missingsecret error by adding a NEXTAUTH_SECRET environment variable. Redeploy.
5. Add https://nextjs-chat-DOMAIN.vercel.app/ as my Homepage URL and https://nextjs-chat-domain.vercel.app/api/auth/callback/github as Authorization callback URL for the Github oauth app.

This is what it's leaving me with

The logs look normal (this is my first time deploying on vercel, I don't know how to expand them)

I also tried to run it locally, I changed the Authorization callback URL but the result is the same.

[cachho]

I found #28 and changed the callback url to https://nextjs-chat-DOMAIN.vercel.app/api/auth/callback/github but still get the issue.

[balazsorban44]

could you add a reproduction? the deployed example mentioned here https://github.com/vercel-labs/ai-chatbot/issues/28#issuecomment-1602571012 works.

[cachho]

could you add a reproduction? the deployed example mentioned here #28 (comment) works.

sure, I made it public but what I described as step 2 is the only thing that I actually changed in the code base: https://github.com/cachho/nextjs-chat

Edit: screenshot from github oauth:

[cresencio]

Had the same issue and resolved following the suggestion from @balazsorban44, however my lock file references 0.0.0-manual.223c6467 and the Vercel server logs were failing to deploy. I checked the logs and one of the messages suggested running pnpm install --no-frozen-lockfile. I did that locally and then pushed to main and the build was successful. ~~The Github login worked too.~~ Ah, posted too soon. It's not exactly working because after authorizing the app I get redirected back but the login link does not change to my profile. I'll investigate tomorrow or over the weekend.

Before doing that, I also added the NEXTAUTH_SECRET generated from https://generate-secret.vercel.app/32

[balazsorban44]

@cacho can you run pnpm up @auth/nextjs in your project? Your lockfile suggests you forgot to follow https://github.com/vercel-labs/ai-chatbot/issues/28#issuecomment-1602571012

You can see the available versions at https://www.npmjs.com/package/@auth/nextjs?activeTab=versions As of writing, the latest experimental version is 0.0.0-manual.179c08d4 but you are on an 11 days old version.

@cresencio will need a reproduction.

[cachho]

@cacho can you run pnpm up @auth/nextjs in your project? Your lockfile suggests you forgot to follow #28 (comment)

Still the same stuff I've seen before. After a while the github authorize page opens, I authorize and then I get back to the sign in page (https://nextjs-chat-7wnb.vercel.app/api/auth/signin). Hitting the button again just reloads the page, and after hitting it for a dozen times I either get github's "reauthorization required" or "try signing in with a different account".

My repo has been updated.

edit: I found this in the logs

[31m[auth][error][OAuthCallbackError][0m: OAuth Provider returned an error. Read more at https://errors.authjs.dev#oauthcallbackerror
    at handleOAuth (/var/task/.next/server/chunks/541.js:9423:15)
    at async callback_callback (/var/task/.next/server/chunks/541.js:9588:41)
    at async AuthInternal (/var/task/.next/server/chunks/541.js:10413:38)
    at async Auth (/var/task/.next/server/chunks/541.js:10664:30)
    at async /var/task/.next/server/chunks/550.js:1087:37

[cresencio]

@balazsorban44 - the issue seems to have gone away! All I did was clear my cache 🤷‍♂️ But thanks anyway!

[balazsorban44]

FYI: I've added some improvements in this PR https://github.com/vercel-labs/ai-chatbot/pull/80 which is waiting for approval/merge.

[balazsorban44]

@cachho I noticed that your description's 5th step says:

Add https://nextjs-chat-DOMAIN.vercel.app/ as my Homepage URL and Authorization callback URL for the Github oauth app.

This is wrong. The callback URL needs to be: https://nextjs-chat-DOMAIN.vercel.app/api/auth/callback/github as documented at https://authjs.dev/reference/core/providers_github#callback-url

That might be the issue!

[cachho]

@cachho I noticed that your description's 5th step says:

Add https://nextjs-chat-DOMAIN.vercel.app/ as my Homepage URL and Authorization callback URL for the Github oauth app.

This is wrong. The callback URL needs to be: https://nextjs-chat-DOMAIN.vercel.app/api/auth/callback/github as documented at https://authjs.dev/reference/core/providers_github#callback-url

That might be the issue!

sorry, I did not describe that right (I will correct my original post). I already made that change, please take a look at the screenshot I posted: https://github.com/vercel-labs/ai-chatbot/issues/78#issuecomment-1603376350

And thanks for the help!

[balazsorban44]

Hmm. Maybe take a look at https://github.com/vercel-labs/ai-chatbot/pull/80

After the applied changes there, not only login works when deployed: https://ai-chatbot.vercel.sh/ but it also supports OAuth login on preview deployments, eg: https://ai-chatbot-1qzzt58mx.vercel.sh/

So this is definitely a configuration issue, or an outdated version of next-auth that you are using.

[MacWatrous]

I'm also having no luck and I've deployed the latest version of this repo.

My error is

[31m[auth][error][CallbackRouteError][0m: Read more at https://errors.authjs.dev#callbackrouteerror
[31m[auth][cause][0m: OperationProcessingError: "response" body "access_token" property must be a non-empty string
    at processGenericAccessTokenResponse (/var/task/.next/server/chunks/57.js:8396:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async processAuthorizationCodeOAuth2Response (/var/task/.next/server/chunks/57.js:8556:20)
    at async handleOAuth (/var/task/.next/server/chunks/57.js:9388:18)
    at async callback_callback (/var/task/.next/server/chunks/57.js:9522:41)
    at async AuthInternal (/var/task/.next/server/chunks/57.js:10347:38)
    at async Auth (/var/task/.next/server/chunks/57.js:10598:30)
    at async /var/task/.next/server/chunks/550.js:1087:37
[31m[auth][details][0m: {
  "provider": "github"
}

package.json and pnpm-lock.yaml both have version 0.0.0-manual.83c4ebd1 for next-auth

My Github OAuth app looks like: (full expanded callback URL below)

[balazsorban44]

@MacWatrous can you add a full reproduction, so I can take a look? As shown above, we have a deployed version now, working as expected, so there's likely something missing/misconfigured, I believe.

[MacWatrous]

Ugh I just figured it out.. My AUTH_GITHUB_SECRET had a space in front of it. Everything is working for me now!

[sametcodes]

It solved the issue adding the vercel domain URL of the deployment as NEXTAUTH_URL on environment variables. It says NEXTAUTH_URL is required only for development purposes, but I guess something is missing on the code with that variable.

[swyxio]

i think the issues are quite confusing. since a lot of them reference NEXTAUTH_URL, but now there is nothing in the template that is NEXTAUTH_URL

[balazsorban44]

NEXTAUTH_URL does not need to be set on Vercel and hasn't been required for a while. See https://next-auth.js.org/deployment#vercel

NEXTAUTH_URL is required only for development purposes

@sametcodes This does not sound correct, it's not needed locally either. Can you point me to where this is stated so we can update this?

Recently merged some more instructions (#85), please see https://github.com/vercel-labs/ai-chatbot/blob/9c25c3f4b25278962e2a48e6e0c31e2b40ea86d7/.env.example#L5-L13 and read https://github.com/vercel-labs/ai-chatbot/issues/89#issuecomment-1621630872 for more details, and a working example deployed on Vercel (even supporting preview deployments).

[imanirak]

Had this same issue, realized the wrong key was copied to the variable. So I had to update them and redeploy the website for changes to take effect.

[RushilJalal]

I'm facing the same issue as in the title. For me, Github Auth works perfectly locally, but stops working as soon as I deploy it on Vercel. Can someone help me? I created a discussion with all necessary errors here https://github.com/nextauthjs/next-auth/discussions/11279