How to login with auth0 in next js?

Question

How to login in a next js app with auth0? I followed the quickstart from the auth0 website and I am getting this error on the login page.

<a href="/api/auth/login">Login</a>

This is pages/api/[...auth0].js

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

export default handleAuth();

I am getting this error on the login page.

and I am getting this in my terminal

OPError: expected 200 OK, got: 404 Not Found
    at processResponse (/home/madhav/Documents/Web Development/freelancing/frontend-affilboost/node_modules/openid-client/lib/helpers/process_response.js:48:11)
    at Function.discover (/home/madhav/Documents/Web Development/freelancing/frontend-affilboost/node_modules/openid-client/lib/issuer.js:252:22)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  error: 'expected 200 OK, got: 404 Not Found'
}

I am getting Failed to load resource, the server responded with code 500 in my browsers' console.

What am I doing wrong?

Having this exact same issue and just searched for way too long to find this SO post. Sorry I'm adding no value, but I'm commenting so I can follow along and to let you know you are not alone. — frenchloaf
– frenchloaf, Commented Jul 3, 2021 at 1:22

frenchloaf · Accepted Answer · 2021-07-03 11:44:11Z

5

The issue you're likely experiencing here is the following:

In your .env.local file AUTH0_BASE_URL should be set to http://localhost:<port>
In you .env.local file AUTH0_ISSUER_BASE_URL should be set to your Auth0 domain: https://xxx.us.auth0.com
Make sure your callback URL inside of Auth0 is set to http://localhost:<port>/api/auth/callback

Replace <port> with whatever port you're using locally to serve the application.

answered Jul 3, 2021 at 11:44

frenchloaf

1,0641 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maria Ines Parnisari Over a year ago

This should be marked as answer :)

Steph · Accepted Answer · 2021-12-01 19:36:46Z

2

Bumped into the same thing, I know it's unlikely but don't forget to create a folder /auth inside your /api folder. I got the same error until I figured this out.

answered Dec 1, 2021 at 19:36

Steph

5232 gold badges6 silver badges16 bronze badges

Comments

FadedBronze · Accepted Answer · 2022-10-19 22:12:06Z

0

Changing .env to .env.local was the fix for me.

answered Oct 19, 2022 at 22:12

FadedBronze

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to login with auth0 in next js?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related