Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

next.js 14.2.1 gives 404 on /auth/signin #10585

Open
adriangalilea opened this issue Apr 14, 2024 · 39 comments
Open

next.js 14.2.1 gives 404 on /auth/signin #10585

adriangalilea opened this issue Apr 14, 2024 · 39 comments
Labels
bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.

Comments

@adriangalilea
Copy link

adriangalilea commented Apr 14, 2024

Environment

System:
OS: macOS 14.4.1
CPU: (10) arm64 Apple M2 Pro
Memory: 258.67 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.7.1 - ~/.nvm/versions/node/v21.7.1/bin/node
npm: 10.5.0 - ~/.nvm/versions/node/v21.7.1/bin/npm
pnpm: 8.14.1 - ~/Library/pnpm/pnpm
bun: 1.1.1 - /opt/homebrew/bin/bun
Browsers:
Brave Browser: 121.1.62.162
Chrome: 123.0.6312.123
Safari: 17.4.1
npmPackages:
@auth/drizzle-adapter: ^0.8.0 => 0.8.0
next: 14.1.2 => 14.2.1
next-auth: ^5.0.0-beta.15 => 5.0.0-beta.15
react: ^18 => 18.2.0

Reproduction URL

https://github.com/adriangalilea/e-id

Describe the issue

when I use the signIn button it leads me to https://e-id.to/auth/signin?callbackUrl=https%3A%2F%2Fe-id.to%2F as per my atuh.ts

If the version of next.js is 14.1.2 it works great.

If the version of next.js is 14.2.1 it gives a 404, if I refresh after the 404, it works normally.

In the meantime I reverted to 14.1.2.

How to reproduce

above

Expected behavior

above

@adriangalilea adriangalilea added bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime. labels Apr 14, 2024
@patelvivekdev
Copy link

I encountered a 404 error when clicking the "Sign In" button after deploying the NextAuth.js example to Vercel.

Here's a breakdown of the issue:

Steps to Reproduce:

  • Clone the NextAuth.js example repository.
  • Deploy the project to Vercel.
  • Attempt to sign in using the provided button.

Expected Behavior:

The user should be redirected to the appropriate authentication flow.

Actual Behavior:

A 404 error page is displayed.

Workaround:

Downgrading Next.js to version 14.1.4 seems to resolve the issue.

@patelvivekdev
Copy link

When I tried following, it works with NextJs 14.2.1

Example Next14.2.1

@taskrider2022
Copy link

taskrider2022 commented Apr 15, 2024

I have a similar problem. When I log in, no redirect is performed. The url remains on /sign-in. If I then do a reload, I am redirected correctly. If I then log out, it does not redirect to the /sign-in page, but remains on the last page. With a downgrade to 14.1.4 this problem does not exist.

P.S. I use next-auth@5.0.0-beta.16

@adriangalilea
Copy link
Author

@patelvivekdev tried your suggestion and it does give me 404

@patelvivekdev
Copy link

@patelvivekdev tried your suggestion and it does give me 404

@adriangalilea Did you find it out any workaround?

P.S. I am using next-auth@5.0.0-beta.16

@adriangalilea
Copy link
Author

adriangalilea commented Apr 16, 2024

@adriangalilea Did you find it out any workaround?

Just staying on next 14.1.4 until this is solved.

@akif-work
Copy link

I'm facing a similar issue. Works by downgrading to next 14.1.4. I'm using next-auth@^4.24.7 .

@namadaza
Copy link

You folks are amazing ❤️

Was having the same issues of 404s on next 14.2.2, downgrading to 14.1.4 fixed it. If only folks outside of tech understood the value of open-source, the world would be a much better place.

@fernandomarca
Copy link

Same problem in Kubernetes
"next": "14.1.4" "next-auth": "^4.24.7"

 Next.js 14.1.4
- Local:        http://localhost:3000
- Network:      http://0.0.0.0:3000

[next-auth][error][SIGNIN_OAUTH_ERROR]
https://next-auth.js.org/errors#signin_oauth_error only valid absolute URLs can be requested {
error: {
message: 'only valid absolute URLs can be requested',
stack: 'TypeError: only valid absolute URLs can be requested\n' +
'    at e.exports (/app/.next/server/chunks/638.js:39:36528)\n' +
'    at _.discover (/app/.next/server/chunks/638.js:39:42111)\n' +
'    at o (/app/.next/server/chunks/638.js:6:129314)\n' +
'    at s (/app/.next/server/chunks/638.js:6:121669)\n' +
'    at Object.s (/app/.next/server/chunks/638.js:30:8642)\n' +
'    at _ (/app/.next/server/chunks/638.js:6:107014)\n' +
'    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
'    at async a (/app/.next/server/chunks/638.js:30:18310)\n' +
'    at async e.length.t (/app/.next/server/chunks/638.js:30:19720)\n' +
'    at async /app/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:42484',
name: 'TypeError'
},
providerId: 'keycloak',
message: 'only valid absolute URLs can be requested'
}

@ndom91
Copy link
Member

ndom91 commented Apr 28, 2024

Yeah there seems to be an issue with next@14.2.0-canary.47+, we're aware and are looking into it 👍

@ndom91
Copy link
Member

ndom91 commented Apr 28, 2024

Hmm although, I just upgraded a project of mine that was having the issue as well to next@14.2.3 and it seems to work now.

Can anyoen else confirm that it may be fixed with next@14.2.3+? 🙏

@adriangalilea
Copy link
Author

adriangalilea commented Apr 28, 2024

Hmm although, I just upgraded a project of mine that was having the issue as well to next@14.2.3 and it seems to work now.

Can anyoen else confirm that it may be fixed with next@14.2.3+? 🙏

Works on localhost but not on prod for me, not sure why.

package.json

    "next": "^14.2.3",
    "next-auth": "^5.0.0-beta.17",
image image

And I can't see any error on logs.

repo

error is live on e-id.to, I may revert to 14.1.4 tomorrow, but in the meantime you can see the error is there still.

@fernandomarca
Copy link

fernandomarca commented Apr 29, 2024

Hmm embora, eu apenas atualizei um projeto meu que estava tendo o problema também e parece funcionar agora.next@14.2.3

Qualquer outra pessoa pode confirmar que pode ser corrigido com ? 🙏next@14.2.3+

@ndom91 That worked. But I had to reset the Nginx buffers as well.

@devinshoemaker
Copy link

devinshoemaker commented Apr 29, 2024

I have a similar problem. When I log in, no redirect is performed. The url remains on /sign-in. If I then do a reload, I am redirected correctly. If I then log out, it does not redirect to the /sign-in page, but remains on the last page. With a downgrade to 14.1.4 this problem does not exist.

P.S. I use next-auth@5.0.0-beta.16

I am having the same issue with the URL not changing after a redirect. 14.2.* seems to do this (including 14.2.3 the current latest), but downgrading to 14.1.4 fixes the issue.

If you checkout this branch and then downgrade the Next dep it fixes the e2e test.

devinshoemaker/next-auth-example#20

@alexrandaccio
Copy link

I am having the same issue

@akoskm
Copy link

akoskm commented May 24, 2024

Hmm although, I just upgraded a project of mine that was having the issue as well to next@14.2.3 and it seems to work now.

Can anyoen else confirm that it may be fixed with next@14.2.3+? 🙏

I just tried this with 14.2.3, and it's still happening. Here's some additional info that I found that could be helpful.

Context: I'm using a magic link sign-in with MongoDB and Prisma. My app is deployed on Vercel.

When I hit the Log in button, I get redirected to https://<my app>.vercel.app/api/auth/verify-request?provider=sendgrid&type=email - as expected ✅

My only routes in app/api are:

  • webhooks - I need this for Stripe
  • [...nextauth] - according to your documentation

I was looking at the request logs in Vercel and found this odd:

The first entry for the request says Edge Middleware:
image

The second entry says Serverless (also note the not_found below):

image

Now here's the interesting part. When I hit reload on the page, it loads, and I get the message I expect about the email being sent with the verification link here's the log message for when that happens:

Xnapper-2024-05-24-16 39 40

Interestingly here, the function shows the correct function [...nextauth].

I'm happy to provide more screenshots if I can help you get this figured out.

@ndom91
Copy link
Member

ndom91 commented May 28, 2024

For those of you still seeing this issue with 14.2.3, could you give the 14.3.0-canary* a shot? Or potentially even 15.0.0-rc and let us know if you still see the issue. Thanks!

@patelvivekdev
Copy link

patelvivekdev commented May 28, 2024

@ndom91

I have attempted to deploy the latest canary version as follows:

    "next": "14.3.0-canary.86",
    "next-auth": "beta",
    "react": "19.0.0-rc-f994737d14-20240522",
    "react-dom": "19.0.0-rc-f994737d14-20240522",

Version 1

Same example from next-auth-example

Link: https://next-auth-example-xi-pied.vercel.app/

In this version, I am encountering a 404 error when I click the sign-in button.

Code Repo : https://github.com/patelvivekdev/next-auth-example


Version 2

I have also deployed another project with a custom sign-in page.

Link: https://next-auth-example-custom-signin.vercel.app/

In this example, I am not encountering any 404 errors.

Code Repo : https://github.com/patelvivekdev/next-auth-example/tree/next-canary


I have also tried Next 15 RC, but I am encountering errors when using next-auth.

@andrey-sh
Copy link

Deployed two versions, both with same result as 14.2.1.
At first visit on autogenerated sign in page i have 404 error. In case i update this page, it's exist. This error only applies to the default sign-in page.

"next": "15.0.0-rc.0",
"next-auth": "5.0.0-beta.18",
"react": "19.0.0-rc-f994737d14-20240522",

and

"next": "14.3.0-canary.87",
"next-auth": "5.0.0-beta.18",
"react": "18.2.0",

@c0nf1den71al
Copy link

Good Morning,

Do we have any update on this issue? I am currently using Next v14.2.4 and still getting this error. I am using the resend provider for magic links, whilst they work in development, production environments produce a 404 Error when redirecting to /api/auth/verify-request?provider=resend&type=email.

Due to other packages, I cannot downgrade to v14.1.4 so I'd appreciate an update ASAP.

Thanks,
J

@wladpaiva
Copy link

I’m also having the 404 on the /api/auth/verify-request route just after signing in. The weird stuff is that when I check the logs, there’s no 404 response there and if I just hit refresh on the browser the route works fine which makes me think that there’s a hanging promise left somewhere

@AnaisSay
Copy link

AnaisSay commented Jun 21, 2024

I'm experiencing quite the same issue as @wladpaiva today, on Next.js 12.2.4, on the sign-in page for GitHub. I'm getting a 404 page but no 404 response; instead, I'm getting a 303 error. However, when I refresh the page, everything is okay and I can log in.

@ndom91
Copy link
Member

ndom91 commented Jun 21, 2024

Quick update to the folks recently posting here as well - there seems to be a bug in Next.js 12.2.0+ where these routes aren't navigated to correctly on the first attempt. But as many of you have noticed, upon reloading it does seem to work.

Unfortunately we don't have any more info than this and haven't had time to dig in further yet. If anyone else has the time and interest to dig into this a bit more we'd really appreciate it!

@AnaisSay
Copy link

Quick update to the folks recently posting here as well - there seems to be a bug in Next.js 12.2.0+ where these routes aren't navigated to correctly on the first attempt. But as many of you have noticed, upon reloading it does seem to work.

Unfortunately we don't have any more info than this and haven't had time to dig in further yet. If anyone else has the time and interest to dig into this a bit more we'd really appreciate it!

I've managed to work around the issue by using a custom sign-in page as described in the Auth.js guide while staying on "next": "14.2.4". I understand this doesn't solve the underlying problem, but it might help others experiencing the same issue.

@loan-laux
Copy link

I'm also experiencing a 404 on the /api/auth/verify-request route when signing in with the Sendgrid provider.

Extra context:

  • I use a custom sign-in page
  • It only happens on Vercel, works fine locally
  • No request shows up in the Vercel logs
  • Refreshing does NOT load the page
  • Downgrading to Next 14.1.0 or even 14.0.0 doesn't fix it

Very frustrating. Unfortunately I have to put the login feature I'm working on aside and work on something else until this is fixed.

@ejdweck
Copy link

ejdweck commented Jun 26, 2024

I found a workaround until the 🐛 is fixed. I had the same 404 error describes in the thread where the redirect works locally, but deployed (on vercel) there is nothing really in the logs and on page refresh the redirect is successful.

I'm using email magic link w/ resend, so what I want to have happen is after the user submits their email, i want a redirect to '/auth/verify-request' which is a custom page that matches the styling of the rest of my application.

What I did was catch the '/api/auth/verify-request' route in the middleware.ts and redirect to '/auth/verify-request'.

This isn't a super optimal fix, but I'm shipping this today so wish me luck, haha

Hope this works till the bug fix comes out. I'm trying really hard to avoid downgrading packages because I have some difficult to track dependencies elsewhere in the project.

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === "/api/auth/verify-request") {
    return NextResponse.redirect(new URL("/auth/verify-request", request.url));
  }
}

export const config = {
  matcher: "/api/auth/verify-request",
};

    "next": "14.2.4",
    "next-auth": "5.0.0-beta.19",

I have a custom signIn in page, and a custom verifyRequest page. My auth.ts looks like this

export const { handlers, signIn, signOut, auth } = NextAuth({
  adapter: DrizzleAdapter(db, {
    accountsTable: accounts,
    usersTable: users,
    sessionsTable: sessions,
    verificationTokensTable: verificationTokens,
  }),
  session: { strategy: "jwt" },
  ...authConfig,
});

and then the authConfig is in another file split because of this edge compatibility issue

import type { NextAuthConfig } from "next-auth";
import type { Provider } from "next-auth/providers";
import Resend from "next-auth/providers/resend";

const providers: Provider[] = [
  Resend({
    from: "onboarding@resend.dev",
  }),
];

export const providerMap = providers.map((provider) => {
  if (typeof provider === "function") {
    const providerData = provider();
    return { id: providerData.id, name: providerData.name };
  } else {
    return { id: provider.id, name: provider.name };
  }
});

// Notice this is only an object, not a full Auth.js instance
// Need to split this config due to edge compatability or something dumb
export default {
  providers,
  secret: process.env.AUTH_SECRET,
  pages: {
    signIn: "/auth/login",
  },
} satisfies NextAuthConfig;

@RushilJalal
Copy link
Contributor

Same here. Spent an entire day trying to fix the issue before I came across this issue

@ejdweck
Copy link

ejdweck commented Jun 28, 2024

I'm kinda hoping eventually I can upgrade nextjs, and next-auth to fix this issue as well as a middleware issue I'm having with cloudflare sockets due to the edge runtime stuff.

My project isn't super big in terms of authenticated resources so for now I'm securing everything either via layout or on per page/api route basis.

Eventually, I'd like to move to a middleware interception approach for auth but for now it does work...

@olivierlesnicki
Copy link

Same issue here on next 14.2.3

@ThangHuuVu
Copy link
Member

Hi everyone, I tried a few combinations of versions but haven't been able to reproduce it yet:

  1. with latest next@canary: https://na-10585.vercel.app/ (source)
  2. with a previous next@canary from @patelvivekdev (patelvivekdev/next-auth-example) I redeployed his repro at https://na-10585-2.vercel.app/
  3. with 14.2.5 (latest) https://na-10585-3.vercel.app/ (source).

Could someone comment here a minimal reproduction that I can reproduce both locally and on Vercel?

@patelvivekdev
Copy link

Hi everyone, I tried a few combinations of versions but haven't been able to reproduce it yet:

  1. with latest next@canary: https://na-10585.vercel.app/ (source)
  2. with a previous next@canary from @patelvivekdev (patelvivekdev/next-auth-example) I redeployed his repro at https://na-10585-2.vercel.app/
  3. with 14.2.5 (latest) https://na-10585-3.vercel.app/ (source).

Could someone comment here a minimal reproduction that I can reproduce both locally and on Vercel?

I'll test it today and let you know.

@loan-laux
Copy link

I tried updating my project to Next 14.2.5 and I'm still experiencing 404s on those Next-Auth routes.

@patelvivekdev
Copy link

Hi everyone, I tried a few combinations of versions but haven't been able to reproduce it yet:

  1. with latest next@canary: https://na-10585.vercel.app/ (source)
  2. with a previous next@canary from @patelvivekdev (patelvivekdev/next-auth-example) I redeployed his repro at https://na-10585-2.vercel.app/
  3. with 14.2.5 (latest) https://na-10585-3.vercel.app/ (source).

Could someone comment here a minimal reproduction that I can reproduce both locally and on Vercel?

It is working with

    "next": "15.0.0-canary.87",
    "next-auth":"5.0.0-beta.20",

Live link: https://next-auth-example-xi-pied.vercel.app

Code: https://github.com/patelvivekdev/next-auth-example/tree/main

@rodygosset
Copy link

rodygosset commented Aug 5, 2024

Same issue with next 14.2.5 and next-auth 5.0.0-beta.18 Is there any progress on this ? Or has anyone figured out a work around that doesn't require downgrading to next 14.1.4 ?

@Moeefa
Copy link

Moeefa commented Aug 8, 2024

Same issue with next 14.2.5 and next-auth 5.0.0-beta.18 Is there any progress on this ? Or has anyone figured out a work around that doesn't require downgrading to next 14.1.4 ?

@ejdweck solution works great for me. 😊

@loan-laux
Copy link

@patelvivekdev very strange, when I clone and run your repo, it works just fine. Even though you're using the GitHub provider and I'm using the Sendgrid provider with the Prisma database adapter — when I make the changes to your next-auth config to match mine, it works!

This means the issue lies somewhere else in my codebase. I'm thinking it's probably something with one of the dependencies I'm using which could conflict with next-auth. At this stage I'm still unsure, but I'll implement my own magic link auth so I can have more control over it.

@rodygosset
Copy link

Same issue with next 14.2.5 and next-auth 5.0.0-beta.18 Is there any progress on this ? Or has anyone figured out a work around that doesn't require downgrading to next 14.1.4 ?

@ejdweck solution works great for me. 😊

Unfortunately, his solution doesn't fit my use case, because my issue isn't about how to secure routes / pages -- my issue is that I'm getting a 404 response when navigating to /api/auth/signin (for example when clicking the login button). So securing pages & routes individually doesn't solve that problem.

If someone figures out a workaround or if progress in made either on the next-auth or next.js side, it would be great !

@andresceballosm
Copy link

andresceballosm commented Aug 15, 2024

Hey @rodygosset I'm using "next": "^14.2.4", "next-auth": "^4.24.7", I encountered a similar issue, and it turned out to be due to the misplacement of the [...nextauth].ts file. With the latest version of Next.js, this file should be located in app/api/auth/[...auth]/route.ts. The content that was previously in [...nextauth].ts should now be moved into route.ts.

@Moeefa
Copy link

Moeefa commented Aug 15, 2024

Unfortunately, his solution doesn't fit my use case, because my issue isn't about how to secure routes / pages -- my issue is that I'm getting a 404 response when navigating to /api/auth/signin (for example when clicking the login button). So securing pages & routes individually doesn't solve that problem.

If someone figures out a workaround or if progress in made either on the next-auth or next.js side, it would be great !

I don't know if you meant a custom signin page, but you could use the same logic to implement a custom signin page, which is my case, just redirect from /api/auth/signin to the actual custom signin page.
Heres's how I implemeted:

import { NextResponse } from "next/server";
import { auth as middleware } from "./auth";

export default middleware((request) => {
  if (request.nextUrl.pathname === "/api/auth/signin") {
    return NextResponse.redirect(new URL("/auth", request.url));
  }
});

If that's not the case, then I have no further information, sorry.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triage Unseen or unconfirmed by a maintainer yet. Provide extra information in the meantime.
Projects
None yet
Development

No branches or pull requests