Vercel public domain doesn't work as intended

Question

I have built a next.js application that includes user auth with NextAuth and deployed it to Vercel. The specific feature of the app that I'm having issues with is the notifications page. As shown in the code below, the app checks if there is no session, and in that case it won't let you access the /notifications route and hence redirects to the index page instead of the notification page. This is done mainly so that someone who's not logged in/authenticated can not see the notifications page.

I will attach a screenshot of the 3 domains listed on my vercel deployment below. I'm new to using vercel and not quite sure which links does what. But I have noticed that I can't share the third link, and if I understand correctly I'm supposed to share the first link if I wanted to show my friends my app for example.

For context the feature works perfectly in development mode hosted on localhost, and the feature in the third domain on vercel also works perfectly.

The problem I'm encountering is that when deployed to vercel, in the first domain that I'm supposed to be able to share, the /notifications route will always redirect me back to the index page no matter if I'm logged in or not. My main concern is it not working in the first domain since this is the link accessable to the public.

While attempting to troubleshoot this issue myself, I found this 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'
}

I get this error when I'm logged in and after clicking the notifications link and then of course being redirected to the index page. So I assume that this error has something to do with the issue I'm encountering, but then once again, why does my application work flawlessly in development and on the third domain? Also, even though I'm getting this error in the vercel logs and being redirect to the index page instead of the notifications page, the request is showing up as status 200 (ok) in the network tab.

So to summarize I am wondering why my notification route works on localhost and on the third domain but not on the first domain which is the one accessable to other people that wants to check my app out.

deployment domains

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

Answer 1

The error is due to the URL not responding with a JSON. Not possible to be sure due to the hiding of the URLs but, usually, you would define a NEXT_AUTH_URL or similar to tell NextAuth where to look for the API calls and I suspect that the hidden part from the URL do not match as some of the URLs created by Vercel would have some hash to it that changes on redeploy.