Problems when I try to log in with NextAuth using Github provider in my application deployed in Vercel

I just created a simple app with Next.js to see how NextAuth works with the Github provider.

In my development enviorment works everything well, but when I deploy my app in Vercel and I click in the login button, I get this url:

http://localhost:3000/?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdocs.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23redirect-uri-mismatch&state=1S7m46DjI2wDIuPTSeYRU-BPK0r6SyT7yXe2hRxPgso

It doesn't make any sense because my app is deployed in https://nextjs-auth-phi.vercel.app, not in http://localhost:3000.

Before to deploy mi app, of course, I added the enviorment variables GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET in Vercel (because Vercel, as far as I know, it won't read my .env file.

This is my package.json:

{
  "name": "next-auth-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.5",
    "next": "13.4.5",
    "next-auth": "^4.22.1",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2"
  }
}

And this is my next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: ["avatars.githubusercontent.com"],
    }
};

module.exports = nextConfig;

Any idea why this isn't working?

Solution

I fixed it. The error I was experiencing it was because the registered callback URL in my Github account was localhost:3000 instead of my Vercel production URL.

How to fix it:

Go to the GitHub Developer Settings page: https://github.com/settings/developers.
In Homepage URL option, enter your Vercel production URL.
In Authorization callback URL option, enter your Vercel production URL.
Hit Update application button.