Context: I want to achieve client side authentication my next.js 13.4 application with endpoint URL/cart
As child component is wrapped within SessionProvider it should get window object, but still getting error. Help me to achieve client side authentication! Thanks in Advance
I have written cart/page.jsx as follows:

"use client";
import React from "react";
import { SessionProvider } from "next-auth/react";
import Cart from "@/components/Cart";

export default function CartUI() {
  return (
    <SessionProvider>
      <Cart />
    </SessionProvider>
  );
}

And Cart component is defined as follows:

"use client"
import React from 'react'

import { useSession, signIn, signOut } from 'next-auth/react';

export default function Cart() {
  const { data: session } = useSession();

  // Check if we're on the client side before accessing the window object
  const handleAuthClick = () => {
    if (typeof window !== 'undefined') {
      if (session) {
        signOut();
      } else {
        signIn();
      }
    }
  };
  console.log("session", session);
  return (
      <div>
        {/* <button onClick={handleAuthClick}>{ session ? "Log out" : "Log In"}</button> */}
    </div>
  )
}

Also NextAuth handler is defined as follows:

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

const handler =  NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
    }),
  ],
callbacks: {
    async signIn({ account, profile, user, credentials }) {
      try {
        console.log("user in signIn callback!", JSON.stringify(user, null, 2));
      } catch (error) {
        console.log("Error checking if user exists: ", error.message);
        return false
      }
    },
  },
  session: {
    strategy: "jwt"
  },  
  secret: process.env.NEXTAUTH_SECRET
});

export { handler as GET, handler as POST };