Mismatching error while using auth in Nextjs

Help
, , , , ,
1

Screenshot (92)
Screenshot (92)675×585 48.9 KB 

**"error": {
      "message": "Callback URL mismatch. https://'http://localhost:3000'/api/auth/callback is not in the list of allowed callback URLs",
      "oauthError": "Callback URL mismatch. https://'http://localhost:3000'/api/auth/callback is not in the list of allowed callback URLs. Please go to 'https://manage.auth0.com/#/applications/Y3r9QBWuQ0SVYRp0qoIAWywctOBJQSmi/settings' and make sure you are sending the same callback url from your application.",
      "payload": {
        "message": "Callback URL mismatch. https://'http://localhost:3000'/api/auth/callback is not in the list of allowed callback URLs",
        "code": "unauthorized_client",
        "status": 403,
        "name": "CallbackMismatchError",
        "authorized": [
          "http://localhost:3000/api/auth/callback"
        ],
        "attempt": "https://'http://localhost:3000'/api/auth/callback",
        "log_url": "https://manage.auth0.com/#/logs/"
      },
      "type": "callback-url-mismatch"
    }
  },**

Screenshot (91)
Screenshot (91)1345×640 32.3 KB

3

Hi @Emmanueluzoezie ,

Welcome to the Auth0 Community!

Based on the error message,

message": “Callback URL mismatch. https://‘http://localhost:3000’/api/auth/callback
is not in the list of allowed callback URLs”,

Your code prepends an additional https:// and the http://localhost:3000 is quoted. I suggest you check your scripts to make sure the callback URL matches that’s configured in the setting, that is, http://localhost:3000/api/auth/callback.

Hope this helps!

4

Thanks for your feedback but please how can i check my script, because am using the default configuration provided by Auth0.

here’s is the only code i wrote

import { handleAuth } from '@auth0/nextjs-auth0';
export default handleAuth()
5

I suggest you capture the complete login event as a HAR file and check from there.

If you could DM the HAR file to me, I will look into this further.

6

Hi @Emmanueluzoezie ,

I tested the sample Auth0 Next.js Regular Web App and could log in successfully.

Here are the steps I did:

  1. Create a Next.js Regular Web App.
  2. Downloading the sample code from the quick start
  3. Go to the project folder:
    a. run npm install @auth0/nextjs-auth0
    b. run the openssl rand -hex 32 on the command line to generate a 32-bit long random value and add it to the AUTH0_SECRET field in the .env.local file
    c. in the .env.local file, AUTH0_BASE_URL = http://localhost:3000, instead of AUTH0_BASE_URL = ‘http://localhost:3000’
    c. run npm run dev

Hope the details help!