Use token var instead of signedIn or user

src/components/Routes/ProtectedRoute.jsx

@@ -3,8 +3,8 @@ import { Redirect, Route } from 'react-router-dom';
 import { useUserContext }  from '../Contexts/UserContext';
 
 export const ProtectedRoute = ({ render, ...others }) => {
-    const { user, setError } = useUserContext();
-    if (!user || !user.sub || user.sub.length === 0) {
+    const { token, setError } = useUserContext();
+    if (!token) {
         setError('Please sign in to access');
         return <Redirect to="/" />;
     }

src/components/SignInForm/index.jsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { Avatar, Button, Container, CssBaseline, Grid, Link, TextField, Typography } from '@material-ui/core';
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import { Button, Container, CssBaseline, Grid, Link, TextField, Typography } from '@material-ui/core';
 import { useUserContext }  from '../Contexts/UserContext';
 import useStyles from '../Styles';
 
@@ -16,8 +15,10 @@ export default function SignInForm() {
         const username = emailEl.current.value;
         const password = passwordEl.current.value;
         const result = await signIn(username, password);
+        debugger;
       }
       catch (e) {
+        debugger;
         setError(e.message);
       }
     };
@@ -26,9 +27,6 @@ export default function SignInForm() {
       <Container component="main" maxWidth="xs">
         <CssBaseline />
         <div className={classes.paper}>
-          <Avatar className={classes.avatar}>
-            <LockOutlinedIcon />
-          </Avatar>
           <Typography component="h1" variant="h5">
             Sign in
           </Typography>
@@ -66,7 +64,7 @@ export default function SignInForm() {
               className={classes.submit}
               onClick={onSubmit}
             >
-              Sign In
+              { fetching ? "Signing In..." : "Sign In" }
             </Button>
             <Grid container>
               <Grid item>

src/components/SignUpForm/index.jsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { Avatar, Button, Container, CssBaseline, Grid, Link, TextField, Typography } from '@material-ui/core';
-import LockOpenOutlinedIcon from '@material-ui/icons/LockOpenOutlined';
+import { Button, Container, CssBaseline, Grid, Link, TextField, Typography } from '@material-ui/core';
 import useStyles from '../Styles';
 import { useUserContext }  from '../Contexts/UserContext';
 
@@ -18,6 +17,7 @@ export default function SignInForm() {
         const password = passwordEl.current.value;
         const confirm = confirmEl.current.value;
         const result = await signUp(email, password, confirm);
+        debugger;
       }
       catch (e) {
         setError(e.message);
@@ -28,9 +28,6 @@ export default function SignInForm() {
       <Container component="main" maxWidth="xs">
         <CssBaseline />
         <div className={classes.paper}>
-          <Avatar className={classes.avatar}>
-            <LockOpenOutlinedIcon />
-          </Avatar>
           <Typography component="h1" variant="h5">
             Sign up
           </Typography>
@@ -78,7 +75,7 @@ export default function SignInForm() {
               className={classes.submit}
               disabled={fetching}
             >
-              Sign Up
+              { fetching ? "Signing Up..." : "Sign Up" }
             </Button>
             <Grid container>
               <Grid item>