is session based authentication safe for a chatting application

Question

I am creating a chat application using next js, node js, express js, and MongoDB. I used the next-auth for authentication. i am using google authentication. I am getting the session object by using the getSession() hook. from this session object, I get the user id which is the same id in the database. I use this "user-id" to post or get information from the database.

my question: is this a safe way because I am not sending any jwt token to verify users from the backend? as you can see I am not sending jwt token.

my concern: if I send or get data like this then anybody can access the data if the know the user-id.

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import axios from 'axios';
import { getSession } from 'next-auth/react';
import Modal from '../../components/popupchat/modal';

const PopupChat = ({ data }) => {
  const [chatList, setChatList] = useState([]);
  useEffect(() => {
    const getChatList = async () => {
      const res = await axios.get(
        `${process.env.NEXT_PUBLIC_API_URL}api/chat/admin/${data.user.id}`
      );
      setChatList(res.data);
    };
    getChatList();
  }, []);
  return (
    <>
      <Modal data={data} />
      <div className="overflow-x-auto relative">
        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
              <th scope="col" className="py-3 px-6">
                Chat Name
              </th>
              <th scope="col" className="py-3 px-6">
                Chat Title
              </th>
              <th scope="col" className="py-3 px-6">
                Created AT
              </th>
              <th scope="col" className="py-3 px-6">
                Open
              </th>
            </tr>
          </thead>
          {chatList &&
            chatList.map((singleChat, index) => {
              return (
                <tbody key={index}>
                  <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                      {singleChat.chatName}
                    </td>
                    <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                      {singleChat.chatTitle}
                    </td>
                    <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                      {singleChat.createdAt}
                    </td>
                    <td className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                      <Link href={`/popupchat/${singleChat._id}`}>Open</Link>
                    </td>
                  </tr>
                </tbody>
              );
            })}
        </table>
      </div>
    </>
  );
};

export default PopupChat;

export async function getServerSideProps({ req }) {
  const session = await getSession({ req });
  if (!session) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
  return {
    props: {
      data: session,
    },
  };
}

Answer 1

It's not safe at all. "Security by obscurity" is not security, it's an illusion of making something somehow secure. You should always properly secure access to your backend resources. Authenticate users, then establish sessions or provide the frontend client with an access token.

You can include the user ID in the path to your backend endpoint, but the request should contain some credentials (session, access token, even a password) so that the backend can authorize the request. The backend must be able to tell if the caller is authorized to access that user's information. Just knowing the user ID is not enough.