these are the errors i get:
webchannel_blob_es2018.js:52 
 GET https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/chann…rpc&SID=FnWvnAv7uH1gtqkN0B6NsQ&AID=0&CI=0&TYPE=xmlhttp&zx=fbdfs3qjjhu8&t=1 400 (Bad Request)

webchannel_blob_es2018.js:52 
 GET https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/chann…rpc&SID=Ao2aa-3aYEhNsZCS52CQTQ&AID=0&CI=0&TYPE=xmlhttp&zx=tlmqnl4kotrd&t=1 400 (Bad Request)
Show 167 more frames

popup.ts:302 Cross-Origin-Opener-Policy policy would block the window.closed call.

LoginPage.js:94 Google login error: FirebaseError: Failed to get document because the client is offline.

Email authentication error: unavailable Failed to get document because the client is offline.

here is my LoginPage.js script:

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  auth,
  googleProvider,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  db,
} from '../firebase';
import { signInWithPopup } from 'firebase/auth';
import { setDoc, doc, getDoc } from 'firebase/firestore';
import {
  Button,
  TextField,
  Tabs,
  Tab,
  Typography,
  Box,
  Paper,
} from '@mui/material';
import { styled } from '@mui/system';

// Styled Components
const Root = styled('div')(({ theme }) => ({
  height: '100vh',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: theme.palette.background.default,
}));

const PaperContainer = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(4),
  width: '400px',
  textAlign: 'center',
}));

const Title = styled(Typography)(({ theme }) => ({
  marginBottom: theme.spacing(3),
}));

const TabStyled = styled(Tabs)(({ theme }) => ({
  marginBottom: theme.spacing(2),
}));

const ButtonStyled = styled(Button)(({ theme }) => ({
  marginTop: theme.spacing(2),
}));

const BoxStyled = styled(Box)(({ theme }) => ({
  marginTop: theme.spacing(2),
}));

const FormBox = styled(Box)(({ theme }) => ({
  marginTop: theme.spacing(2),
}));

function LoginPage() {
  const navigate = useNavigate();
  const [role, setRole] = useState('user'); // 'user' or 'psychologist'
  const [authMode, setAuthMode] = useState('login'); // 'login' or 'register'
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleGoogleLogin = async () => {
    try {
      const result = await signInWithPopup(auth, googleProvider);
      const user = result.user;
  
      // Check if the user exists in Firestore
      const userDoc = await getDoc(doc(db, 'users', user.uid));
      
      if (!userDoc.exists()) {
        // If not, create a new user document with the selected role
        console.log('User does not exist. Creating new user with role:', role);
        await setDoc(doc(db, 'users', user.uid), {
          role: role,
          email: user.email,
        });
      } else {
        // Fetch the role from Firestore for existing users
        const userData = userDoc.data();
        setRole(userData.role);
        console.log('Existing user found with role:', userData.role);
      }
  
      // Navigate based on role
      if (role === 'psychologist') {
        navigate('/dashboard');
      } else {
        navigate('/chat');
      }
    } catch (error) {
      console.error('Google login error:', error);
      alert(error.message);
    }
  };

  const handleEmailAuth = async () => {
    if (email.trim() === '' || password.trim() === '') {
      alert('Please enter a valid email and password.');
      return;
    }
    try {
      let userCredential;
      let user;
  
      if (authMode === 'login') {
        userCredential = await signInWithEmailAndPassword(auth, email, password);
      } else {
        // User registration
        userCredential = await createUserWithEmailAndPassword(auth, email, password);
      }
  
      user = userCredential.user;
  
      const userDocRef = doc(db, 'users', user.uid);
      const userDoc = await getDoc(userDocRef);
  
      if (authMode === 'login') {
        if (userDoc.exists()) {
          const userData = userDoc.data();
          setRole(userData.role);
          if (userData.role === 'psychologist') {
            navigate('/dashboard');
          } else {
            navigate('/chat');
          }
        } else {
          alert('No user data found. Please register first.');
        }
      } else {
        // For registration, create the user document
        await setDoc(userDocRef, {
          role: role,
          email: email,
        });
        if (role === 'psychologist') {
          navigate('/dashboard');
        } else {
          navigate('/chat');
        }
      }
    } catch (error) {
      console.error('Email authentication error:', error.code, error.message);
      alert('Authentication error: ' + error.message);
    }
  };

  const handleTabChange = (event, newValue) => {
    setRole(newValue);
  };

  const handleAuthModeChange = () => {
    setAuthMode(authMode === 'login' ? 'register' : 'login');
  };

  return (
    <Root>
      <PaperContainer elevation={3}>
        <Title variant="h4">Welcome to MindGarden</Title>

        {/* Tabs to select User or Psychologist */}
        <TabStyled
          value={role}
          onChange={handleTabChange}
          indicatorColor="primary"
          textColor="primary"
          centered
        >
          <Tab label="User" value="user" />
          <Tab label="Psychologist" value="psychologist" />
        </TabStyled>

        <BoxStyled>
          <Typography variant="h6">
            {authMode === 'login' ? 'Login' : 'Register'} as{' '}
            {role.charAt(0).toUpperCase() + role.slice(1)}
          </Typography>

          {/* Email/Password Form */}
          <FormBox component="form" noValidate autoComplete="off">
            <TextField
              label="Email"
              variant="outlined"
              fullWidth
              margin="normal"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <TextField
              label="Password"
              variant="outlined"
              fullWidth
              margin="normal"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </FormBox>

          <ButtonStyled
            variant="contained"
            color="primary"
            fullWidth
            onClick={handleEmailAuth}
          >
            {authMode === 'login' ? 'Login' : 'Register'} with Email
          </ButtonStyled>
          <Button color="primary" onClick={handleAuthModeChange}>
            {authMode === 'login'
              ? "Don't have an account? Register"
              : 'Already have an account? Login'}
          </Button>

          <Box mt={2}>
            <Typography variant="h6">Or continue with</Typography>
            <ButtonStyled
              variant="contained"
              color="primary"
              fullWidth
              onClick={handleGoogleLogin}
            >
              Sign in with Google
            </ButtonStyled>

            {/* Facial Recognition Login Option */}
            <ButtonStyled
              variant="outlined"
              fullWidth
              onClick={() => navigate('/facial-login')}
            >
              Facial Recognition Login
            </ButtonStyled>
          </Box>
        </BoxStyled>
      </PaperContainer>
    </Root>
  );
}

export default LoginPage;