Feature: Protecte routes to be accessible after being loged in. (#116)

* Feature: Protecte routes to be accessible after being loged in.

Author: Lelian248

src/App.jsx

@@ -3,6 +3,8 @@ import { Routes, Route, Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { onAuthStateChanged } from 'firebase/auth';
 import { useDispatch, useSelector } from 'react-redux';
+import { auth } from './services/firebaseConfig';
+import { login, logout, selectUser } from './features/user/userSlice';
 
 import Home from './pages/Home';
 import About from './pages/About';
@@ -18,8 +20,8 @@ import UserHome from './pages/UserHome';
 import Footer from './components/Footer';
 import Nav from './components/Navbar';
 import PublicProfile from './pages/PublicProfile';
-import { login, logout, selectUser } from './features/user/userSlice';
-import { auth } from './services/firebaseConfig';
+import ProtectedRoute from './components/ProtectedRoute'
+import FirebaseAuthContext from './context/FirebaseAuthContext';
 
 const App = () => {
   const user = useSelector(selectUser);
@@ -44,6 +46,7 @@ const App = () => {
   }, []);
 
   return (
+    <FirebaseAuthContext>
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={user ? <UserHome /> : <Home />} />
@@ -52,13 +55,18 @@ const App = () => {
         <Route path="about" element={<About />} />
         <Route path="contact" element={<Contact />} />
         <Route path="team" element={<Team />} />
-        <Route path="profile" element={<Profile />} />
-        <Route path="library" element={<Library />} />
+
+        <Route element={<ProtectedRoute />}>
+            <Route path="profile" element={<Profile />} exact/>
+            <Route path="library" element={<Library />} exact/>
+        </Route>
+        
         <Route path="review" element={<Review />} />
         <Route path="user/:id" element={<PublicProfile />} />
         <Route path="*" element={<NoMatch />} />
       </Route>
     </Routes>
+    </FirebaseAuthContext>
   );
 };
 
@@ -68,7 +76,7 @@ const Layout = () => {
 
   return (
     <div>
-      <Nav />
+       <Nav />
       <Outlet />
       <Footer />
     </div>

src/components/ProtectedRoute.jsx

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import { Outlet, Navigate } from 'react-router-dom';
+
+import { AuthContext } from '../context/FirebaseAuthContext';
+
+export default function ProtectedRoute() {
+  const authValue = useContext(AuthContext);
+
+  if (authValue.userDataPresent) {
+    if (authValue.user == null) {
+      return <Navigate to="/login" />;
+    }
+    return <Outlet />;
+  }
+  return null;
+}

src/context/FirebaseAuthContext.jsx

@@ -0,0 +1,42 @@
+import React, { createContext, useState, useEffect } from 'react';
+import { auth, onAuthStateChanged } from '../services/firebaseConfig';
+
+export const AuthContext = createContext({
+  userDataPresent: false,
+  user: null,
+});
+
+export default function FirebaseAuthContext({ children }) {
+  const [state, SetState] = useState({
+    userDataPresent: false,
+    user: null,
+    listener: null,
+  });
+
+  useEffect(() => {
+    if (state.listener == null) {
+      SetState({
+        ...state,
+        listener: onAuthStateChanged(auth, (currentUser) => {
+          if (currentUser)
+            SetState((oldState) => ({
+              ...oldState,
+              userDataPresent: true,
+              user: currentUser,
+            }));
+          else
+            SetState((oldState) => ({
+              ...oldState,
+              userDataPresent: true,
+              user: null,
+            }));
+        }),
+      });
+    }
+    return () => {
+      if (state.listener) state.listener();
+    };
+  }, []);
+
+  return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>;
+}

yarn.lock

@@ -3631,16 +3631,11 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
   version "1.0.30001429"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz"
   integrity sha512-511ThLu1hF+5RRRt0zYCf2U2yRr9GPF6m5y90SBCWsvSoYoW7yAGlv/elyPaNfvGCkp6kj/KFZWU0BMA69Prsg==
 
-caniuse-lite@^1.0.30001426:
-  version "1.0.30001431"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795"
-  integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==
-
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz"
@@ -8354,7 +8349,7 @@ postcss@^7.0.35:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.5, postcss@^8.4.17, postcss@^8.4.4, postcss@^8.4.7:
+postcss@^8.3.5, postcss@^8.4.17, postcss@^8.4.18, postcss@^8.4.4, postcss@^8.4.7:
   version "8.4.18"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz"
   integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
@@ -8363,15 +8358,6 @@ postcss@^8.3.5, postcss@^8.4.17, postcss@^8.4.4, postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.18:
-  version "8.4.19"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
-  integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
-  dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -9626,7 +9612,7 @@ symbol-tree@^3.2.4:
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tailwindcss@^3.0.2:
+tailwindcss@^3.0.2, tailwindcss@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.1.tgz"
   integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
@@ -9655,35 +9641,6 @@ tailwindcss@^3.0.2:
     quick-lru "^5.1.1"
     resolve "^1.22.1"
 
-tailwindcss@^3.2.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.2.tgz#705f78cec8f4de2feb52abdb7a8a056e67f2d736"
-  integrity sha512-c2GtSdqg+harR4QeoTmex0Ngfg8IIHNeLQH5yr2B9uZbZR1Xt1rYbjWOWTcj3YLTZhrmZnPowoQDbSRFyZHQ5Q==
-  dependencies:
-    arg "^5.0.2"
-    chokidar "^3.5.3"
-    color-name "^1.1.4"
-    detective "^5.2.1"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.2.12"
-    glob-parent "^6.0.2"
-    is-glob "^4.0.3"
-    lilconfig "^2.0.6"
-    micromatch "^4.0.5"
-    normalize-path "^3.0.0"
-    object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.18"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "6.0.0"
-    postcss-selector-parser "^6.0.10"
-    postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
-
 tapable@^1.0.0:
   version "1.1.3"
   resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"