When using Next.JS 13 with Google's OAuth, I receive "Error 400: redirect_uri_mismatch"

I am using Next.JS 13's App Router, with the authentication library next-auth.js attached to the router.

I have configured Google's OAuth settings as shown in this picture - this configuration works perfectly for me when using localhost.

However, when I use a VPS and a real domain, I receive the error Error 400: redirect_uri_mismatch even with the URL parameter redirect_uri=http://localhost:3000/api/auth/callback/google

I tried to change the URI to localhost as stated but it's absolutely wrong because it's not in localhost anymore.

Solution

finally i can fix this.

if anyone got:

Error 400: redirect_uri_mismatch
redirect_uri=http://localhost:3000/api/auth/callback/google
or the page is being redirected back to sign in page even after logging

in production mode, it is because you need to specify this value in your .env file or as an environment variable for your deployment:

NEXTAUTH_URL=https://yourdomain.com

you can read it here