Fixes #80: Add guards so that only authenticated users can see the dashboard

Author: Abhishek-kumar09

src/Routes.js

@@ -11,18 +11,59 @@ import Register from './views/pages/register/Register';
 import CreateNewEvent from './components/CreateNewEvent';
 import Settings from './views/pages/settings/Settings';
 import LandingPage from './views/pages/HomeView/LandingPage';
+import AuthGuard from './components/auth/AuthGuard';
 
 const renderRoutes = () => (
   <Suspense fallback={<LoadingScreen />}>
     <Switch>
       <Route path="/" exact render={() => <LandingPage />} />
       <Route path="/register" exact render={() => <Register />} />
-      <Route path="/dashboard" exact render={() => <Navigation />} />
-      <Route path="/profile" exact render={() => <Profile />} />
+      <Route
+        path="/dashboard"
+        exact
+        render={() => (
+          <AuthGuard>
+            <Navigation />
+          </AuthGuard>
+        )}
+      />
+      <Route
+        path="/profile"
+        exact
+        render={() => (
+          <AuthGuard>
+            <Profile />
+          </AuthGuard>
+        )}
+      />
       <Route path="/events" exact render={() => <EventDefaultPage />} />
-      <Route path="/events/:eventID" exact render={() => <IndividualEvent />} />
-      <Route path="/createEvent" exact render={() => <CreateNewEvent />} />
-      <Route path="/settings" exact render={() => <Settings />} />
+      <Route
+        path="/events/:eventID"
+        exact
+        render={() => (
+          <AuthGuard>
+            <IndividualEvent />
+          </AuthGuard>
+        )}
+      />
+      <Route
+        path="/createEvent"
+        exact
+        render={() => (
+          <AuthGuard>
+            <CreateNewEvent />
+          </AuthGuard>
+        )}
+      />
+      <Route
+        path="/settings"
+        exact
+        render={() => (
+          <AuthGuard>
+            <Settings />
+          </AuthGuard>
+        )}
+      />
       <Route path="*" exact render={() => <Error404View />} />
     </Switch>
   </Suspense>

src/components/auth/Auth.js

@@ -15,6 +15,16 @@ function Auth({ children }) {
 
       authService.handleAuthentication();
       authService.firebase.auth().onAuthStateChanged(user => {
+        if (user) {
+          const userItems = JSON.stringify({
+            displayName: user.displayName,
+            photoURL: user.photoURL,
+            uid: user.uid
+          });
+          localStorage.setItem('causefolioUser', userItems);
+        } else {
+          localStorage.setItem('causefolioUser', user);
+        }
         dispatch(setUserData(user));
         user.getIdToken().then(token => {
           authService.setSession(token);

src/components/auth/AuthGuard.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { getLoggedUser } from 'src/services/authService';
 
 function AuthGuard({ children }) {
-  const account = useSelector(state => state.account);
+  const user = getLoggedUser();
 
-  if (!account.user) {
-    return <Redirect to="/login" />;
+  if (!user) {
+    return <Redirect to="/" />;
   }
 
   return children;

src/services/authService.js

@@ -122,3 +122,7 @@ export const signInWithGoogle = () => {
   provider.setCustomParameters({ prompt: 'select_account' });
   return firebase.auth().signInWithPopup(provider);
 };
+
+export const getLoggedUser = () => {
+  return JSON.parse(localStorage.getItem('causefolioUser'));
+};