The app works perfectly fine on local but when I deployed the frontend to vercel and the backend to heroku it doesn’t work. I can signIn and it redirected me to the correct url, but when I make additional request which requires the session on the backend using getSession() it returns null. I’ve been stuck for days now

This is my setup

"next": "13.3.0",
"next-auth": "^4.18.0",

This is my [...nextauth].ts

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export const authOptions: NextAuthOptions = {
    adapter: PrismaAdapter(prisma),
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID!,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
        }),
    ],
    secret: process.env.NEXTAUTH_SECRET,
    callbacks: {
        async session({ session, token, user }) {
            console.log("asd", session, token, user);
            return {
                ...session,
                user: {
                    ...session.user,
                    ...user,
                },
            };
        },
    },
};

export default NextAuth(authOptions);

.env

NEXTAUTH_URL=https://VERCELDOMAIN.vercel.app
NEXTAUTH_SECRET=

this is the error on heroku logs

2023-04-22T06:00:24.059182+00:00 app[web.1]: [next-auth][error][CLIENT_FETCH_ERROR]
2023-04-22T06:00:24.059204+00:00 app[web.1]: https://next-auth.js.org/errors#client_fetch_error fetch failed {
2023-04-22T06:00:24.059205+00:00 app[web.1]: error: {
2023-04-22T06:00:24.059206+00:00 app[web.1]: message: 'fetch failed',
2023-04-22T06:00:24.059206+00:00 app[web.1]: stack: 'TypeError: fetch failedn' +
2023-04-22T06:00:24.059206+00:00 app[web.1]: '    at Object.fetch (node:internal/deps/undici/undici:11457:11)n' +
2023-04-22T06:00:24.059207+00:00 app[web.1]: '    at processTicksAndRejections (node:internal/process/task_queues:95:5)',
2023-04-22T06:00:24.059207+00:00 app[web.1]: name: 'TypeError'
2023-04-22T06:00:24.059207+00:00 app[web.1]: },
2023-04-22T06:00:24.059209+00:00 app[web.1]: url: 'http://localhost:3000/api/auth/session',
2023-04-22T06:00:24.059209+00:00 app[web.1]: message: 'fetch failed'
2023-04-22T06:00:24.059209+00:00 app[web.1]: }

My guess is that next auth is trying to fetch the session from http://localhost:3000/api/auth/session on prod when it should fetch from https://VERCELDOMAIN.vercel.app/api/auth/session instead

I’ve included the full repo if the information I provided is not enough
this is my frontend repo: https://github.com/alfredlouisw8/messaging-app-frontend

this is my backend repo: https://github.com/alfredlouisw8/messaging-app-backend

Any help is appreciated, Thank you!