Next.js Vercel access_denied (unauthorized)

blazestudios23 · June 22, 2021, 4:22pm

Bug report

Using:

“@auth0/nextjs-auth0”: “1.3.1”,
“next”: “latest”,
“react”: “17.0.2”,
“react-dom”: “17.0.2”,
“typescript”: “^4.3.3”

This is running on node 14.

my directory is pages/api/auth/[…auth0].ts

[…auth0].ts contains:

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

After signing on with google or twitter, it returns to the https://domain/api/auth/callback
and I get the following error message:

access_denied (Unauthorized)

I do not get that error in my local environment, everything works there. I am hosting with Vercel and get this error in that hosting environment. It’s possible that there is some kind of .env secret that is miss configured. Or that the server less function calling this is not passing something correctly to Auth0.

I really need some help on this, so any advice is greatly appreciated.

stephanie.chamblee · June 22, 2021, 4:57pm

Hi @blazestudios23,

Welcome to the Community!

We have an FAQ that might be related to this error:

Also, I found this Github issue in the nextjs-auth0 repo. In this case, the social connection did not work because of the env vars that were configured:

github.com/auth0/nextjs-auth0

Unauthorized with GitHub login

opened 11:43AM - 15 Jan 20 UTC

closed 08:20PM - 15 Jan 20 UTC

tpiros

### Description I am using the sample Next.js Auth0 application and I added Git…Hub authentication, but unfortunately it always returns `Unauthorized`. ### Reproduction - `npx create-next-app --example auth0 auth` - `cd auth0` - `npm i` - `cp .env.template .env` - I have setup a GitHub Application and enabled the social connection - Click on Login - Select 'GitHub' - Observe 'Unauthorized' FYI I am *not* using a custom domain. My GitHub app settings are: Homepage URL: `https://mytenantname.auth0.com` Authorization callback URL: `https://mytenantname.auth0.com/api/callback` My `.env` file: ``` AUTH0_CLIENT_ID=XXX AUTH0_DOMAIN=mytenantname.auth0.com AUTH0_CLIENT_SECRET=ABC REDIRECT_URI=http://localhost:3000/api/callback POST_LOGOUT_REDIRECT_URI=http://localhost:3000/ SESSION_COOKIE_SECRET=123 ``` Please note that I have also tried to change the GitHub Application settings from the tenant name to `http://localhost:3000` and `http://localhost:3000/api/callback` but in that case I am getting the following error: `state mismatch, expected long-random-string, got: another-long-random-string` Plus the following message in the console: `The redirect_uri MUST match the registered callback URL for this application.` ### Environment > Please provide the following: - 0.6.0 - next: "latest" - Mac/Chrome latest

Hopefully, those resources will help you get past the error!

blazestudios23 · June 22, 2021, 8:05pm

I’ve already read both of these and neither resolved the issue that I’m facing.

blazestudios23 · June 23, 2021, 5:37am

I found the issue. I had:

AUTH0_SCOPE= "openid email profile"

in Vercel.

Changing it to:

AUTH0_SCOPE=openid email profile

Fixed the problem.

The issue was caused by quotation marks in the environment variable.

stephanie.chamblee · June 23, 2021, 1:56pm

Glad to hear you were able to resolve it. Thanks for sharing your solution!