In react Firebase Chat App i have afirst issue with closed Socket and a second with redirection after signin with google

Question

My 4 js files are the following.i use react router v6 and after the signin in useEffect tried to redirect in chats page.

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./components/Login";
import Chats from "./components/Chats";
import { AuthProvider } from "./contexts/AuthContext";

function App() {
  return (
    <div style={{ fontFamily: "Avenir" }}>
      <Router>
        <AuthProvider>
          <Routes>
            <Route path="/" element={<Login />} />
            <Route path="/chats" element={<Chats />} />
          </Routes>
        </AuthProvider>
      </Router>
    </div>
  );
}

export default App;

import React from "react";
import { useNavigate } from "react-router-dom";
import { Col, Row } from "react-grid-system";
import {
  ChatEngineWrapper,
  Socket,
  ChatList,
  ChatFeed,
  ChatSettings,
} from "react-chat-engine";
import { auth } from "../firebase";

import { useAuth } from "../contexts/AuthContext";

const Chats = () => {
  const navigate = useNavigate();
  const { user } = useAuth();

  console.log(user);
  const handleLogout = async () => {
    await auth.signOut();
    navigate("/", { replace: true });
  };
  return (
    <div className="chats-page">
      <div className="nav-bar">
        <div className="logo-tab">TotalChat</div>
        <div onClick={handleLogout} className="logout-tab">
          Logout
        </div>
      </div>
      <ChatEngineWrapper height="calc(100vh - 66px)">
        <Socket
          projectID={process.env.REACT_APP_PROJECT_ID}
          userName={process.env.REACT_APP_USERNAME}
          userSecret={process.env.REACT_APP_USER_SECRET}
        />
        <Row>
          <Col xs={0} sm={3}>
            <ChatList />
          </Col>

          <Col xs={12} sm={6}>
            <ChatFeed />
          </Col>

          <Col xs={0} sm={3}>
            <ChatSettings />
          </Col>
        </Row>
      </ChatEngineWrapper>
    </div>
  );
};

export default Chats;

import React from "react";
import { GoogleOutlined, FacebookOutlined } from "@ant-design/icons";

import { auth } from "../firebase";
import firebase from "firebase/compat/app";

const Login = () => {
  return (
    <div id="login-page">
      <div id="login-card">
        <h2>Welcome To Total Chat!</h2>

        <div
          className="login-button google"
          onClick={() =>
            auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())
          }
        >
          <GoogleOutlined /> Sign In with Google
        </div>
        <br />
        <br />
        <div
          className="login-button facebook"
          onClick={() =>
            auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider())
          }
        >
          <FacebookOutlined /> Sign In with Facebook
        </div>
      </div>
    </div>
  );
};

export default Login;

import React, { useContext, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { auth } from "../firebase";
// import io from "socket.io-client";
// let socket = io.connect("wss://localhost:3000");

const AuthContext = React.createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState("");
  const navigate = useNavigate();

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      // socket.on();
      setUser(user);
      setLoading(false);
      if (user) navigate("/chats");
    });
  }, [user, navigate]);

  const value = { user };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
};

Errors closed socket

I am completely new to this and i do not know if the redirection problem also caused by socket or connection issues.If anybody has an idea about it i would be grateful.Thanks in advance!