init login firebase integrate

package.json

@@ -12,8 +12,12 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
+    "firebase": "^10.13.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "react-testify": "^0.0.13",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.jsx

@@ -1,21 +1,38 @@
-import './App.css';
-import Footer from './assets/Components/Footer';
-import Navbar from './assets/Components/Navbar';
-import Dashboard from './assets/Pages/Dashboard';
+// import { useState } from 'react';
+// import { useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import Login from './assets/Pages/login';
+import SignUp from './assets/Pages/register';
+import Dashboard from './assets/Pages/Dashboard'
+// import auth from './assets/Pages/firebase'
 
 function App() {
-
-
+  // const [user, setUser] = useState();
+  // useEffect(() => {
+  //   auth.onAuthStateChanged((user) => {
+  //     setUser(user);
+  //   });
+  // });
   return (
-    <>
-    <Navbar></Navbar>
-      <div className="container py-4 px-3 mx-auto">
-        <h1>Welcome to Open Courses!</h1>
-
-        <Dashboard></Dashboard>
+    <Router>
+      <div className='App'>
+      <div className="auth-wrapper">
+        <div className="auth-inner">
+          <Routes>
+            {/* <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} /> */}
+            <Route path='/' element={<Login/>}/>
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<SignUp />} />
+            <Route path='/dashboard' element={<Dashboard />}/>
+            {/* <Route path="/profile" element={user ? <Profile /> : <Navigate to="/login" />} /> */}
+          </Routes>
+          <ToastContainer />
+        </div>
+      </div>
       </div>
-      <Footer></Footer>
-    </>
+    </Router>
   );
 }
 

src/assets/Components/Navbar.jsx

@@ -30,7 +30,7 @@ function Navbar() {
               <form className="me-2 mb-2 mb-lg-0">
                 <input type="text" className="form-control form-control-sm" placeholder="Search" />
               </form>
-              <a className="btn btn-primary" href="">Sign up</a>
+              <a className="btn btn-primary" href="/login">Sign up</a>
             </div>
           </div>
         </div>

src/assets/Pages/firebase.jsx

@@ -0,0 +1,22 @@
+// 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
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyCYeWoa0iKtDr9VV2iSZ9tZQqyWuBHWXnU",
+  authDomain: "opencourses-6a478.firebaseapp.com",
+  projectId: "opencourses-6a478",
+  storageBucket: "opencourses-6a478.appspot.com",
+  messagingSenderId: "139996396922",
+  appId: "1:139996396922:web:5e0aec9a81d6aa30182ac3",
+  measurementId: "G-1T13ESR8EJ"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const auth=getAuth();
+export default app;

src/assets/Pages/login.jsx

@@ -0,0 +1,69 @@
+import { signInWithEmailAndPassword } from "firebase/auth";
+import  { useState } from "react";
+import { auth } from "./firebase";
+import { toast } from "react-toastify";
+import Navbar from '../Components/Navbar'
+function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      console.log("User logged in Successfully");
+      window.location.href = "/dashboard";
+      toast.success("User logged in Successfully", {
+        position: "top-center",
+      });
+    } catch (error) {
+      console.log(error.message);
+
+      toast.error(error.message, {
+        position: "bottom-center",
+      });
+    }
+  };
+
+  return (
+<>
+<Navbar></Navbar>
+    <form onSubmit={handleSubmit} className="container mt-5 w-25">
+      <h3 className="text-center mb-2">Login</h3>
+
+      <div data-mdb-input-init className="form-outline mb-4">
+        <label>Email address</label>
+        <input
+          type="email"
+          className="form-control"
+          placeholder="Enter email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+      </div>
+
+      <div data-mdb-input-init className="form-outline mb-4">
+        <label>Password</label>
+        <input
+          type="password"
+          className="form-control"
+          placeholder="Enter password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
+
+      <div className="d-grid">
+        <button type="submit" className="btn btn-primary mb-3">
+          Submit
+        </button>
+      </div>
+      <p className="forgot-password text-right">
+        New user? <a href="/register">Register Here</a>
+      </p>
+    </form>
+    </>
+  );
+}
+
+export default Login;

src/assets/Pages/profile.jsx

@@ -0,0 +1,61 @@
+import  { useEffect, useState } from "react";
+import { auth} from "./firebase";
+import { doc, getDoc } from "firebase/firestore";
+
+function Profile() {
+  const [userDetails, setUserDetails] = useState(null);
+  const fetchUserData = async () => {
+    auth.onAuthStateChanged(async (user) => {
+      console.log(user);
+
+      const docRef = doc( "Users", user.uid);
+      const docSnap = await getDoc(docRef);
+      if (docSnap.exists()) {
+        setUserDetails(docSnap.data());
+        console.log(docSnap.data());
+      } else {
+        console.log("User is not logged in");
+      }
+    });
+  };
+  useEffect(() => {
+    fetchUserData();
+  }, []);
+
+  async function handleLogout() {
+    try {
+      await auth.signOut();
+      window.location.href = "/login";
+      console.log("User logged out successfully!");
+    } catch (error) {
+      console.error("Error logging out:", error.message);
+    }
+  }
+  return (
+    <div>
+      {userDetails ? (
+        <>
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <img
+              src={userDetails.photo}
+              width={"40%"}
+              style={{ borderRadius: "50%" }}
+            />
+          </div>
+          <h3>Welcome {userDetails.firstName} 🙏🙏</h3>
+          <div>
+            <p>Email: {userDetails.email}</p>
+            <p>First Name: {userDetails.firstName}</p>
+            {/* <p>Last Name: {userDetails.lastName}</p> */}
+          </div>
+          <button className="btn btn-primary" onClick={handleLogout}>
+            Logout
+          </button>
+        </>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+}
+export default Profile;

src/assets/Pages/register.jsx

@@ -0,0 +1,101 @@
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import  { useState } from "react";
+import { auth } from "./firebase";
+import { setDoc, doc } from "firebase/firestore";
+import { toast } from "react-toastify";
+import Navbar from "../Components/Navbar";
+
+function Register() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [fname, setFname] = useState("");
+  const [lname, setLname] = useState("");
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    try {
+      await createUserWithEmailAndPassword(auth, email, password);
+      const user = auth.currentUser;
+      console.log(user);
+      // if (user) {
+      //   await setDoc(doc(db, "Users", user.uid), {
+      //     email: user.email,
+      //     firstName: fname,
+      //     lastName: lname,
+      //     photo:""
+      //   });
+      // }
+      console.log("User Registered Successfully!!");
+      toast.success("User Registered Successfully!!", {
+        position: "top-center",
+      });
+    } catch (error) {
+      console.log(error.message);
+      toast.error(error.message, {
+        position: "bottom-center",
+      });
+    }
+  };
+
+  return (
+    <>
+    <Navbar></Navbar>
+    <form onSubmit={handleRegister} className="container mt-5 w-25">
+      <h3 className="text-center mb-2">Sign Up</h3>
+
+      <div className="mb-3">
+        <label>First name</label>
+        <input
+          type="text"
+          className="form-control"
+          placeholder="First name"
+          onChange={(e) => setFname(e.target.value)}
+          required
+        />
+      </div>
+
+      <div className="mb-3">
+        <label>Last name</label>
+        <input
+          type="text"
+          className="form-control"
+          placeholder="Last name"
+          onChange={(e) => setLname(e.target.value)}
+        />
+      </div>
+
+      <div className="mb-3">
+        <label>Email address</label>
+        <input
+          type="email"
+          className="form-control"
+          placeholder="Enter email"
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+      </div>
+
+      <div className="mb-3">
+        <label>Password</label>
+        <input
+          type="password"
+          className="form-control"
+          placeholder="Enter password"
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+      </div>
+
+      <div className="d-grid">
+        <button type="submit" className="btn btn-primary">
+          Sign Up
+        </button>
+      </div>
+      <p className="forgot-password text-right">
+        Already registered <a href="/login">Login</a>
+      </p>
+    </form>
+    </>
+  );
+}
+export default Register;