Configure role setting context.

src/App.tsx

 import React, { FC, useEffect, useState } from 'react';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import { HomePage } from 'components/AuthUser/HomePage/HomePage';
 import { AuthUser } from 'components/AuthUser/AuthUser';
 import { LandingPage } from 'components/NonAuthUser/LandingPage/LandingPage';
 import { PrivateRoute } from 'api/PrivateRoute/PrivateRoute';
@@ -12,6 +11,9 @@ import { Roles } from 'api/userRoles';
 import { Unauthorized } from 'components/NonAuthUser/Unauthorized/Unauthorized';
 import axios from 'axios';
 import { ReservationPage } from 'components/AuthUser/ReservationPage/ReservationPage';
+import { HomePage } from 'components/AuthUser/HomePage/HomePage';
+import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
+import { AuthContext } from 'components/AuthUser/AuthContext';
 
 const theme = createMuiTheme({
   palette: {
@@ -49,6 +51,10 @@ const configDjangoCookieName = (): void => {
 
 export const App: FC = () => {
   const [isCookieFetched, setisCookieFetched] = useState<string>('');
+
+  const [role, setRole] = useState('');
+  const value = { role, setRole };
+
   configDjangoCookieName();
   useEffect(() => {
     const fetchCookie = async (): Promise<unknown> => {
@@ -67,18 +73,23 @@ export const App: FC = () => {
       <Router>
         <div data-testid="App">
           <Switch>
-            <Route path={NonAuthRoutes.auth} component={AuthUser} />
             <Route exact path={NonAuthRoutes.home} component={LandingPage} />
-            <PrivateRoute
-              path={AuthRoutes.dashboard}
-              Component={HomePage}
-              requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-            />
-            <PrivateRoute
-              path={AuthRoutes.profile}
-              Component={ProfilePage}
-              requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-            />
+            <AuthContext.Provider value={value}>
+              <Route exact path={NonAuthRoutes.auth} component={AuthUser} />
+
+              <Route exact path="/signIn" component={SignInForm} />
+
+              <PrivateRoute
+                path={AuthRoutes.dashboard}
+                Component={HomePage}
+                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+              />
+              <PrivateRoute
+                path={AuthRoutes.profile}
+                Component={ProfilePage}
+                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+              />
+            </AuthContext.Provider>
             <Route path={AuthRoutes.reservation} component={ReservationPage} />
             <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
             <Route component={NotFound} />

src/components/AuthUser/AuthContext.tsx

+import { createContext } from 'react';
+
+export type AuthData = {
+  role: string;
+  setRole: (role: string) => void;
+};
+
+export const AuthContext = createContext<AuthData>({
+  role: '',
+  setRole: () => {
+    // Do nothing
+  },
+});

src/components/AuthUser/Homepage/HomePage.tsx

-import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import {
-  CssBaseline,
-  Grid,
-  Typography,
-  Hidden,
-  createMuiTheme,
-  responsiveFontSizes,
-  MuiThemeProvider,
-  Container,
-} from '@material-ui/core';
-
-import { MapElement } from 'components/AuthUser/HomePage/MapElement';
-import { NavBar } from 'components/AuthUser/HomePage/NavBar';
-import { NavBarLogin } from 'components/AuthUser/HomePage/NavBarLogin';
-import { Steps } from 'components/AuthUser/HomePage/Steps';
-import { Reservation } from 'components/AuthUser/ReservationPage/Reservation/Reservation';
-import { Numbers } from 'components/AuthUser/HomePage/Numbers';
-
-let themeResp = createMuiTheme();
-themeResp = responsiveFontSizes(themeResp);
-
-const useStyles = makeStyles(() => ({
-  root: {
-    minHeight: '100vh',
-    backgroundImage: `url(${'/assets/bg3.png'})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  whiteText: {
-    color: 'white',
-  },
-  imageIcon: {
-    maxHeight: '50%',
-  },
-  paddingBottom: {
-    paddingBottom: '65px',
-  },
-  paddingTop: {
-    paddingTop: '65px',
-  },
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  contIcon: {
-    width: '100%',
-    left: '0',
-    right: '0',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-}));
-
-export const HomePage: FC = () => {
-  const classes = useStyles();
-
-  return (
-    <Grid container direction="column" className={classes.paddingBottom}>
-      <div className={classes.root}>
-        <CssBaseline />
-
-        <Grid item>
-          <NavBar />
-        </Grid>
-
-        <MuiThemeProvider theme={themeResp}>
-          <Grid item container className={classes.paddingBottom}>
-            <Grid item xs={1} md={2} lg={2} />
-
-            <Grid item xs={10} md={6} lg={4}>
-              <Typography variant="h2" className={classes.whiteText}>
-                Book Free Rides Now With
-              </Typography>
-              <Typography variant="h1" className={classes.whiteText}>
-                MOVE AID
-              </Typography>
-            </Grid>
-
-            <Grid item xs={false} md={3} lg={5}>
-              <Hidden mdDown>
-                <Container>
-                  <MapElement />
-                </Container>
-              </Hidden>
-            </Grid>
-
-            <Grid item xs={1} />
-          </Grid>
-
-          <Steps />
-        </MuiThemeProvider>
-      </div>
-
-      <Grid item container className={classes.paddingTop}>
-        <Grid item xs={2} />
-        <Grid item xs={8}>
-          <Typography variant="h3">Your Next Reservation</Typography>
-        </Grid>
-        <Grid item xs={2} />
-      </Grid>
-
-      <Grid item container style={{ paddingTop: '20px' }}>
-        <Grid item xs={1} lg={2} />
-        <Grid item xs={10} lg={8}>
-          <Reservation />
-        </Grid>
-        <Grid item xs={1} lg={2} />
-      </Grid>
-
-      <Grid item container className={classes.paddingTop}>
-        <Grid item xs={2} />
-        <Grid item xs={8}>
-          <Typography variant="h3" align="right">
-            Some Our Numbers
-          </Typography>
-        </Grid>
-        <Grid item xs={2} />
-      </Grid>
-
-      <Numbers />
-    </Grid>
-  );
-};