[AFP-97] ✨ Create AuthContext & useGoogleAuth to handle authenticaion state (@asegers)

src/hooks/useGoogleAuth.tsx

+
+import React from 'react'
+import { useGoogleLogin, useGoogleLogout } from 'react-google-login'
+import { useHistory } from 'react-router-dom'
+import { Manager } from 'Manager'
+const GoogleAuthContext = React.createContext<any>({});
+
+export const useGoogleAuth = () => React.useContext(GoogleAuthContext);
+export default useGoogleAuth;
+
+export const GoogleAuthProvider: React.FC = ({ children }) => {
+    const {push: historyPush} = useHistory();
+    const [isSignedIn, setIsSignedIn] = React.useState(false)
+    const [staySignedIn, setStaySignedIn] = React.useState(true)
+    const [manager, setManager] = React.useState<Manager | null>()
+    const [authError, setAuthError] = React.useState<String | null>()
+
+  const { signIn, loaded, } = useGoogleLogin({ 
+        clientId: (process.env.REACT_APP_GOOGLE_CLIENT_ID as string),
+        onSuccess: (res: any) => {
+            const {
+                email, 
+                familyName: lastName, 
+                givenName:firstName, 
+                googleId, 
+                imageUrl
+            } = res.profileObj;
+       
+            setManager(({
+                email,
+                firstName,
+                lastName,
+                googleId,
+                imageUrl
+            }))
+
+            // ManagerService.existByEmail(email) // GET api/managers/[email]
+            //     .then((exists: boolean) => {
+            //         if (exists) {
+            //             ManagerService.isLoggedin(email)
+            //         } else {
+            //            ManagerService.create([managerData])
+            //         }
+            //     }).finally(() => {
+                    setIsSignedIn(true);
+                    historyPush("/orders");
+            //     })
+ 
+         },
+        onFailure: (err) =>  { 
+            console.error("GOOGLE AUTH SIGN-IN ERROR: ", err) 
+            setAuthError(`Ooops. Something went wrong: ${err?.message}`);
+        },
+        isSignedIn: staySignedIn,
+        cookiePolicy: 'single_host_origin'
+    })
+
+    const { signOut } = useGoogleLogout({ 
+        clientId: (process.env.REACT_APP_GOOGLE_CLIENT_ID as string),
+        onLogoutSuccess: () =>  { 
+            setIsSignedIn(false);
+            historyPush("/") 
+        },
+        onFailure: () =>  { 
+            console.error("A GOOGLE AUTH SIGN-OUT ERROR OCCURED") 
+            setAuthError("Ooops. Something went wrong");
+        },
+     })
+
+    const authContextValues = {
+        authError,
+        isSignedIn,
+        loaded, 
+        setStaySignedIn,
+        signIn,
+        signOut,
+        staySignedIn,
+        manager
+    };
+
+  return <GoogleAuthContext.Provider value={authContextValues}>{children}</GoogleAuthContext.Provider>
+}

src/router/MainRouter.tsx

-import {
-    BrowserRouter,
-    Switch,
-    Route,
-  } from "react-router-dom";
-  import {Nav} from 'components'
+import { BrowserRouter, Switch } from "react-router-dom";
 
+import { Nav } from 'components'
 import { AccountPage, AuthPage, OrderIndexPage, OrderShowPage } from 'pages';
+import { GoogleAuthProvider } from 'hooks'
+import { PublicRoute, PrivateRoute } from 'router'
 
 const MainRouter: React.FC = () => {
     return (
         <BrowserRouter>
-            <Nav />
-            <Switch>
-                <Route path="/account" component={AccountPage} />
-                <Route exact path="/" component={AuthPage} />
-                <Route path="/orders/:id" component={OrderShowPage} />
-                <Route path="/orders" component={OrderIndexPage} />
-                {/* <Route component={NotFoundPage} /> */}
-            </Switch>
+            <GoogleAuthProvider>
+                <Nav />
+                <main>
+                    <Switch>
+                        <PrivateRoute path="/account" component={AccountPage} />
+                        <PublicRoute exact path="/" component={AuthPage} />
+                        <PrivateRoute path="/orders/:id" component={OrderShowPage} />
+                        <PrivateRoute path="/orders" component={OrderIndexPage} />
+                        {/* <Route component={NotFoundPage} /> */}
+                    </Switch>
+                </main>
+            </GoogleAuthProvider>
         </BrowserRouter>
     )
 }