Why firebase Sign In showing error in next.js?

I am trying to sign in with email and password in firebase. I made a sign up page where I am able to successfully store the credential in firebase auth but sign in is not happening.

'use client'

import { useState } from 'react';
import { useSignInWithEmailAndPassword } from 'react-firebase-hooks/auth'
import { auth } from '@/app/firebase/config'
import { useRouter } from 'next/navigation';

const SignIn = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [signInWithEmailAndPassword] = useSignInWithEmailAndPassword(auth);
  const router = useRouter()

  const handleSignIn = async () => {
    try {
      const res = await signInWithEmailAndPassword(email, password);
      console.log({res});
      sessionStorage.setItem('user', true)
      setEmail('');
      setPassword('');
      router.push('/')
    } catch(e) {
      console.error(e)
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-900">
      <div className="bg-gray-800 p-10 rounded-lg shadow-xl w-96">
        <h1 className="text-white text-2xl mb-5">Sign In</h1>
        <input 
          type="email" 
          placeholder="Email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          className="w-full p-3 mb-4 bg-gray-700 rounded outline-none text-white placeholder-gray-500"
        />
        <input 
          type="password" 
          placeholder="Password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          className="w-full p-3 mb-4 bg-gray-700 rounded outline-none text-white placeholder-gray-500"
        />
        <button 
          onClick={handleSignIn}
          className="w-full p-3 bg-indigo-600 rounded text-white hover:bg-indigo-500"
        >
          Sign In
        </button>
      </div>
    </div>
  );
};

export default SignIn;

The error is -

@firebase/analytics: Analytics: Firebase Analytics is not supported in this environment. Wrap initialization of analytics in analytics.isSupported() to prevent initialization in unsupported environments. Details: (1) Cookies are not available. (analytics/invalid-analytics-context).
 ⨯ node_modules\@firebase\analytics\dist\esm\index.esm2017.js (177:0) @ getOrCreateDataLayer
 ⨯ ReferenceError: window is not defined
    at eval (./app/firebase/config.js:24:83)
    at (ssr)/./app/firebase/config.js (C:\Users\USER\Desktop\web\zhoppi_app\.next\server\app\sign-in\page.js:415:1)
    at __webpack_require__ (C:\Users\USER\Desktop\web\zhoppi_app\.next\server\webpack-runtime.js:33:43)
    at eval (./app/sign-in/page.jsx:10:78)
    at (ssr)/./app/sign-in/page.jsx (C:\Users\USER\Desktop\web\zhoppi_app\.next\server\app\sign-in\page.js:426:1)
    at __webpack_require__ (C:\Users\USER\Desktop\web\zhoppi_app\.next\server\webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
null

After signIn, I want the user to move to the homepage. What am I doing wrong?

Based on the error

@firebase/analytics: Analytics: Firebase Analytics is not supported in this environment.

...

ReferenceError: window is not defined

it seems that your "/app/firebase/config.js" file accessing/referencing the Firebase Analytics module also needs the "use client" directive specified so it runs in the client environment where window is defined instead of the server environment where it isn't.

Or alternatively try as the error suggests and "Wrap initialization of analytics in analytics.isSupported() to prevent initialization in unsupported environments."