feat(app-auth): add PrivateRoute and initialization hook

packages/game-app/src/App.tsx

@@ -1,18 +1,23 @@
 import React from 'react';
 import {Redirect, Route, Switch} from 'react-router-dom';
-import {RoutingPath} from "@pipeline/routing";
+import {PrivateRoute, RoutingPath} from "@pipeline/routing";
+import { useBootstrapIsFinished } from './_shared';
 
 function App() {
 
-  return (
+  const bootstrapIsFinished = useBootstrapIsFinished();  
+
+  return bootstrapIsFinished ? (
     <Switch>
       <Route path={RoutingPath.Login} render={() => <div>Login</div>}/>
       <Route path={RoutingPath.Signup} render={() => <div>Signup</div>}/>
-      <Route path={RoutingPath.Dashboard} render={() => <div>Dashboard</div>}/>
+      <PrivateRoute path={RoutingPath.Dashboard} render={() => <div>Dashboard</div>}/>
       <Route path="*">
         <Redirect to={RoutingPath.Signup}/>
       </Route>
     </Switch>
+  ) : (
+    <div>LOADING ...</div>
   );
 }
 

packages/game-app/src/_shared/auth/index.ts

@@ -1,4 +1,4 @@
-import { reducer, actions, name } from "./slice";
+import { reducer, actions, name, selectors } from "./slice";
 import saga from "./saga";
 
-export { reducer, actions, name, saga };
+export { reducer, actions, name, saga, selectors };

packages/game-app/src/_shared/index.ts

@@ -3,7 +3,8 @@ import CONFIG from "@pipeline/app-config";
 import firebase from "firebase/app";
 import "firebase/analytics";
 import { initializeI18n } from "./i18n";
-import { actions as authActions } from "./auth";
+import { actions as authActions, selectors as authSelectors } from "./auth";
+import { useSelector } from "react-redux";
 
 export function bootstrap() {
   initializeI18n();
@@ -26,3 +27,12 @@ export function bootstrap() {
 
   return store;
 }
+
+/**
+ * A hook that can be used to ensure that the asynchronous tasks of the initialization
+ * process are concluded.
+ */
+export function useBootstrapIsFinished() {
+  const isAuthInitialized = useSelector(authSelectors.isInitialized);
+  return isAuthInitialized;
+}

packages/game-app/src/_shared/routing/PrivateRoute.tsx

@@ -0,0 +1,24 @@
+import { selectors as authSelectors } from '@pipeline/auth';
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { RoutingPath } from '@pipeline/routing';
+
+type Props = React.ComponentProps<typeof Route>;
+
+/**
+ * A Route which is aware of the authentication status of the current user.
+ * If the user is not authenticated, it redirects to the SignUp Route.
+ * If the user is authenticated, it behaves like a standard Route component.
+ */
+const PrivateRoute: React.FC<Props> = (props) => {
+
+  const currentUser = useSelector(authSelectors.getCurrentUser);
+
+  return currentUser ? <Route {...props}/> : <Redirect to={RoutingPath.Signup}/>
+}
+
+
+PrivateRoute.displayName = 'PrivateRoute';
+
+export default PrivateRoute;

packages/game-app/src/_shared/routing/index.ts

@@ -1,5 +1,4 @@
 import { RoutingPath } from "./routingPath";
+import PrivateRoute from "./PrivateRoute";
 
-export {
-  RoutingPath
-}
+export { RoutingPath, PrivateRoute };