After successfully developing a next.js application with user auth using NextAuth and deploying it to Vercel, I encountered an issue related to the notifications page functionality. The problem arises when the app checks for an active session; if none is found, it automatically redirects users from the /notifications route back to the index page to ensure that only authenticated users can access the notifications section.
Included below is a screenshot displaying the three different domains available on my Vercel deployment. As a newcomer to Vercel, I am uncertain about the specific purposes of each link. However, I've noticed that I'm unable to share the third link, leading me to believe that the first link is meant for public access, such as sharing the app with friends.
During development on localhost and within the third domain on Vercel, the feature functioned flawlessly. However, upon deployment to the first domain accessible to the general public, the /notifications route consistently redirected me to the index page regardless of my authentication status. This malfunction in the public domain raised concerns over the usability of the app.
Upon investigating this issue further, I came across an error in the Vercel logs:
[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Unexpected token < in JSON at position 0 {
error: {
message: 'Unexpected token < in JSON at position 0',
stack: 'SyntaxError: Unexpected token < in JSON at position 0\n' +
' at JSON.parse (<anonymous>)\n' +
' at parseJSONFromBytes (node:internal/deps/undici/undici:6662:19)\n' +
' at successSteps (node:internal/deps/undici/undici:6636:27)\n' +
' at node:internal/deps/undici/undici:1236:60\n' +
' at node:internal/process/task_queues:140:7\n' +
' at AsyncResource.runInAsyncScope (node:async_hooks:203:9)\n' +
' at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
name: 'SyntaxError'
},
url: 'https://switter-deploy-xxxxxxxxx-xxxxxxxxxx-projects.vercel.app/api/auth/session',
message: 'Unexpected token < in JSON at position 0'
}
This error appears after attempting to view notifications while logged in, resulting in a redirection to the index page. Despite encountering this error and landing on the index page instead of the notifications page, the network tab displays a status of 200 (OK).
In summary, I am puzzled by the discrepancy in functionality between the notification route on localhost, the third domain, and the first domain — which is intended for public access. I seek clarity on why the notifications work smoothly in some instances but fail in others.
import Header from "@/components/Header"
import NotificationsFeed from "@/components/NotificationsFeed"
import useCurrentUser from "@/hooks/useCurrentUser"
import { NextPageContext } from "next"
import { getSession } from "next-auth/react"
export async function getServerSideProps(context: NextPageContext) {
const session = await getSession(context)
console.log("Session:", session)
if (!session) {
return {
redirect: {
destination: "/",
permanent: false,
},
}
}
return {
props: {
session,
},
}
}
const Notifications = () => {
return (
<>
<Header showBackArrow label="Notifications" />
<NotificationsFeed />
</>
)
}
export default Notifications