-
-
Notifications
You must be signed in to change notification settings - Fork 33
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
missing csrf #5
Comments
@M-Pedrami thanks for checking it out! I noticed this too and am working on it myself as we speak 🙏 I'll update you here once I find a solution |
Let me know if your solution also works for the |
@M-Pedrami this issue seems to be solved for this project in prod. However, I think there might be an issue with Next.js still. I'm using What seems to be happening is the following, when I first click the "Sign in" button, it takes me to Then, when entering the correct PW and clicking "signin with credentials" there, it responds with the "MissingCSRF" redirect error. However, if I manually reload the page while its showing I went back through more next.js releases, and the first one to exhibit this weird path behaviour was |
Hi ndom91, I saw the same behavior that you describe with your project and with my own project. Just a minor thing that I saw is that initially when pressing the Sign In button, the route that is executed is "/api/auth/signin" instead of "/auth/signin", nothing that adds to the discussion xD. I wonder if somehow this unexpected route and render management just makes a desynchronization of what CSFR token the server expects and what the OAuth provider is giving back. I will try rolling back to the versions suggested to avoid this issue, thanks for the info!. |
It works!, rolling back to 14.1.3 makes it work. |
This is still not working for me in NextJS Instead of using default // server action to get from `next/headers` the origin
import { SIGNIN_URL } from '$/auth'
import { headers } from 'next/headers'
import { redirect } from 'next/navigation'
export async function signinLink({ redirectTo }: { redirectTo?: string }) {
const origin = headers().get('origin')
const callbackUrl = redirectTo ? redirectTo : origin ?? '/'
redirect(`${SIGNIN_URL}?callbackUrl=${callbackUrl}`)
} And then I have a custom component that use that header import { signinLink } from '$/auth'
function SigninLink({ redirectTo }: { redirectTo?: string }) {
return (
<form
action={async (formData) => {
'use server'
const redirectTo = formData.get('redirectTo')?.toString()
await signinLink({ redirectTo })
}}
>
<input type='hidden' name='redirectTo' value={redirectTo} />
<button type='submit'>Sign In</button>
</form>
)
} Lastly I use that component. Note that use can pass a custom // My home apps/page.tsx
export default function Home() {
return <SigninLink redirectTo='/some/page' />
} |
@andresgutgon Hola Andres!! Did you get this working? I am still stuck on this :( |
Hola : ) Maybe try newer version of nextjs 15.0.0-canary.25. It's working for me now the same code |
Yeah afaik this is a Next issue with 14.2.1+. Haven't had time to dig in further unfortunately. There's a thread on the main next-auth repo as well here: nextauthjs/next-auth#10585 |
The issue here is in env.ts it's setting the default config.basePath to "/api/auth" and so rather than attempting to load /auth/signin it's attempting to load /api/auth/signin, a refresh will cause it to load the proper path. It's attempting to set the url to either of these: process.env.AUTH_URL ?? process.env.NEXTAUTH_URL If not found it reverts to /api/auth This is the code that creates the url, you can see it uses config.basePath, which defaults to /api/auth
So for now to bypass I just direct users to "/auth/signin" directly as mentioned above. Setting one of the env vars above will break google. Still new to next-auth so maybe there's additional configurations needed to get it to work, but easiest solution is just to direct the user to "/auth/signin" yourself. |
Guys I received the same error how can I fix this? |
Try this @RushilJalal https://stackoverflow.com/a/78577718 Assuming this is a server component you do this: import { cookies } from "next/headers";
export default async function UserButton() {
const session = await auth();
if (!session?.user) {
const csrfToken = cookies().get("authjs.csrf-token")?.value ?? ""
return <SignIn csrfToken={csrfToken} />;
}
//...
} Then you change this component: // ./components/auth-components.tsx
export function SignIn({
provider,
csrfToken
}: { provider?: string; csrfToken: string } & React.ComponentPropsWithRef<typeof Button>) {
return (
<form
action={async () => {
"use server";
await signIn(provider);
}}
>
<!-- HIDDEN input with the csrfToken -->
<input type="hidden" name="csrfToken" value={csrfToken} />
<Button {...props}>Sign In</Button>
</form>
);
} |
Hello,
First off thank you for the example.
I cloned your repo and installed all the dependencies. The login page itself is loading however when I click on sign in with GitHub or with credentials nothing happens. The terminal logs out this error:
missing csrf: csrf token was missing during an action sign in.
I appreciate any help.
The text was updated successfully, but these errors were encountered: