How to login with auth0 in next js?

user_13168080 0
Viewed 821

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.

error on login

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?

auth0 next.js reactjs
2 Answers

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

  1. In your .env.local file AUTH0_BASE_URL should be set to http://localhost:<port>
  2. In you .env.local file AUTH0_ISSUER_BASE_URL should be set to your Auth0 domain: https://xxx.us.auth0.com
  3. 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.

user_15614330

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.

auth0

user_127770680
Related