Fixed all problem

public/index.html

@@ -10,7 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <script src="https://kit.fontawesome.com/c67cd56b75.js" crossorigin="anonymous"></script>
+    <script src="https://kit.fontawesome.com/e98990cd24.js" crossorigin="anonymous"></script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -11,6 +11,8 @@ import PrivateRoute from './components/PrivateRoute/PrivateRoute';
 import BuyCourse from './components/BuyCourse/BuyCourse';
 
 function App() {
+
+
   return (
     <div className='max-w-7xl mx-auto '>
       <Navbar></Navbar>

src/components/GoogleAuth/GoogleAuth.js

@@ -1,32 +0,0 @@
-import React from "react";
-import { useSignInWithGoogle } from "react-firebase-hooks/auth";
-import toast from "react-hot-toast";
-import { useNavigate } from "react-router-dom";
-import auth from "../../firebase.init";
-import Loading from "../Loading/Loading";
-
-const GoogleAuth = () => {
-  const [signInWithGoogle, user, loading, error] = useSignInWithGoogle(auth);
-  const navigate = useNavigate();
-
-  if (loading) {
-    return <Loading />;
-  }
-  if (user) {
-    return navigate("/home");
-  }
-
-  return (
-    <>
-      <button
-        onClick={() => signInWithGoogle()}
-        className="btn btn-outline w-[300px] my-2"
-      >
-        Continue with Google
-      </button>
-      {error && toast.error(error.message, { id: "gError" })}
-    </>
-  );
-};
-
-export default GoogleAuth;

src/components/Login/Login.js

@@ -1,12 +1,12 @@
 import React, { useEffect } from "react";
-import { useSignInWithEmailAndPassword } from "react-firebase-hooks/auth";
+import { useSignInWithEmailAndPassword, useSignInWithGoogle } from "react-firebase-hooks/auth";
 import toast from "react-hot-toast";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import auth from "../../firebase.init";
-import GoogleAuth from "../GoogleAuth/GoogleAuth";
 import Loading from "../Loading/Loading";
 
 const Login = () => {
+  const [signInWithGoogle, gUser, gLoading, gError] = useSignInWithGoogle(auth);
   const [signInWithEmailAndPassword, user, loading, error] =
     useSignInWithEmailAndPassword(auth);
   const navigate = useNavigate();
@@ -22,15 +22,21 @@ const Login = () => {
   };
 
   useEffect(() => {
-    if (user) {
+    if (user || gUser) {
       navigate(from, { replace: true });
    }
-  },[user, from, navigate]);
+  },[user, from, navigate, gUser]);
 
-  if (loading) {
-    return <Loading />;
-  }
 
+
+  useEffect(() => {
+
+    if(loading || gLoading) {
+      return () => {
+        <Loading/>
+     };
+    }
+  },[loading, gLoading]);
 
 
   return (
@@ -50,6 +56,8 @@ const Login = () => {
               className="input input-bordered"
             />
             {error && toast.error(error.message, { id: "error3" })}
+            {gError && toast.error(gError.message, { id: "gError" })}
+
           </div>
           <div className="form-control my-2">
             <label className="label">
@@ -71,7 +79,12 @@ const Login = () => {
           </p>
           <input className="btn w-full " type="submit" value="LogIn" />
         </form>
-        <GoogleAuth />
+        <button
+        onClick={() => signInWithGoogle()}
+        className="btn btn-outline w-[300px] my-2"
+      >
+        Continue with Google
+      </button>
       </div>
     </div>
   );

src/components/Navbar/Navbar.js

@@ -3,13 +3,12 @@ import React from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import { Link } from "react-router-dom";
 import auth from "../../firebase.init";
-import Loading from "../Loading/Loading";
 
 const Navbar = () => {
   const [user, loading] = useAuthState(auth);
 
   if (loading) {
-    return <Loading />;
+    return "";
   }
 
   const logout = () => {

src/components/SignUp/SignUp.js

@@ -1,14 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import auth from "../../firebase.init";
-import { useCreateUserWithEmailAndPassword } from "react-firebase-hooks/auth";
+import { useCreateUserWithEmailAndPassword, useSignInWithGoogle } from "react-firebase-hooks/auth";
 import toast from "react-hot-toast";
 import { useUpdateProfile } from "react-firebase-hooks/auth";
-import { async } from "@firebase/util";
 import Loading from "../Loading/Loading";
-import GoogleAuth from "../GoogleAuth/GoogleAuth";
+import auth from "../../firebase.init";
 
 const SignUp = () => {
+  const [signInWithGoogle, gUser, gLoading, gError] = useSignInWithGoogle(auth);
   const [error2, setError2] = useState(null);
   const navigate = useNavigate();
   const location = useLocation();
@@ -35,16 +34,18 @@ const SignUp = () => {
   };
 
   useEffect(() => {
-    if (loading || updating) {
-      return <Loading />;
+    if (loading || updating || gLoading) {
+      return () => {
+        <Loading/>
+     };
     }
-  },[loading, updating])
+  },[loading, updating, gLoading])
 
   useEffect(() => {
-    if (user) {
+    if (user || gUser) {
       navigate(from, { replace: true });
     }
-  }, [user, from, navigate]);
+  }, [user, from, navigate, gUser]);
 
 
 
@@ -90,6 +91,8 @@ const SignUp = () => {
             />
             {error && toast.error(error.message, { id: "error" })}
             {uError && toast.error(uError.message, { id: "uError" })}
+            {gError && toast.error(gError.message, { id: "gError" })}
+
           </div>
           <div className="form-control my-2">
             <label className="label">
@@ -116,7 +119,12 @@ const SignUp = () => {
           </p>
           <input className="btn w-full " type="submit" value="SignUp" />
         </form>
-        <GoogleAuth />
+        <button
+        onClick={() => signInWithGoogle()}
+        className="btn btn-outline w-[300px] my-2"
+      >
+        Continue with Google
+      </button>
       </div>
     </div>
   );

src/firebase.init.js

@@ -1,20 +1,23 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
+
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
-  apiKey: process.env.REACT_APP_apiKey,
-  authDomain: process.env.REACT_APP_authDomain,
-  projectId: process.env.REACT_APP_projectId,
-  storageBucket: process.env.REACT_APP_storageBucket,
-  messagingSenderId: process.env.REACT_APP_messagingSenderId,
-  appId: process.env.REACT_APP_appId,
+  apiKey: "AIzaSyD2k-5PmGq_u2XZEf9DcRbnxX2S6FhMSsk",
+  authDomain: "learnwithrumon.firebaseapp.com",
+  projectId: "learnwithrumon",
+  storageBucket: "learnwithrumon.appspot.com",
+  messagingSenderId: "314388553216",
+  appId: "1:314388553216:web:a78efe3815a715753202e5",
 };
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
+
 const auth = getAuth(app);
+
 export default auth;