frontend refactoring and work on auth pages #8

vaniri · 2021-03-07T05:25:52Z

Working on #5

I refactored some common parts of the login and signup pages out.
I noticed some differences between the spec you gave me and the original code, and changed what I could to closer match the spec.
I also implemented the authorization logic on the client side.

sina-jamshidi

A nice addition would also be a privateRoute type of component that wraps a regular route but checks if the user is logged in. That way if more pages are added to the app in the future, we don't have to manually check if the user is logged in each time.

sina-jamshidi · 2021-03-09T08:43:00Z

client/src/components/ButtonHeader.jsx

+
+const ButtonHeader = ({ href, questionText, buttonText, classes }) => {
+  return (
+    <Box p={1} alignSelf="flex-end" alignItems="center">


typically you will want to use Grid instead of Box (Grid is a wrapper for Box) to make your life easier because of the built-in flexbox

sina-jamshidi · 2021-03-09T08:44:57Z

client/src/components/useGreetingPagesStyle.js

+      marginTop: theme.spacing(1)
+    },
+    label: { fontSize: 19, color: "rgb(0,0,0,0.4)", paddingLeft: "5px" },
+    submit: {
+      margin: theme.spacing(3, 2, 2),
+      padding: 10,
+      width: 160,
+      height: 56,
+      borderRadius: 3,
+      marginTop: 49,
+      fontSize: 16,
+      backgroundColor: "#3a8dff",
+      fontWeight: "bold"
+    },
+    inputs: {
+      marginTop: ".8rem",
+      height: "2rem",
+      padding: "5px"
+    },


we have a variety of spacing types here.
theme.spacing, px, rem, and just integer pixels. It would be a good practice to make as much of it uniform as possible

sina-jamshidi · 2021-03-09T08:46:22Z

client/src/components/useHandleAuthorization.js

+    };
+
+    const redirect = () => {
+      const user = localStorage.getItem("user");


storing the user in localStorage will cause problems down the line. The idea behind using localStorage for things is to persist information between sessions. You shouldn't do that with user information. One example of a problem is if I sign in to multiple browsers, and change something in one browser, those changes will not be reflected in the second one.

sina-jamshidi · 2021-03-09T08:47:07Z

client/src/pages/Login.jsx

-    if (reason === "clickaway") return;
-    setOpen(false);
+  const login = async ({ email, password }) => {
+    const res = await fetch('http://localhost:3001/user/login', {


Because we have a proxy set up, you should be able to use relative paths /user/login

sina-jamshidi · 2021-03-09T08:51:59Z

client/src/pages/Login.jsx

+      localStorage.setItem("userId", userId);
+      localStorage.setItem("username", username);
+      localStorage.setItem("userImage", userImage);
+      localStorage.setItem("token", token);


We prefer using httpOnly cookies to localStorage, since it is less accessible

sina-jamshidi · 2021-03-09T08:52:21Z

client/src/pages/Login.jsx

+          <ButtonHeader
+            classes={classes}
+            href="/signup"
+            questionText="Don't have an account?"
+            buttonText="Create account"
+            />


Nice abstraction

sina-jamshidi · 2021-03-09T08:52:42Z

client/src/pages/Signup.jsx

+      localStorage.setItem("userId", userId);
+      localStorage.setItem("username", username);


see notes above

sina-jamshidi · 2021-03-09T08:54:07Z

client/src/pages/Dashboard.jsx

-  React.useEffect(() => {
-    const user = localStorage.getItem("user");
+  useEffect(() => {
+    const user = localStorage.getItem("token");


this variable should probably be called token or loggedIn. You also have to be careful. What if the token exists in localStorage but is expired?

emad-darabeh

Code needs some more organization. moving the logic of checking the user is logged in or not to the PrivateRoute and remove this logic from other components.

emad-darabeh · 2021-03-16T16:20:13Z

client/src/App.js

+  const [userId, setUserId] = useState("");
+  const [username, setUsername] = useState("");
+  const [userImage, setUserImage] = useState("");


Storing each field of the user information in its own state is not the best choice here, what if the user had 10 or 20 key/value pairs in it. Why not store an object of the user data

Great catch, thanks!

emad-darabeh · 2021-03-16T16:26:55Z

client/src/App.js

+
+  const refreshAuth = async () => {
+    const res = await fetch('/user/refresh', { method: 'POST' });
+
+    if (res.status === 200) {
+      const { username, userImage } = await res.json();
+      setSignedIn(true);
+      setUsername(username);
+      setUserImage(userImage);
+    } else {
+      setSignedIn(false);
+      history.push("/login");
+    }
+  };
+


Why not let the PrivateRoute handle the logic of check if the user is logged in or not. And also handle the logic of forwarding the user to a certain route if they are not logged in.

emad-darabeh · 2021-03-16T16:28:29Z

client/src/App.js

+  const logout = async () => {
+    await fetch('/user/logout', { method: 'POST' });
+
+    setLoggingOut(true);
+    try {
+      history.push('/login');
+    } finally {
+      setLoggingOut(false);
+      setSignedIn(false);
+    }
+  };


Let's move this logic to a more relevant component, perhaps the component that is responsible for logging out the user.

emad-darabeh · 2021-03-16T16:32:59Z

client/src/components/PrivateRoute.jsx

+
+const PrivateRoute = ({ component: Component, isSignedIn, refreshAuth, path, ...rest }) => {
+    return (
+        <Route
+            path={path}


This component could encapsulate the logic related to checking the user is logged in or not, and based on that forwarding the user to a certain route.

emad-darabeh · 2021-03-16T16:41:16Z

client/src/components/useGreetingPagesStyle.js

+      bgcolor: "background.paper",
+      // minHeight: "100vh",


Let's not leave commented-out code in PRs, you can always get code from old commits.

That accidentally slipped in, will remove indeed!

emad-darabeh

The code is a lot cleaner than it was before. be careful bout edge cases that cause lots of render or unnecessary requests.

emad-darabeh · 2021-03-17T17:34:30Z

client/src/pages/Login.jsx

-                  Welcome back!
+              <p className={classes.welcome} component="h1" variant="h5">
+                Welcome back!
                </p>


Let's use Material UI's Typography instead of p and h tags

emad-darabeh · 2021-03-17T17:44:36Z

client/src/pages/Login.jsx

+import { useEffect } from "react";
+import { Button, CssBaseline, TextField, Paper, Grid, Typography } from "@material-ui/core";
 import { Formik } from "formik";


great way of using destructuring

emad-darabeh · 2021-03-17T17:48:02Z

client/src/pages/Login.jsx

+    } else if (res.status === 401) {
+      throw new Error("Invalid password");
+    } else if (res.status !== 200) {


It's better from a security perspective not to point out what the user did wrong when they are trying to login.
So a more generic message saying wrong credentials would be better.

emad-darabeh · 2021-03-17T17:59:12Z

client/src/components/PrivateRoute.jsx

+            setSignedIn(false);
+            history.push("/login");


We should also empty the local storage from any flag that indicates that the user is authenticated if this fails

After my last changed we don't use local storage anymore, so this should be good!

emad-darabeh · 2021-03-17T18:02:58Z

client/src/App.js

-      </BrowserRouter>
+      <Route path="/login" component={Login} />
+      <Route path="/signup" component={Signup} />
+      <PrivateRoute path="/dashboard" component={Dashboard} />
+      <Route exact path="/">
+        <Redirect to="/signup" />
+      </Route>


We need a way to make sure an authenticated user does not get back to signup or login pages unless they logout.

bonnieli · 2021-03-17T18:24:20Z

client/src/components/GreetingSideBar.jsx

+
+const GreetingSideBar = ({ classes }) => {
+    return (
+        <Grid item xs={false} sm={4} md={5} className={classes.image}>


Looks like some spacing issues here, do you happen to use a linter? It would probably make these issues much more easy in the future :)

bonnieli · 2021-03-17T18:26:16Z

client/src/components/SnackBar.jsx

+            onClose={handleClose}
+            message={message}
+            action={
+            <React.Fragment>


hm do you need this extra React.Fragment wrapping wrong IconButton?

Great catch! We don't need it here!

bonnieli · 2021-03-17T18:27:15Z

client/src/components/PrivateRoute.jsx

+
+        if (res.status === 200) {
+            setSignedIn(true);
+            setUserInfo(await res.json());


better to pull out await res.json() in it's own line of code

frontend refactoring and work on auth pages

124cc5e

vaniri requested review from bonnieli and sina-jamshidi March 7, 2021 05:25

sina-jamshidi reviewed Mar 9, 2021

View reviewed changes

vaniri added 2 commits March 10, 2021 12:31

addressed some pr comments

67dd9c6

change auth to rely on PrivateRoute and cookies

b288301

emad-darabeh reviewed Mar 16, 2021

View reviewed changes

addressed pr comments

1c71523

emad-darabeh reviewed Mar 17, 2021

View reviewed changes

bonnieli approved these changes Mar 17, 2021

View reviewed changes

addressed pr comments

f88af16

vaniri merged commit 1d11a98 into master Mar 18, 2021

vaniri deleted the frontend_auth_pages branch March 18, 2021 18:42

This was referenced Mar 18, 2021

Front-end: Signup / Login Pages (Refactor) #5

Closed

Integration: Signup / Login Pages #2

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

frontend refactoring and work on auth pages #8

frontend refactoring and work on auth pages #8

vaniri commented Mar 7, 2021

sina-jamshidi left a comment

sina-jamshidi Mar 9, 2021

sina-jamshidi Mar 9, 2021

sina-jamshidi Mar 9, 2021

sina-jamshidi Mar 9, 2021

sina-jamshidi Mar 9, 2021

sina-jamshidi Mar 9, 2021

sina-jamshidi Mar 9, 2021

sina-jamshidi Mar 9, 2021

emad-darabeh left a comment

emad-darabeh Mar 16, 2021

vaniri Mar 16, 2021

emad-darabeh Mar 16, 2021

emad-darabeh Mar 16, 2021

emad-darabeh Mar 16, 2021

emad-darabeh Mar 16, 2021

vaniri Mar 16, 2021

emad-darabeh left a comment

emad-darabeh Mar 17, 2021

emad-darabeh Mar 17, 2021

emad-darabeh Mar 17, 2021

emad-darabeh Mar 17, 2021

vaniri Mar 17, 2021

emad-darabeh Mar 17, 2021

bonnieli Mar 17, 2021

bonnieli Mar 17, 2021

vaniri Mar 17, 2021

bonnieli Mar 17, 2021

		localStorage.setItem("userId", userId);
		localStorage.setItem("username", username);

frontend refactoring and work on auth pages #8

frontend refactoring and work on auth pages #8

Conversation

vaniri commented Mar 7, 2021

sina-jamshidi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emad-darabeh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emad-darabeh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment