Here is my code:

"use client";

import { useState } from "react";
import firebaseApp from "../../../lib/firebase";
import { useSession, signIn, signOut } from "next-auth/react";
import { addDoc, collection, getFirestore } from "firebase/firestore";
import { AuthButton } from "./AuthButton";

.... other code, it works bruh

          <button
            onClick={() => signOut()}
            className="md:ml-4 bg-red-500 flex-auto shadow text-white rounded-full border-y px-4 py-3 w-full md:w-[200px] mt-4 md:m-0 border-transparent font-semibold hover:bg-red-600 dark:hover:bg-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-300 dark:focus:ring-offset-slate-900 dark:focus:ring-red-700"
          >
            Sign out
          </button>
        </div>
      ) : (
        <div className="md:flex flex-row w-full mb-8 text-lg md:gap-2">
          <AuthButton
            title="Sign in with GitHub"
            file="github"
            onClick={() => signIn("github")}
          />
          <AuthButton
            title="Sign in with Google"
            file="google"
            onClick={() => signIn("google")}
          />
        </div>
      )}
    </>
  );
};

I am doing signOUt() to sign out the user but it refreshes the page. Any way to sign out the user without refreshing the page?

I was expecting it to sign out seamlessely so that it will feel like a SPA.

Anyone knows how can I do this? Hmmm…