Callback url not working in Next js SDK

[chintanjoyn]

Below screen show after successfully login.

Auth0 Configuration of callbackurl.

Auth0 LOG:

{
“date”: “2022-03-30T11:19:28.134Z”,
“type”: “feacft”,
“description”: “Unauthorized”,
“connection_id”: “”,
“client_id”: null,
“client_name”: null,
“ip”: “49.36.89.123”,
“user_agent”: “Other 0.0.0 / Other 0.0.0”,
“details”: {
“code”: “******************************************o2E”
},
“hostname”: “dev-6p3m670a.us.auth0.com”,
“user_id”: “”,
“user_name”: “”,
“auth0_client”: {
“name”: “nextjs-auth0”,
“version”: “1.7.0”,
“env”: {
“node”: “v14.18.2”
}
},
“log_id”: “90020220330111933198262481456900431017025113646841200658”,
“_id”: “90020220330111933198262481456900431017025113646841200658”,
“isMobile”: false
}

[lihua.zhang]

Hi @chintanjoyn ,

Welcome to the Auth0 Community!

I noticed that your callback URL includes /api/auth/. Do you mind updating it to http://localhost:3000/callback and giving it a try? Please keep us updated on how it goes. Thanks!

[chintanjoyn]

@lihua.zhang Thank You! for your replay, steel it not working give below error in LOG.

{
“date”: “2022-03-31T04:06:24.602Z”,
“type”: “f”,
“description”: “Callback URL mismatch. http://localhost:3000/api/auth/callback is not in the list of allowed callback URLs”,
“connection_id”: “”,
“ip”: “180.211.109.242”,
“user_agent”: “Chrome 99.0.4844 / Mac OS X 10.15.7”,
“details”: {
“body”: {},
“qs”: {
“client_id”: “oVVP98b79AWMbKEMWg56JZOVtw8rDdx9”,
“scope”: “openid profile email”,
“response_type”: “code”,
“redirect_uri”: “http://localhost:3000/api/auth/callback”,
“nonce”: “WXmokKsilB2tiJ7Rdxm0H7s32YN-5c5-A68V39H4TmE”,
“state”: “eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMC8ifQ”,
“code_challenge”: “wTq2CLMWT2gvtOTLFMneGs0BLIYm6Nur8Jq0ElspEcg”,
“code_challenge_method”: “S256”
},
“error”: {
“message”: “Callback URL mismatch. http://localhost:3000/api/auth/callback is not in the list of allowed callback URLs”,
“oauthError”: “Callback URL mismatch. http://localhost:3000/api/auth/callback is not in the list of allowed callback URLs. Please go to ‘https://manage.auth0.com/#/applications/oVVP98b79AWMbKEMWg56JZOVtw8rDdx9/settings’ and make sure you are sending the same callback url from your application.”,
“payload”: {
“message”: “Callback URL mismatch. 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/callback”
],
“attempt”: “http://localhost:3000/api/auth/callback”,
“client”: {
“clientID”: “oVVP98b79AWMbKEMWg56JZOVtw8rDdx9”
},
“log_url”: “https://manage.auth0.com/#/logs/”
},
“type”: “callback-url-mismatch”
}
},
“hostname”: “dev-6p3m670a.us.auth0.com”,
“log_id”: “90020220331040627526920649201086898600243609953437220866”,
“_id”: “90020220331040627526920649201086898600243609953437220866”,
“isMobile”: false
}

[lihua.zhang]

Thank you for the updates.

I tested this issue with the Auth0 sample Next.js project and could not repeat this error.

Here are the steps of my testing:

1. create a new Regular Web Application
2. open the Application, under Quick Start tab, click on Next.js, and click on “Download Sample”.
3. under the Settings tab, enter http://localhost:3000/api/auth/callback in the “Allowed Callback URLs” field and enter http://localhost:3000 in the “Allowed Logout URLs” field. The values you entered initially were correct, sorry about the misleading earlier.
4. open the downloaded project in VS Code. You may notice that the environment variables are pre-populated like this.
   
   
5. open terminal in VS code and run
   npm install && npm run dev
6. go to http://localhost:3000

BTW, in your screenshot, I noticed the “Allowed Logout URLs” has a “/” at the end. Could you remove it, save the application and give it a try?

Hope it helps!

[chintanjoyn]

Hi @lihua.zhang Thank You! for your replay.

There are issue in client secret key.So i replaced it in environment variable from application and it working fine!