Credentials provider redirecting to api/auth/signin?csrf=true in Production

[raggaman]

Question 💬

I am having issues with getting the Next Auth Exampleto work using a Credentials Provider. I have Strapi as my backend, where the auth is making an API call to Strapi to authenticate to user based on the credentials provided and return the JWT.

This works in locally but when I deploy to Vercel, I am re-routed to the api/auth/signin?csrf=true page.

I've been trying to figure this out for days with no luck. Any help would be appreciated.

I have the example app deployed to vercel here - https://next-auth-example-puce.vercel.app/

Steps

1. Using the Next Auth Example starter and amending the [...nextauth].js as below.
2. Using Strapi as my backend auth
3. Deploy to Vercel

Results

1. Local environment - working as expected, can successfully log in
2. Production - login fails on laptop - redirecting me to api/auth/signin?csrf=true
3. Production - login successful when using my phone?

How to reproduce ☕️

Steps

1. Using the Next Auth Example starter and amending the [...nextauth].js as below.
2. Using Strapi as my backend auth
3. Deploy to Vercel

---

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import axios from "axios";

export default NextAuth({
  providers: [
    Providers.Credentials({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        const headers = {
          "Content-Type": "application/json; charset=utf-8",
          "Access-Control-Allow-Origin": "*",
        };
        try {
          const {data} = await axios.post(
            "https://strapi-crm.herokuapp.com/auth/local",
            {
              identifier: credentials.username,
              password: credentials.password,
            },
            {
              headers: headers,
            }
          );
          if (data) {
            return data;
          } else {
            throw new Error(errorMessage + "&email=" + credentials.username);
          }
        } catch (e) {
          throw new Error(errorMessage + "&email=" + credentials.username);
        }
      },
    }),
  ],
  secret: process.env.SECRET,
  session: {
    jwt: true,
  },
  jwt: {
    // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
  },
  pages: {
    // signIn: "/auth/signin", // Displays signin buttons
    // signOut: '/auth/signout', // Displays form with sign out button
    // error: '/auth/error', // Error code passed in query string as ?error=
    // verifyRequest: '/auth/verify-request', // Used for check email page
    // newUser: null // If set, new users will be directed here on first sign in
  },
  callbacks: {
    jwt: async (token, user, account) => {
      const isSignIn = user ? true : false;
      if (isSignIn) {
        token.jwt = user.jwt;
        token.id = user.user.id;
        token.username = user.user.username;
      }
      return Promise.resolve(token);
    },

    session: async (session, user) => {
      session.jwt = user.jwt;
      session.id = user.id;
      session.username = user.username;
      return Promise.resolve(session);
    },
  },
  events: {},
  theme: "light",
  debug: false,
});

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[ephraimduncan]

I am having the same problem. Works fine on development. Keep redirecting me back to /signin?csrf=true for both Github and Email. Deployed it on Vercel.

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import * as Fauna from "faunadb";
import { FaunaAdapter } from "@next-auth/fauna-adapter";

const client = new Fauna.Client({
  secret: process.env.FAUNA_SECRET,
});

export default NextAuth({
  providers: [
    Providers.Email({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM,
    }),

    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  adapter: FaunaAdapter({ faunaClient: client })
});

[balazsorban44]

Do you have cookies disabled by chance? Can you also show the client code you use to sign the user in?

[raggaman]

The above is the only code I've changed from the Next Auth Example https://github.com/nextauthjs/next-auth-example

It looks to use the below url for sign in
https://next-auth-example-puce.vercel.app/api/auth/signin?callbackUrl=https%3A%2F%2Fnext-auth-example-puce.vercel.app%2F

This is part of the above code in pages\api\auth[...nextauth].js I believe.

Cookies disabled in my browser? No, I dont have them disabled. If you're referring to any other disable cookies setting then please let me know how I check that.

[ephraimduncan]

For the client sign in, I use this.

import { signIn, signOut, useSession } from "next-auth/client";
import Layout from "../components/Layout";
import styles from "../styles/Home.module.css";

export default function Home() {
  const [session, loading] = useSession();

  return (
    <Layout>
      <p className={styles.description}>
        {!session && (
          <>
            <p>Get started by sigining in. </p>
            <button className={styles.code} onClick={() => signIn()}>
              Sign in
            </button>
          </>
        )}
        {session && (
          <>
            <p>
              Signed in as
              <span className={styles.p}>{session.user.email}</span>
            </p>
            <button className={styles.code} onClick={() => signOut()}>
              Sign out
            </button>
          </>
        )}
      </p>
    </Layout>
  );
}

[balazsorban44]

There must be a configuration error somewhere, especially when you claim it's almost identical to the example repo. You can see a live demo here: https://next-auth-example.vercel.app/

Will make sure to add a dummy credentials provider as well, but I am pretty sure it's not the root cause of the problem.

Do you set NEXTAUTH_URL?

[prasanthbattula]

I got the same issue.
I resolved the issue by adding NEXTAUTH_URL in the env variables. The url should not be your local url it should be your production url.

[ephraimduncan]

Is NEXTAUTH_URL the production url?

[prasanthbattula]

Yes

[raggaman]

@prasanthbattula It was the antivirus on my laptop that was preventing me from logging in. I had Bitdefender installed. After adding my production domain as an exception I was able to log in. Please try that if the NEXTAUTH_URL env variable wasnt the issue.

[Senapati626]

The live url using vercel works just fine. The problem occurs when I am in my developer environment with localhost:3000. I have been smashing my head to the wall with this for a whole day now.

[raggaman]

Antivirus on my laptop was blocking the request. It worked after adding the URL as an exception in Bitdefender.

[ephraimduncan]

I never fixed mine by the way. I'm using Linux so I don't have an antivirus on my laptop.

[dmarcucci]

I'm having the same problem, specifically with the Fauna adapter.

Without using the Fauna adapter, I'm having no problems with the credentials provider. As soon as I add the Fauna adapter, however, this issue occurs.

Not exactly sure what the problem is yet, but I switched to using Auth0 as a provider for now and that worked perfectly once I got all the Auth0 configuration down. So I'm inclined to believe it's something with the way I had the credential provider configured (perhaps with the data I'm returning in the authorize function).

[dmarcucci]

I guess my problem is slightly different. It looks like I can't use both a credentials provider and the Fauna adapter.

[andrewmurphyio]

I am also getting this issue - no antivirus

[suryacmv]

I got this issue in local, when I added only 'localhost:3000'. but fixed after adding 'http://localhost:3000'

[muhamad-rizki]

in my case, I accidentally called getCsrfToken method on getServerSideProps so it might be make next-auth failed to validate the CSRF token. So I comment it, and now everything works as expected 🎉

[ryanflynndev]

This is an issue for me too. Works fine locally, but when I deploy it as an Outlook add-in it redirects me to the same url as above. I guess I have to use a different provider now

[mostafabazyar]

I have the same problem with my Email yahoo and my domain its works but Hotmail and Gmail doesn't and IDK why

[ErikBahena]

My issue was resolved by using node v16 instead of 18

[sarrooo]

Same for me !

[chaitya-titan]

It works on Node v20 as well.

[khuezy]

Experiencing same issue with the Google provider. My NEXTAUTH_URL is set to a production url.

When triggering signIn('google'), it fires these network calls:
example.com/api/auth/providers
example.com/api/auth/csrf
example.com/api/auth/signin/google?
http://localhost:3000/api/auth/signin?csrf=true

I think the fix to the host got reverted in the latest release, see my comment at the bottom of: #6007

[khuezy]

Yea it works for me in production. Maybe you're experiencing a slightly different issue?

[vencho-mdp]

Are you using google provider?

[khuezy]

Yes, app hosted on AWS lambda, if that matters.

[vencho-mdp]

Can you show your config pls?

[khuezy]

It's pretty basic

{
   providers: [
     GoogleProvider({
        clientId: '<id>',
        clientSecret: '<secret>'
     }),
     secret: '<secret>'
   ]
}

[srkkhan]

i i upgraded to "next-auth": "^4.18.8", with node version 16 and 18 both, with credentialsProvider, but still not able to resolve, signIn is not moving to callbackUrl after success

[JuanSolano]

I got nextAuth working on AWS Amplify, but the same solution in an ECS container resolve to [ api/auth/signin?csrf=true ]

.env

NEXTAUTH_URL =  variable is pointing to prod
NEXTAUTH_SECRET = is set

[...nextauth]

{
   providers: [
     GoogleProvider({
        clientId: '<id>',
        clientSecret: '<secret>'
     }),
     secret: '<secret>'
   ]
}

Could be related to AWS ECS cookie policies?

[JuanSolano]

Could be here a solution?
https://dev.to/julbrs/next-auth-vs-sst-auth-2lne [ [serverless-next.js ]

[khuezy]

Ok I finally resolved my issue (CloudFront Lambda + Edge redirecting to localhost). In the older version (don't ask me which), I have process.env.AUTH_TRUST_HOST=true, in the later version of 4.18.7+, the host detection would check that env var and return the forwarded host:

export function detectHost(forwardedHost: any) {
  // If we detect a Vercel environment, we can trust the host
  if (process.env.VERCEL ?? process.env.AUTH_TRUST_HOST)
    return forwardedHost
  // If `NEXTAUTH_URL` is `undefined` we fall back to "http://localhost:3000"
  return process.env.NEXTAUTH_URL
}

Once I removed AUTH_TRUST_HOST, next-auth works properly.
Good luck everyone, your mileage may vary.

[khteh]

I hit the same issue. My production application is inside Ariba punchout catalogue iFrame. I set the NEXTAUTH_URL=https://[production]. Please advise what could I do. Thanks.

[enisze]

I also have this issue using the app dir of next. I followed this post:
https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/

But it is always redirecting me

[fromwhite]

hey guys
I hit the same issue,long time of headache.
In my case,updating node v20.7.0 and next-auth v4.13.0,and now everything works as expected.
At the same time, it may bring another issue, using unstable_ Replace getServerSession,#5187

There is another case where it is the latest version v4.22.1,but in 996, I didn't have time to test it, my case didn't have any requirements for the version.
If you don't want to reverse the version, perhaps you can take a look at its handling v4.22.1

[TimothyBrehm]

I am seeing this same problem using the auth0 provider in a Lambda (with a standalone build). It works perfectly fine on my local build, but as soon as I deploy it, it starts redirecting back to /api/auth/signin?csrf=true.

I just installed nextauth, so I'm not doing anything interesting with it, just a simple provider, SessionProvider and an icon control that prints the name if they are logged in.

Works great locally, not so much on AWS. Not sure where to even start looking.

[matt-poekd]

Having the exact same issue, any help would be much appreciated

[morgan-bp]

also having this issue. deploying on AWS ECS.

[TimothyBrehm]

I believe that for me, it was updating the caching and headers policies for my Cloudfront, i.e.

yaml:

DistributionConfig:
DefaultCacheBehavior:
ResponseHeadersPolicyId: eaab4381-ed33-4a86-88ca-d9558dc6cd63
OriginRequestPolicyId: b689b0a8-53d0-40ab-baf2-68738e2966ac
CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad

or through the UI, under distribution -> Behavior

Cache Poilcy : Caching Disabled
Origin Request Policy : AllViewerExceptHostHeader
Response headers policy : CORS-with-preflight-and-SecurityHeadersPolicy

[morgan-bp]

I do have Cloudfront in front my ECS instances and it was the same issue, caching and headers policies.

[gregbacchus]

I had this same problem and isolated it (in my case) to when I was running the project with bunjs.

Initially, I only observed the problem when I was running the "standalone" build, as when you run bun run dev, bun is just the runner - it still uses node as the runtime. But if you run bun -b run dev it will use bun as the runtime and this issue occurs.

So, in my case there seems to be some incompatibility between bunjs and next-auth.

[matheuslemke]

That's it @gregbacchus! Thank's for sharing

[markodvornik]

This could be related oven-sh/bun#7014

[neoighodaro]

This was it! Thanks

[JuanSW18]

I had the same problem and I fixed it by creating a custom login page following this example:
https://next-auth.js.org/configuration/pages

I hope this helps.

[AmadeusK525]

Hey all, I managed to solve this issue on my end by making sure that the client was sending BOTH the __Host-next-auth.csrf-token in the cookies (credentials: 'include' in case you're using JS' fetch, both in the /api/auth/csrf request and the /api/auth/callback or /api/auth/signin) AND the csrftToken body property. If the request misses the cookies or misses the body property, the NextJS server would take me to the signIn?csrf=true page. When I sent both, it would understand that I already had the token

[uhrohraggy]

Can you provide code? There are so many variations on how to implement this, that something like this isn't working when deployed to prod:

// app/sign-in/page.tsx";
import React from "react";
import { cookies } from "next/headers";

export default async function SignInPage() {
  //   const csrfToken = await getCsrfToken();
  const cookieCsrfToken = cookies().get("authjs.csrf-token")?.value ?? "";

  return <SignIn csrfToken={cookieCsrfToken} />;
}

interface SignInProps {
  csrfToken: string | null;
}

function SignIn({ csrfToken }: SignInProps) {
  return (
    <form method="post" action="/api/auth/signin/email">
      <input name="csrfToken" type="hidden" defaultValue={csrfToken || ''} />
      <label>
        Email address
        <input type="email" id="email" name="email" />
      </label>
      <button type="submit">Sign in with Email</button>
    </form>
  );
}

and using the signIn(...) function from next-auth/react has the same issue. I'm deploying to Google (Firebase App Hosting), and everything works (dynamic pages, static pages), just this next-auth library doesn't

[hamburger231]

@uhrohraggy did you manage to fix it? I'm also using the email provider and everything worked up until i've tried making a custom sign in page.