Signin only works locally, not production [Vercel]

[Ojself]

I'm using next-auth-sanity 1.4.8 and everything works great locally, but when deployed to Vercel, the signin doesn't work. My logic suggests that when a user signs up, he/she should be logged in after the user is created (the code is posted below).

The user get's created and can be found in the sanity data lake, but when it's time to sign in, the user get's redirected to https://www.domain-name.com/api/auth/error

I've been suggested to set both NEXTAUTH_URL and NEXTAUTH_SECRET in Vercel, but they already exist and didn't do any difference to the outcome.

From the network tab:

package.json:

"dependencies": {
    "@babel/core": "^7.17.0",
    "@headlessui/react": "^1.7.4",
    "@sanity/block-content-to-react": "^3.0.0",
    "@sanity/client": "^2.23.2",
    "axios": "^1.2.0",
    "classnames": "^2.3.2",
    "current-week-number": "^1.0.7",
    "dotenv": "^16.0.1",
    "formidable": "^2.1.1",
    "groq": "^2.15.0",
    "next": "^13.2.4",
    **"next-auth": "^4.17.0",**
    **"next-auth-sanity": "^1.4.8",**
    "next-pwa": "^5.5.2",
    "next-sanity": "^0.5.2",
    "next-sanity-image": "^4.1.0",
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-content-loader": "^6.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.0",
    "react-icons": "^4.4.0",
    "react-modal": "^3.16.1",
    "react-modal-image": "^2.6.0",
    "react-player": "^2.11.0",
    "react-portable-text": "^0.4.3",
    "react-social-icons": "^5.15.0",
    "react-tooltip": "^5.10.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.18.6",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.34.0",
    "eslint-config-next": "^13.2.4",
    "husky": "^8.0.3",
    "next-sitemap": "^2.5.28",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.24"
  },

signup/signin module

import { signIn } from "next-auth/react";
import { signUp } from "next-auth-sanity/client";
// [...]
const Signup = () => {
  const [modalIsOpen, setIsOpen] = useState(false);
  const [sanityError, setSanityError] = useState("");

  const router = useRouter();

  const {
    handleSubmit,
    formState: { errors },
    register,
    setValue,
    getValues,
    watch,
  } = useForm();

  useEffect(() => {
    watch();
  }, [watch]);

  const errorHandler = (error) => {
    console.error(error);
    setSanityError(error);
    setTimeout(() => {
      setSanityError("");
    }, 10_000);
  };

sanityClient.js

import { createClient } from "next-sanity";

const config = {
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  token: process.env.SANITY_API_TOKEN,
  apiVersion: "2023-02-01",
  useCdn: true,
  withCredentials: true,
};

export const client = createClient(config);

[...nextauth].js

import NextAuth from "next-auth";
import { SanityAdapter, SanityCredentials } from "next-auth-sanity";
import { client } from "../../../lib/sanityClient";

const options = {
  providers: [SanityCredentials(client)],
  session: {
    strategy: "jwt",
  },

  secret: process.env.JWT_SECRET_WORD,
  adapter: SanityAdapter(client),
  callbacks: {
    async jwt({ token }) {
      return token;
    },
    async session({ session, token }) {
      session.accessToken = token.accessToken;
      session.user.id = token.sub;
      return session;
    },
  },
};

export default NextAuth(options);

[fedeya]

Hi! @Ojself thanks, i'll take a look

[Ojself]

Update: I tried to deploy the whole project to Netlify with success. The signup and signin works as expected over there. So this issue is Vercel specific.

[fedeya]

@Ojself maybe it can be the next-auth version? i deployed the full example to vercel and the credentials works fine

here you can take a look:

App Dir: https://next-auth-sanity-example.vercel.app/app/credentials Pages: https://next-auth-sanity-example.vercel.app/credentials

the example is using the latest next-auth version (4.20.1)

[Ojself]

I tried upgrading the next-auth version and copy-paste the code from the snippets you posted above. The same issue occur, it works locally, but not in production.

I suspect it must be something with my code. As a last effort, I posted my env variables. Is the examples you posted above using the same variables, or am I missing something?

[fedeya]

@Ojself do you have the "Automatically expose System Environment Variables" option enabled?

also after change the variables you do a redeploy? every platform change needs a new deploy to take effect and the most variables are set for production only, are you sure you don't see a preview?

if everything works fine on netlify and local, it looks more like a vercel config thing

[Ojself]

Sorry I didn't respond to this sooner. Yes I am exposing System Environment Variables automatically. I tried to redeploy after changing them as well. The preview and deployed version is the same.

I ended up moving the whole project from Vercel to Netlify with success. I'm sure there's just a small config at Vercel in order to fix it, but I couldn't figure it out.