solve auth problem

Author: devsdenepal

package-lock.json

@@ -1,42 +1,38 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+.App {
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+
+.App-link {
+  color: #61dafb;
 }
 
-@keyframes logo-spin {
+@keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+}

src/App.css

@@ -1,38 +1,58 @@
-// 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 Register from './assets/Pages/register';
-import Dashboard from './assets/Pages/Dashboard'
-import Register from './assets/Pages/register';
-// import auth from './assets/Pages/firebase'
+import React, { useEffect, useState } from "react";
+import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+import "./App.css";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
+
+import Login from "./components/login";
+import SignUp from "./components/register";
+import Home from "./components/home";
+import Profile from "./components/profile";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { auth } from "./components/firebase";
+import Navbar from "./components/Navbar";
 
 function App() {
-  // const [user, setUser] = useState();
-  // useEffect(() => {
-  //   auth.onAuthStateChanged((user) => {
-  //     setUser(user);
-  //   });
-  // });
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user); // Set user when logged in
+    });
+
+    return () => unsubscribe(); // Clean up on unmount
+  }, []);
+
   return (
     <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={<Register />} />
-            <Route path='/dashboard' element={<Dashboard />}/>
-            {/* <Route path="/profile" element={user ? <Profile /> : <Navigate to="/login" />} /> */}
-          </Routes>
-          <ToastContainer />
+      <div className="App">
+        {/* Pass user status as loggedin prop to Navbar */}
+        <Navbar loggedin={user ? 'true' : 'false'} />
+        <div className="auth-wrapper">
+          <div className="auth-inner">
+            <Routes>
+              {/* Redirect to profile if the user is logged in */}
+              <Route path="/" element={user ? <Navigate to="/profile" /> : <Login />} />
+              <Route path="/home" element={<Home />} />
+              <Route
+                path="/login"
+                element={user ? <Navigate to="/profile" /> : <Login />}
+              />
+              <Route path="/register" element={<SignUp />} />
+              <Route
+                path="/profile"
+                element={user ? <Profile /> : <Navigate to="/login" />}
+              />
+            </Routes>
+            <ToastContainer />
+          </div>
         </div>
       </div>
-      </div>
     </Router>
   );
 }

src/App.jsx

@@ -0,0 +1,47 @@
+import logo from '../assets/images/logo.png';
+import { Link } from 'react-router-dom'; // Import Link from react-router-dom
+
+function Navbar({ loggedin }) {
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <Link className="navbar-brand" to="/"><img src={logo} width="36" alt="Logo" /></Link>
+        <div className="collapse navbar-collapse" id="navbarExample">
+          <ul className="navbar-nav me-auto mb-0">
+            <li className="nav-item">
+              <Link className="nav-link active" aria-current="page" to="/home">Home</Link>
+            </li>
+            <li className="nav-item">
+              <Link className="nav-link" aria-current="page" to="/events">Events</Link>
+            </li>
+            <li className="nav-item dropdown">
+              <Link className="nav-link dropdown-toggle" to="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Courses</Link>
+              <ul className="dropdown-menu">
+                <li><Link className="dropdown-item" to="/programming-languages">Programming Languages</Link></li>
+                <li><Link className="dropdown-item" to="/frameworks">Frameworks</Link></li>
+                <li><hr className="dropdown-divider" /></li>
+                <li><Link className="dropdown-item" to="/roadmaps">Roadmaps</Link></li>
+              </ul>
+            </li>
+          </ul>
+          <div className="d-flex align-items-center flex-column flex-lg-row">
+            <form className="me-2 mb-2 mb-lg-0">
+              <input type="text" className="form-control form-control-sm" placeholder="Search" />
+            </form>
+            {loggedin === 'true' ? (
+              <Link className="btn btn-primary" to="/profile">Profile</Link>
+            ) : (
+              <Link className="btn btn-primary" to="/login">Sign up</Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;

src/assets/Components/Navbar.jsx

@@ -1,6 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -18,5 +19,7 @@ const firebaseConfig = {
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
+
 export const auth=getAuth();
+export const db=getFirestore(app)
 export default app;