Does next-auth-sanity work with NextAuth v4?

[AeroFiTech]

Hi guys,

First of all, wishing you a Happy new year!

I am trying to use the next-auth adapter provided by Sanity @ https://www.sanity.io/plugins/next-auth-sanity in my NextJS project but seems like I am having issues when I added in the EmailProvider paired with the Sanity.io adapter.

This is my [...nextauth.js] located in pages/api/auth dir and yes I added NEXTAUTH_URL=http://localhost:3000 and the EMAIL_SERVER_PARAMS_ in the .env.local file:

import NextAuth from "next-auth"
import EmailProvider from "next-auth/providers/email"
import { SanityAdapter } from 'next-auth-sanity';
import client from "../../../client";

export default NextAuth({
providers: [
EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD
        }
      },
      from: process.env.EMAIL_FROM
    }),
  ],
  adapter:SanityAdapter(client),
  debug:true,
  secret: process.env.SECRET,
});

This is the client.js sanity config file located at the project root (/parking-sanity):
import sanityClient from "@sanity/client";

export default sanityClient({
  projectId: "abcdefg", // find this at manage.sanity.io or in your sanity.json
  dataset: "staging", // this is from those question during 'sanity init'
  useCdn: true,
})

This is the package.json of the project:

"name": "parking-sanity",
"lockfileVersion": 2,
"requires": true,
"packages": {
  "": {
    "name": "parking-sanity",
    "dependencies": {
      "@heroicons/react": "^1.0.5",
      "@sanity/client": "^2.23.2",
      "firebase": "^9.6.1",
      "moment": "^2.29.1",
      "next": "12.0.7",
      "next-auth": "^4.0.6",
      "next-auth-sanity": "^1.3.0",
      "next-sanity": "^0.4.0",
      "nodemailer": "^6.7.2",
      "react": "17.0.2",
      "react-dom": "17.0.2",
      "sanity": "^2.20.0"
    },
    "devDependencies": {
      "autoprefixer": "^10.4.0",
      "eslint": "8.5.0",
      "eslint-config-next": "12.0.7",
      "postcss": "^8.4.5",
      "tailwindcss": "^3.0.7"
    }
  },

These are the errors I have in return:

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error invalid json response body at http://localhost:3000/api/auth/providers reason: Unexpected token < in JSON at position 0 {
  error: {
    message: 'invalid json response body at http://localhost:3000/api/auth/providers reason: Unexpected token < in JSON at position 0',
    stack: 'FetchError: invalid json response body at http://localhost:3000/api/auth/providers reason: Unexpected token < in JSON at position 0\n' +
      '    at /Users/afs/build/react/parking-sanity/node_modules/next/node_modules/node-fetch/lib/index.js:272:32\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:96:5)',
    name: 'FetchError'
  },
  path: 'providers',
  message: 'invalid json response body at http://localhost:3000/api/auth/providers reason: Unexpected token < in JSON at position 0'
}
null
error - TypeError: Cannot convert undefined or null to object
wait  - compiling / (client and server)...
event - compiled client and server successfully in 172 ms (483 modules)
undefined loading
error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './providers' is not defined by "exports" in /Users/afs/build/react/parking-sanity/node_modules/next-auth/package.json
error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './providers' is not defined by "exports" in /Users/afs/build/react/parking-sanity/node_modules/next-auth/package.json
error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './providers' is not defined by "exports" in /Users/afs/build/react/parking-sanity/node_modules/next-auth/package.json

[balazsorban44]

next-auth-sanity is not an official adapter, so you will have to contact the original creator.

We did try to move it into the official adapters once, but due to inactivity, it never made it.

[AeroFiTech]

next-auth-sanity is not an official adapter, so you will have to contact the original creator.

We did try to move it into the official adapters once, but due to inactivity, it never made it.

Alright, thanks for the heads-up mate.

The inactivity / not updated simply indicate that it will break in next-auth v4.

Do you guys have any better example on next-auth for custom adapters? Just found a generic one on https://next-auth.js.org/tutorials/creating-a-database-adapter which I believe is the starting point to link to sanity.

Btw, found a 404 link to https://github.com/nextauthjs/next-auth/blob/main/types/adapters.d.ts from https://github.com/nextauthjs/adapters [TypeScript].

[balazsorban44]

In addition to the docs, you can check our official repo with plenty of examples/test suite here:

https://github.com/nextauthjs/adapters/tree/main/packages

I also fixed the broken link, thanks.

[AeroFiTech]

Thanks for the link to the examples. I saw a tutorial link which is invalid as well: https://next-auth.js.org/getting-started/tutorials/creating-a-database-adapter from https://next-auth.js.org/getting-started/introduction.

Do you have a valid one so I can follow through?

Thanks much!

[balazsorban44]

I could not find that link on the Introduction page, but here is one that works:

https://next-auth.js.org/tutorials/creating-a-database-adapter

The best resource in my opinion is looking at the adapters in the repo, probably the Prisma one is the easiest to follow along.

You can also, read these:

https://next-auth.js.org/adapters/overview
https://next-auth.js.org/adapters/models