Oauth/token gets Unauthorized / access_denied response

[lilliputten]

I’m trying to make test app for auth0 on nextjs with @auth0/nextjs-auth0, using interactive manual.

My local server runs on http://localhost:3000.

I’ve set up addresses in auth0 application dashboard for http://localhost:3000/ and http://localhost:3000/api/auth/callback.

I tried to set both application types there: ‘Regular Web Application’ and ‘Single Page Application’.

I’m getting console error after (successfull?) authorization cycle:

CallbackHandlerError: Callback handler failed. CAUSE: access_denied (Unauthorized)

I’ve seen a lot of questions about this issue as on this site as and on stackoverflow and github. But in none of these discussions I could see a solution for my case.

Actually, it happens when browser has redirected to final callback (with url like http://localhost:3000/api/auth/callback?code=kMh43xvyzlUswz4YHzrWAQ_FCon0Y2qzEcgPgPdB7ltJy&state=eyJyZXR1cm5UbyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzAwMCJ9).

I’ve made some research and it’s turned out that I receive 401 error on oauth/token response (via @auth0/nextjs-auth0/dist/auth0-session/client and openid-client/lib):

POST https://dev-2hnwky81m58gjr4c.us.auth0.com/oauth/token

With headers:

Accept: application/json
Authorization: Basic dXpZQ2RRazdndzFJbVl0eXRnQ0RnYUpsWEthamM0aGk6ZmI5YTQxZmUwODJlNWM1NTY0ODJmMDk4ZWU0NGU3OWU0ODQ1NjlmMzc4NTMxNmU2ZGZmNzJhZGRhMWM2NDY5Ng==
User-Agent: nextjs-auth0/3.2.0
Host: dev-2hnwky81m58gjr4c.us.auth0.com
content-type: application/x-www-form-urlencoded
content-length: 205

Decoded ‘Authorization’ field here is for my (client id:client secret) data.

Payload data:

{
  "grant_type": "authorization_code",
  "code": "yZSKmo9a_JXFyTDftfl1p7yH_tmlrj746oZ5DKHP-9dy7",
  "redirect_uri": "http://localhost:3000/api/auth/callback",
  "code_verifier": "1TgZFvhugtMtSf-t-PaIC87qLOzXMyK-BvFK4zhacew"
}

Response headers:

Date: Mon, 23 Oct 2023 20:13:21 GMT
Content-Type: application/json
Content-Length: 60
Connection: close
CF-Ray: 81aca3dc68c74b53-BKK
CF-Cache-Status: DYNAMIC
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0, no-transform
Set-Cookie: did=s%3Av0%3A9ceb1890-71e0-11ee-9973-59fbc72fd88b.cDOTXG%2BaiPIBIrh7CPbPW%2ByN9P1A5tseRpVHAWuYxgA; Max-Age=31557600; Path=/; Expires=Wed, 23 Oct 2024 02:13:21 GMT; HttpOnly; Secure; SameSite=None
Strict-Transport-Security: max-age=31536000; includeSubDomains
Vary: Origin
ot-baggage-auth0-request-id: 81aca3dc68c74b53
ot-tracer-sampled: true
ot-tracer-spanid: 2b427f830af9129a
ot-tracer-traceid: 79d215886dc44a72
Set-Cookie: did_compat=s%3Av0%3A9ceb1890-71e0-11ee-9973-59fbc72fd88b.cDOTXG%2BaiPIBIrh7CPbPW%2ByN9P1A5tseRpVHAWuYxgA; Max-Age=31557600; Path=/; Expires=Wed, 23 Oct 2024 02:13:21 GMT; HttpOnly; Secure
traceparent: 00-000000000000000079d215886dc44a72-2b427f830af9129a-01
tracestate: auth0-request-id=81aca3dc68c74b53,auth0=true
X-Auth0-RequestId: 304168aa5a74829f8894
X-Content-Type-Options: nosniff
X-RateLimit-Limit: 300
X-RateLimit-Remaining: 299
X-RateLimit-Reset: 1698092002
Server: cloudflare
alt-svc: h3=":443"; ma=86400

Response body:

{
  "error": "access_denied",
  "error_description": "Unauthorized"
}

My .env.local config:

AUTH0_SCOPE=openid profile email
AUTH0_ENABLE_TELEMETRY=0
AUTH0_SECRET=<HIDDEN>
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://dev-2hnwky81m58gjr4c.us.auth0.com
AUTH0_CLIENT_ID=uzYCdQk7gw1ImYtytgCDgaJlXKajc4hi
AUTH0_CLIENT_SECRET=<HIDDEN>

Used library and tool versions:

• @auth0/nextjs-auth0: 3.2.0
• next: 13.5.6
• react: 18.2.0
• npm: 9.5.1
• node: v18.16.0

What is my mistake? What and where should I fix?

[marcelina.barycka]

Hey there @lilliputten !

Thanks for reaching out here on the Auth0 Community!
I think you could start troubleshooting by editing your .env.local config file so that all string values are enclosed with the quotation marks, like:

AUTH0_ISSUER_BASE_URL='https://dev-2hnwky81m58gjr4c.us.auth0.com'

GitHub - auth0/nextjs-auth0: Next.js SDK for signing in with Auth0

Hope this helps, let us know!