chore: add private route

src/App.tsx

@@ -1,14 +1,7 @@
-import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
+import { IonApp, IonSplitPane } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { Route } from 'react-router-dom';
 
-import Home from 'pages/Home';
-import Login from 'pages/auth/Login';
-import Register from 'pages/auth/Register';
-import About from 'pages/About';
-import EditProfile from 'pages/main/profile/EditProfile';
-
-import MainTabs from 'components/MainTabs';
+import Routes from 'components/routes/Routes';
 import SideMenu from 'components/SideMenu';
 
 /* Core CSS required for Ionic components to work properly */
@@ -36,14 +29,7 @@ const App: React.FC = () => (
     <IonReactRouter>
       <IonSplitPane contentId="main">
         <SideMenu />
-        <IonRouterOutlet id="main">
-          <Route exact path="/" component={Home} />
-          <Route path="/login" component={Login} />
-          <Route path="/register" component={Register} />
-          <Route path="/about" component={About} />
-          <Route path="/edit-profile" component={EditProfile} />
-          <Route path="/main" component={MainTabs} />
-        </IonRouterOutlet>
+        <Routes />
       </IonSplitPane>
     </IonReactRouter>
   </IonApp>

src/components/routes/PrivateRoute.tsx

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { AuthContext } from 'contexts/auth';
+
+const PrivateRoute: React.FC<any> = ({
+  component: RouteComponent,
+  ...rest
+}) => {
+  const { currentUser } = useContext(AuthContext);
+
+  return (
+    <Route
+      {...rest}
+      render={(routeProps) =>
+        currentUser ? <RouteComponent {...routeProps} /> : <Redirect to="/" />
+      }
+    />
+  );
+};
+
+export default PrivateRoute;

src/components/routes/Routes.tsx

@@ -0,0 +1,36 @@
+import { IonRouterOutlet } from '@ionic/react';
+import { AuthContext } from 'contexts/auth';
+import { useContext } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import PrivateRoute from './PrivateRoute';
+
+import Home from 'pages/Home';
+import About from 'pages/About';
+import Login from 'pages/auth/Login';
+import Register from 'pages/auth/Register';
+import EditProfile from 'pages/main/profile/EditProfile';
+
+import MainTabs from 'components/MainTabs';
+
+const Routes: React.FC = () => {
+  const { currentUser } = useContext(AuthContext);
+
+  return (
+    <IonRouterOutlet id="main">
+      <Route exact path="/" component={Home} />
+      <Route path="/login" component={Login} />
+      <Route path="/register" component={Register} />
+      <Route path="/about" component={About} />
+      <PrivateRoute path="/main" component={MainTabs} />
+      <PrivateRoute path="/edit-profile" component={EditProfile} />
+
+      {currentUser ? (
+        <Redirect exact from="/" to="/main" />
+      ) : (
+        <Redirect to="/" />
+      )}
+    </IonRouterOutlet>
+  );
+};
+
+export default Routes;