some auth0 action

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^1.0.0",
     "@material-ui/core": "^4.10.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",

src/App.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import WordBoard from './training/WordBoard';
 import {
-  BrowserRouter as Router,
+  Router,
   Switch,
-  Route
+  Route,
+  RouteProps
 } from "react-router-dom";
 import  { ScrabbleLetter } from './components/Tile';
 import Header from './components/Header';
@@ -21,6 +22,8 @@ import Rereference from './reference/Reference';
 import { WordList } from './reference/wordLists';
 import { Stems } from './training/Stems/Stem';
 import StemList from './training/Stems/StemList';
+import { Auth0Provider, withAuthenticationRequired } from "@auth0/auth0-react";
+import { createBrowserHistory } from 'history';
 
 export const allLetters: ScrabbleLetter[] = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
 
@@ -43,45 +46,69 @@ class RoutePaths  {
   WordCheck = `${this.Reference}/WordCheck`;
   WordList = `${this.Reference}/WordList`;
   StemList = `${this.Training}/bingostems`;
+  Login = "/login"
   Stem = (word: string, letter: string) => `${this.StemList}/${word}/${letter}`;
-  TwoLetterWords = (letter: ScrabbleLetter) => `${this.Training}/2LetterWords/${letter}`;
-  ThreeLetterWords = (letter: ScrabbleLetter) => `${this.Training}/3LetterWords/${letter}`;
+  SmallWordsTraining = (letter: ScrabbleLetter, numberOfLetters: number) => `${this.Training}/${numberOfLetters}LetterWords/${letter}`;
+}
 
+interface loginProps {
+  url: string
 }
+
+const onRedirectCallback = (appState: any) => {
+  // Use the router's history module to replace the url
+  console.table(appState)
+  history.replace(appState?.returnTo || window.location.pathname);
+};
+
+
 export const Routes = new RoutePaths()
 
+const ProtectedRoute = ({ component, ...args }: RouteProps) => {
+  return <Route component={withAuthenticationRequired(component as ComponentType<any>)} {...args} />
+};
+
+export const history = createBrowserHistory();
+
 function App() {
   const classes = useStyles();
 
   return (
     <>
-    <Router>
-      <SettingsProvider>
-        <ThemeProvider theme={theme}>
-          <NavControlProvder>
-            <div className={classes.root}>
-            <Header />
-            <SideDrawer />
-              <main className={classes.content}>
-                <Toolbar />
-                      <Switch> 
-                        <Route path="/Training/2LetterWords/:letter([A-Z]{1})" render={(props) => <WordBoard numberOfLetters={2} {...props}></WordBoard>} />
-                        <Route path="/Training/3LetterWords/:letter([A-Z]{1})" render={(props) => <WordBoard numberOfLetters={3} {...props}></WordBoard>} />  
-                        <Route path="/Training/bingostems/:word([A-Z]{1,})/:letter([A-Z,_]{1})" render={(props) => <Stems {...props}></Stems>} />  
-                        <Route path={Routes.Anagram} component={Anagram} /> 
-                        <Route path={Routes.WordCheck} component={WordCheck} /> 
-                        <Route path={Routes.WordList} component={WordList} /> 
-                        <Route path={Routes.Reference} component={Rereference} /> 
-                        <Route path={Routes.StemList} component={StemList} />
-                        <Route path={Routes.Training} component={Training} />
-                        <Route path={Routes.Settings} component={Settings} />
-                        <Route path="/"  component={Home} />
-                    </Switch>
-            </main>  
-            </div>
-          </NavControlProvder>
-        </ThemeProvider>
-      </SettingsProvider>
+    <Router history={history}>
+      <Auth0Provider
+      domain="dev-27tyxhab.eu.auth0.com"
+      clientId="y2XbuFg12IbbEcroXB4NAUjO03EuXN4M"
+      redirectUri={window.location.origin}
+      onRedirectCallback={onRedirectCallback}
+    >
+        <SettingsProvider>
+          <ThemeProvider theme={theme}>
+            <NavControlProvder>
+              <div className={classes.root}>
+              <Header />
+              <SideDrawer />
+                <main className={classes.content}>
+                  <Toolbar />
+                        <Switch> 
+
+                          <Route path={Routes.Anagram} component={Anagram} /> 
+                          <Route path={Routes.WordCheck} component={WordCheck} /> 
+                          <Route path={Routes.WordList} component={WordList} /> 
+                          <Route path={Routes.Reference} component={Rereference} /> 
+                          <ProtectedRoute path="/Training/:numberOfLetters([1,2])LetterWords/:letter([A-Z]{1})"component={WordBoard} />
+                          <ProtectedRoute path="/Training/bingostems/:word([A-Z]{1,})/:letter([A-Z,_]{1})" component={Stems} />  
+                          <ProtectedRoute path={Routes.StemList} component={StemList} />
+                          <ProtectedRoute path={Routes.Training} component={Training} />
+                          <Route path={Routes.Settings} component={Settings} />
+                          <Route path="/"  component={Home} />
+                      </Switch>
+              </main>  
+              </div>
+            </NavControlProvder>
+          </ThemeProvider>
+        </SettingsProvider>
+      </Auth0Provider>
     </Router>
     </>
   );

src/components/Header.tsx

@@ -1,37 +1,90 @@
 import React from 'react';
-import { Toolbar, AppBar, IconButton, Typography,  Theme } from '@material-ui/core';
+import { Toolbar, AppBar, IconButton, Typography,  Theme, Button, Menu, MenuItem } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
 import Tile from './Tile';
 import { useNavControl } from '../navbar/navbar';
+import { useAuth0 } from '@auth0/auth0-react';
+import AccountCircle from '@material-ui/icons/AccountCircle';
 
 const useStyles = makeStyles((theme: Theme) => ({
   appBar: {
     boxShadow: "none",
-    zIndex: theme.zIndex.drawer + 300,
+    zIndex: theme.zIndex.drawer + 1,
   },
   title: {
     color: theme.palette.common.white,
     fontFamily: "'Caveat', cursive"
   },
   tile: {
     transform: "rotate(8deg)",
-    boxShadow: "none"
-  }
+    boxShadow: "none",
+    alignSelf: "center"
+  },
+  logo: {
+    flexGrow: 1,
+    display: "flex"
+  },
 }));
 
 
 
 const Header = () => {
   const classes = useStyles();
+  const { loginWithRedirect, isAuthenticated, logout  } = useAuth0();
   const [, toggleOpen] = useNavControl()
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const appState = {
+    returnTo: window.location.pathname
+  }
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
     return (<AppBar position="fixed" className={classes.appBar}>
     <Toolbar>
         { <IconButton edge="start" color="inherit" aria-label="menu" onClick={toggleOpen}>
                   <MenuIcon  />
         </IconButton> }
-        <Tile letter="S" selected={false} className={classes.tile} /><Typography variant="h4" component="h4" className={classes.title}>crabble Trainer</Typography> 
+        <div className={classes.logo}><Tile letter="S" selected={false} className={classes.tile} /><Typography variant="h4" component="h4" className={classes.title}>crabble Trainer</Typography></div>
+        { !isAuthenticated ?
+        <Button color="inherit" onClick={() => loginWithRedirect({appState})}>Login</Button>
+        :  <div>
+        <IconButton
+          aria-label="account of current user"
+          aria-controls="menu-appbar"
+          aria-haspopup="true"
+          onClick={handleMenu}
+          color="inherit"
+        >
+          <AccountCircle />
+        </IconButton>
+        <Menu
+          id="menu-appbar"
+          anchorEl={anchorEl}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          keepMounted
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right',
+          }}
+          open={open}
+          onClose={handleClose}
+        >
+          <MenuItem onClick={() => logout()}>Logout</MenuItem>
+        </Menu>
+      </div>
+}
     </Toolbar>
   </AppBar>);
 }

src/components/drawer.tsx

@@ -70,11 +70,13 @@ export const SideDrawer: FunctionComponent =  ({ children }) => {
   <>
   <Drawer
     className={classes.drawer}
+    ModalProps= {{style: {zIndex: 1199}}}
     variant={width && location.pathname !== "/" ? "permanent" : "temporary"}
     anchor={width ? "left" : location.pathname  === "/" && width ? "left" : "top"}
     classes={{ paper: classes.drawerPaper }}
     open={!open}
     onClick={maybeToggleOpen}
+
   >
     <Toolbar />
     <div className={classes.drawerContainer}>
@@ -95,14 +97,14 @@ export const SideDrawer: FunctionComponent =  ({ children }) => {
         {itemOpen ? <ExpandLess className={classes.listFoo} /> : <ExpandMore className={classes.listFoo} />}
       </ListItem>
       <Collapse in={itemOpen} timeout="auto" unmountOnExit>
-        <LetterGrid onClick={(l) => () => history.push(Routes.TwoLetterWords(l))} size="Small" />
+        <LetterGrid onClick={(l) => () => history.push(Routes.SmallWordsTraining(l, 2))} size="Small" />
       </Collapse>
       <ListItem button onClick={(e) => childNavEvent(e, () => setItemOpen2(!itemOpen2))}>
         <ListItemText secondary="3-Letter Words" color="textSecondary" />
         {itemOpen2 ? <ExpandLess className={classes.listFoo} /> : <ExpandMore className={classes.listFoo} />}
       </ListItem>
       <Collapse in={itemOpen2} timeout="auto" unmountOnExit>
-        <LetterGrid onClick={(l) => () => history.push(Routes.ThreeLetterWords(l))} size="Small" />
+        <LetterGrid onClick={(l) => () => history.push(Routes.SmallWordsTraining(l, 3))} size="Small" />
       </Collapse>
       <ListItem className={classes.clickable} onClick={() => history.push(Routes.StemList)}>
           <ListItemText secondary={"Bingo Stems"}> </ListItemText>

src/training/Training.tsx

@@ -28,11 +28,11 @@ export const Training = () => {
       <ScrabbleCard className={classes.item} title={"Two Letter Words"}
       subheader={"Test your knowledge of valid two letter words"}
       avatar = {<Typography variant='h4' component='h5' color='inherit'>2</Typography>}
-      content = {<LetterGrid onClick={(l) => () => history.push(Routes.TwoLetterWords(l))} />}/>
+      content = {<LetterGrid onClick={(l) => () => history.push(Routes.SmallWordsTraining(l, 2))} />}/>
             <ScrabbleCard title={"Three Letter Words"} className={classes.item}
       subheader={"Test your knowledge of valid three letter words"}
       avatar = {<Typography variant='h4' component='h5' color='inherit'>3</Typography>}
-    content = {<LetterGrid onClick={(l) => () => history.push(Routes.ThreeLetterWords(l))} />}  />
+    content = {<LetterGrid onClick={(l) => () => history.push(Routes.SmallWordsTraining(l, 3))} />}  />
       <ScrabbleCard className={classes.item} title={"Bingo Stems"}
       subheader={"Test your bingo stem skills"}
       avatar = {<Typography variant='h4' component='h5' color='inherit'>S</Typography>}