How to fix "Callback URL mismatch" NextJs Auth0 App

user_10020729 0
Viewed 2137

I am using Auth0 NextJs SDK for authentication in my NextJS App. I am following this tutorial https://auth0.com/blog/introducing-the-auth0-next-js-sdk/. In my local machine, everything works fine.

The configuration for Auth0 in my local server:

AUTH0_SECRET=XXXXX
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://myappfakename.us.auth0.com
AUTH0_CLIENT_ID=XXXX
AUTH0_CLIENT_SECRET=XXXX

In the Auth0 Dashboard, I added the following URLs :

Allowed Callback URLs: http://localhost:3000/api/auth/callback
Allowed Logout URLs: http://localhost:3000/

My local app works locally fine.

I uploaded the app on Vercel. And changed the

AUTH0_BASE_URL=https://mysitefakename.vercel.app/

In Auth0 Dashboard, updated the following information:

Allowed Callback URLs: https://mysitefakename.vercel.app/api/auth/callback
Allowed Logout URLs: https://mysitefakename.vercel.app

I am getting the following error:

Oops!, something went wrong
Callback URL mismatch.
The provided redirect_uri is not in the list of allowed callback URLs.
Please go to the Application Settings page and make sure you are sending a valid callback url from your application

What changes I should make it works from Vercel as well?

vercel auth0 next.js
3 Answers

You can try to check if vercel isn't changing the url when redirecting to auth0. Your configurations seems good to me. The error is very explicit though. I think a good option should be to verify that the redirect (if handled by vercel) is doing with the same url as auth0 expects.

And don't forget to add the url you're currently on when performing the callback. Are you in https://mysitefakename.vercel.app/api/auth/callback when the callback is executed? (call auth0).

user_117772900

you have to change your base url in the env.local file

AUTH0_BASE_URL=https://mysitefakename.vercel.app/

you can also make two more env files namely env.development and env.production and set different base urls for different cases so that the correct base url is automatically loaded depending on how ur web app is running.

user_143362460

You need to add handleLogin under api/auth/[...auth0].js and that will solve it:

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

    export default handleAuth({
      async login(request, response) {
        await handleLogin(request, response, {
          returnTo: '/profile',
        });
      },
    });

Don't forget to also add allowed callback url in [Auth0 Dashboard]: https://manage.auth0.com/dashboard for your hosted app for both local and hosted instance: http://localhost:3000/api/auth/callback, https://*.vercel.app/api/auth/callback

user_135577500
Related