add private route

src/router/PrivateRoute.tsx

@@ -0,0 +1,48 @@
+import React, {FC} from 'react';
+// Routing
+import {Route, Redirect} from 'react-router-dom';
+import * as ROUTES from '../constants/routes';
+// Redux
+import {isLoaded, isEmpty} from 'react-redux-firebase';
+import {useSelector} from 'react-redux';
+import {RootState} from '../store';
+
+interface IProps {
+  exact?: boolean;
+  path: string;
+  component: React.FC<any>;
+}
+/**
+ * Redirects to the login screen if you're not authenticated yet or
+ * if auth is not loaded yet
+ */
+const PrivateRoute: FC<IProps> = ({
+  component: Component,
+  exact,
+  path,
+  ...rest
+}) => {
+  const auth = useSelector((state: RootState) => state.firebase.auth);
+  return (
+    <Route
+      exact={exact}
+      path={path}
+      {...rest}
+      render={({location, ...rest}) =>
+        isLoaded(auth) && !isEmpty(auth) ? (
+          <Component {...rest} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: ROUTES.SIGN_IN,
+              state: {from: location},
+            }}
+          />
+        )
+      }
+    />
+  );
+};
+
+/** subscribe to store and firebase */
+export default PrivateRoute;

src/router/Router.tsx

@@ -13,6 +13,7 @@ import PostPage from '../pages/Post';
 import Posts from '../pages/Posts';
 import NotFound from '../pages/NotFound';
 import * as ROUTES from '../constants/routes';
+import PrivateRoute from './PrivateRoute';
 
 /** Register navigation paths accessible */
 const Router: FC = () => (
@@ -22,13 +23,16 @@ const Router: FC = () => (
     <Route exact path={ROUTES.SIGN_IN} component={SignIn} />
     <Route exact path={ROUTES.DEVELOPERS} component={Developers} />
     <Route exact path={ROUTES.PROFILE} component={Profile} />
-    <Route exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
+    <PrivateRoute exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
-    <Route exact path={ROUTES.DASHBOARD} component={Dashboard} />
+    <PrivateRoute exact path={ROUTES.DASHBOARD} component={Dashboard} />
-    <Route exact path={ROUTES.ADD_EXPERIENCE} component={AddExperience} />
+    <PrivateRoute
-    <Route exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
+      exact
-    <Route exact path={ROUTES.POST} component={PostPage} />
+      path={ROUTES.ADD_EXPERIENCE}
-    <Route exact path={ROUTES.POSTS} component={Posts} />
+      component={AddExperience}
-    <Route exact path={ROUTES.POSTS} component={Posts} />
+    />
+    <PrivateRoute exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
+    <PrivateRoute exact path={ROUTES.POST} component={PostPage} />
+    <PrivateRoute exact path={ROUTES.POSTS} component={Posts} />
     <Route component={NotFound} />
   </Switch>
 );