An error occured while trying to initiate the login request.
I followed the instructions here, but I’m receiving the generic error above and I’m unable to make any headway. Does anyone have more detail about what specifically is wrong?
Side note, I’m also trying to upgrade to NextJs 15 (to resolve the caching introduced in previous versions). I read somewhere that v4 supports Next 15, so that’s why I’m trying it out now.
Hi @bryso,
Can you provide more information? I’m assuming from the error message that this error comes about after a login attempt. Is it when you click the login button? Do you see an error page or console errors apart from what you’ve shared?
As much information you can provide as possible will be helpful. Screenshots/screen recordings are also welcome.
Thanks,
Mary Beth
Hey Beth,
Yes, when I click a button that links to /auth/login. I’m guessing something is incorrect with my configuration with the Application URIs, but it was working before so I don’t know why they would suddenly be wrong 
.
I’ve tried a number of different ways. First with my app I’ve been working on for the last year and I’m trying to upgrade. When that wouldn’t work, I tried the Sample-01 example that Auth0 provides for configuring Next apps. For this I made the necessary changes to upgrade it to v4. Finally I found another example specific to v4 here and tried that. All had the same issue. The video below shows what happens:
Link with video:
Thanks for the help 
Hi @bryso,
Unfortunately, I cannot view that link. Can you share it another way? Following the Next.js Quickstart, the Allowed Callback URL needs to end in /api/auth/callback. So for localhost, it would be http://localhost:3000/api/auth/callback. Could you kindly try changing your Allowed Callback URL?
I look forward to your reply!
Thanks,
Mary Beth
@bryso
I had issue with .env having https, once changed to without https. The login url started to work.
AUTH0_DOMAIN=“.eu.auth0.com”
V3 supported https:// in AUTH0_DOMAIN and it looks like it has been dropped in V4. Find it out by console logging middleware object and seeing double https in issuer
Can’t edit above:
AUTH0_DOMAIN=“yourdomain.eu.auth0.com”
Thanks, but changing that doesn’t resolve the “An error occurred while trying to initiate the login request.” error when I click my login button and am taken to my /auth/login page. One thing I’m unclear on, is with v4, do we still use the /api/auth endpoint in our app? I figured that since it wasn’t included in the readMe for v4, we no longer use that so I removed it from my code. Am I off base here?
Thanks for the reply. I tried your suggestion, but it didn’t resolve the issue. I’m a little unclear what you mean by logging the middleware object. Can you expand on that? Are you speaking of the request that’s sent to the middleware? Or the response that we wait for from auth0.middleware(request) ?
I also followed steps that are here and logged it like in the code below. Then checked all the values to discover an issue (https://https://yourdomain.eu.auth0.com as value)
Also make sure you are using APP_BASE_URL (if I remember correctyl it was renamed from AUTH0_BASE_URL)
middleware.ts in root
import { auth0 } from '@/utils/auth0';
import type { NextRequest } from 'next/server';
export async function middleware(request: NextRequest) {
console.log('middleware', auth0);
return await auth0.middleware(request);
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico, sitemap.xml, robots.txt (metadata files)
*/
'/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
],
};
/utils/auth0.ts
import { Auth0Client } from '@auth0/nextjs-auth0/server';
export const auth0 = new Auth0Client();
Logging out the value in the middleware as you showed didn’t reveal anything to me, this is what I received:
{
cookies: ResponseCookies {},
url: '',
body: ReadableStream {
[Symbol(kType)]: 'ReadableStream',
[Symbol(kState)]: <ref *1> {
disturbed: false,
reader: undefined,
state: 'readable',
storedError: undefined,
stream: undefined,
transfer: {
writable: undefined,
port1: undefined,
port2: undefined,
promise: undefined
}
I’m very confused about v3 vs v4 configuration . What EXACTLY is needed? Which ENV variables and what code? Is the /api/auth directory needed anymore?
@bryso Are you console logging exactly the same thing as I do? (auth0)
You can just copy my code I posted earlier
As mine object has values for all and very different format and different keys
Only middleware.ts in root is required which is using auth0 defined in /lib or /utils (defining it so you can also use it in code) together with those env vars AUTH0_DOMAIN, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, AUTH0_SECRET and APP_BASE_URL
Make sure you are also running version 15 of Nextjs and version 4 of @auth0/nextjs-auth0. Maybe reinstall node_modules could help if you have everything set up.
If nothing helps, try it in the empty project.
middleware Auth0Client {
transactionStore: TransactionStore {
secret: <redacted>,
cookieConfig: {
httpOnly: true,
sameSite: 'lax',
secure: false,
path: '/',
maxAge: 3600
}
},
sessionStore: StatelessSessionStore {
SESSION_COOKIE_NAME: '__session',
cookieConfig: { httpOnly: true, sameSite: 'lax', secure: false, path: '/' },
secret: <redacted>,
rolling: true,
absoluteDuration: 2592000,
inactivityDuration: 604800,
store: undefined
},
authClient: AuthClient {
fetch: [Function],
jwksCache: {},
transactionStore: TransactionStore {
secret: <redacted>,
cookieConfig: {
httpOnly: true,
sameSite: 'lax',
secure: false,
path: '/',
maxAge: 3600
}
},
sessionStore: StatelessSessionStore {
SESSION_COOKIE_NAME: '__session',
cookieConfig: { httpOnly: true, sameSite: 'lax', secure: false, path: '/' },
secret: <redacted>,
rolling: true,
absoluteDuration: 2592000,
inactivityDuration: 604800,
store: undefined
},
issuer: 'https://dev-<redacted>.eu.auth0.com',
clientMetadata: { client_id: '<redacted>' },
clientSecret: '<redacted>',
redirectUri: URL { },
authorizationParameters: { scope: 'openid profile email offline_access' },
appBaseUrl: 'http://localhost:3000',
signInReturnToPath: '/',
beforeSessionSaved: undefined,
onCallback: [Function: defaultOnCallback]
}
}
setting it without https:// also fixed it for me, but now i get the exact same error message when trying to call logout
Awesome! I hope Auth0 team could implement better error message for that edge case.
Looks like I was using 4.0.0-beta.0. Switching it to the latest, deleting node_modules and package.lock along with reinstalling gave me something like what you have. I see that the issuer is https://localhost:3999 which seems wrong . How exactly is the issuer set?
I’m still getting the same error I originally got:
An error occured while trying to initiate the login request.
Auth0Client {
transactionStore: TransactionStore {
secret: <redacted>,
cookieConfig: {
httpOnly: true,
sameSite: 'lax',
secure: false,
path: '/',
maxAge: 3600
}
},
sessionStore: StatelessSessionStore {
SESSION_COOKIE_NAME: '__session',
cookieConfig: { httpOnly: true, sameSite: 'lax', secure: false, path: '/' },
secret: <redacted>
rolling: true,
absoluteDuration: 2592000,
inactivityDuration: 604800,
store: undefined
},
authClient: AuthClient {
fetch: [Function],
jwksCache: {},
transactionStore: TransactionStore {
secret: <redacted>,
cookieConfig: {
httpOnly: true,
sameSite: 'lax',
secure: false,
path: '/',
maxAge: 3600
}
},
sessionStore: StatelessSessionStore {
SESSION_COOKIE_NAME: '__session',
cookieConfig: { httpOnly: true, sameSite: 'lax', secure: false, path: '/' },
secret: <redacted>,
rolling: true,
absoluteDuration: 2592000,
inactivityDuration: 604800,
store: undefined
},
issuer: 'https://localhost:3999',
clientMetadata: { client_id: <redacted>},
clientSecret: <redacted>,
authorizationParameters: { scope: 'openid profile email offline_access' },
appBaseUrl: 'http://localhost:3999',
signInReturnToPath: '/',
beforeSessionSaved: undefined,
onCallback: [Function: defaultOnCallback]
}
}
I looked at the auth0 code from the package and the error is being thrown here:
I’m assuming the problem is related to my issuer being set as issuer: 'https://localhost:3999', on the auth0 object as I mentioned in the previous comment. Does anyone know why it would be getting set to https? I double checked my config and I am not setting it that way. Is anybody else able to work with this beta locally?
It looks like the issue was that AUTH0_DOMAIN was set to localhost instead of the domain Auth0 provides for it’s identity service (the ENV variable that used to be AUTH0_ISSUER_BASE_URL). In addition to that, o.sevcik91 was right that it should exclude the protocol.
A Quality of life improvement from the Auth0 team would be to give a more descriptive error message here to help point me to the problem at hand. Instead of:
An error occurred while trying to initiate the login request.
Maybe in discoverAuthorizationServerMetadata they could add some logic to interpret the error a little better and in handleLogin give a more user friendly error such as `An error occured while trying to initiate the login request. This can potentially be from your AUTH0_DOMAIN being set incorrectly.
Thanks for help everyone!