Merge pull request #132 from webdev-20/refactor/auth

Fix auth, add localstorage usage for auth, rename register to signup to be consistent, and match the design

Author: cherylli

client/cypress/e2e/shorti_app.cy.js

@@ -11,11 +11,11 @@ describe('Shorti App', () => {
       cy.visit('/');
       cy.get('#urlInput').should('be.visible');
 
-      // TODO: logout should be visible if logged in ( login register, should not be visible)
+      // TODO: logout should be visible if logged in ( login signup, should not be visible)
     });
 
     it('Login and Sign Up buttons when not logged in', function () {
-      // TODO: login and register should be visible if not logged in
+      // TODO: login and signup should be visible if not logged in
       cy.contains('Login').should('be.visible');
       cy.contains('Sign Up').should('be.visible');
       cy.contains('Log Out').should('not.exist');
@@ -46,7 +46,7 @@ describe('Shorti App', () => {
   });
 
   describe('authentication', () => {
-    it('user can register', () => {
+    it('user can signup', () => {
       cy.visit('/');
       cy.contains('Sign Up').click();
       cy.intercept('POST', '**/api/users/signup', (req) => {
@@ -60,7 +60,7 @@ describe('Shorti App', () => {
       cy.get('button[type="submit"]').click();
       cy.contains('p', 'Sign up successful.').should('be.visible');
 
-      cy.wait('@register')
+      cy.wait('@signup')
         .its('response')
         .should('deep.include', {
           statusCode: 200,
@@ -72,7 +72,7 @@ describe('Shorti App', () => {
         });
     });
 
-    it('user cannot register with existing username', () => {
+    it('user cannot signup with existing username', () => {
       cy.visit('/');
       cy.contains('Sign Up').click();
       cy.intercept('POST', '**/api/users/signup', (req) => {
@@ -85,7 +85,7 @@ describe('Shorti App', () => {
       cy.get('input[name="confirmPassword"]').type(password);
       cy.get('button[type="submit"]').click();
 
-      cy.wait('@register')
+      cy.wait('@signup')
         .its('response')
         .should('deep.include', {
           statusCode: 409,
@@ -99,7 +99,7 @@ describe('Shorti App', () => {
       cy.contains('p', 'Account with that email address already exists.').should('be.visible');
     });
 
-    it('user cannot register with an invalid email', () => {
+    it('user cannot signup with an invalid email', () => {
       cy.visit('/');
       cy.contains('Sign Up').click();
       cy.intercept('POST', '**/api/users/signup', (req) => {
@@ -112,7 +112,7 @@ describe('Shorti App', () => {
       cy.get('input[name="confirmPassword"]').type(password);
       cy.get('button[type="submit"]').click();
 
-      cy.wait('@register')
+      cy.wait('@signup')
         .its('response')
         .should('deep.include', {
           statusCode: 400,
@@ -126,7 +126,7 @@ describe('Shorti App', () => {
       cy.contains('p', 'Please enter a valid email address.').should('be.visible');
     });
 
-    it('user cannot register with an invalid password', () => {
+    it('user cannot signup with an invalid password', () => {
       cy.visit('/');
       cy.contains('Sign Up').click();
 

client/src/App.jsx

@@ -2,37 +2,36 @@ import { Route, Routes } from 'react-router-dom';
 
 import './App.css';
 import { LinksProvider } from './context/links';
-import HomePage from './routes/HomePage';
 import RedirectTo from './routes/RedirectTo.jsx';
 import LandingPage from './routes/LandingPage.jsx';
 import NotFoundPage from './routes/NotFound';
 import LoginPage from './routes/LoginPage';
-import RegisterPage from './routes/RegisterPage.jsx';
-import { AuthProvider } from './context/AuthProvider';
+import SignupPage from './routes/SignupPage.jsx';
+import { AuthContextProvider } from './context/AuthProvider';
 import Layout from './components/Layout/Layout.jsx';
 import RequireAuth from './components/Auth/RequireAuth';
 
 function App() {
   return (
-    <AuthProvider>
+    <AuthContextProvider>
       <LinksProvider>
         <Routes>
           <Route path=":short" element={<RedirectTo />} />
           <Route path="/" element={<Layout />}>
             {/* public routes */}
             <Route path="/" element={<LandingPage />} />
             <Route path="login" element={<LoginPage />} />
-            <Route path="register" element={<RegisterPage />} />
+            <Route path="signup" element={<SignupPage />} />
             {/* private routes */}
             <Route element={<RequireAuth />}>
-              <Route path="home" element={<HomePage />} />
+              <Route path="home" element={<LandingPage />} />
             </Route>
             {/* catch all */}
             <Route path="*" element={<NotFoundPage />} />
           </Route>
         </Routes>
       </LinksProvider>
-    </AuthProvider>
+    </AuthContextProvider>
   );
 }
 

client/src/components/Auth/LoginForm.jsx

@@ -1,21 +1,23 @@
 import { useState } from 'react';
 import { login } from '../../services/auth.js';
-import useAuth from '../../hooks/useAuth.js';
+// import useAuth from '../../hooks/useAuth.js';
 import { useNavigate, useLocation } from 'react-router-dom';
+import { useLogin } from '../../hooks/useLogin.js';
 
 const LoginForm = () => {
-  const { setAuth } = useAuth();
+  // const { setAuth } = useAuth();
 
   const navigate = useNavigate();
   const location = useLocation();
   const from = location.state?.from.pathname || '/';
 
   const [state, setState] = useState({
-    email: '',
-    password: '',
+    email: '[email protected]',
+    password: 'password',
   });
   const [message, setMessage] = useState(null);
   //const [success, setSuccess] = useState(false);
+  const { login, error, isLoading } = useLogin();
 
   const handleChange = (e) => {
     setState({
@@ -28,20 +30,6 @@ const LoginForm = () => {
     e.preventDefault();
     try {
       const res = await login(state);
-
-      setMessage(res?.message);
-      if (res.success) {
-        setAuth({
-          user: state.email,
-          password: state.password,
-          token: res.token,
-        });
-        setState({
-          email: '',
-          password: '',
-        });
-        navigate(from, { replace: true });
-      }
     } catch (e) {
       // other errors not catched by services/auth/login
       console.error(`Login Error: ${e}`);
@@ -75,12 +63,12 @@ const LoginForm = () => {
           required
         />
         <br />
-        <button type="submit" onClick={handleSubmit}>
+        <button disabled={isLoading} type="submit" onClick={handleSubmit}>
           Login
         </button>
         <br />
       </form>
-      {message && <p>{message}</p>}
+      {error && <p>{error}</p>}
     </>
   );
 };

client/src/components/Auth/RequireAuth.jsx

@@ -1,8 +1,8 @@
 import { useLocation, Navigate, Outlet } from 'react-router-dom';
-import useAuth from '../../hooks/useAuth.js';
+// import useAuth from '../../hooks/useAuth.js';
 
 const RequiredAuth = () => {
-  const { auth } = useAuth();
+  // const { auth } = useAuth();
   const location = useLocation();
   return auth?.user ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
 };

client/src/components/Auth/RegisterForm.jsx renamed to client/src/components/Auth/SignupForm.jsx

@@ -1,29 +1,33 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { register } from '../../services/auth.js';
+import { useSignup } from '../../hooks/useSignup.js';
 
-const RegisterForm = () => {
+const SignupForm = () => {
   const [state, setState] = useState({
-    email: '',
-    password: '',
-    confirmPassword: '',
+    email: '[email protected]',
+    password: 'password',
+    confirmPassword: 'password',
   });
-  const [message, setMessage] = useState(null);
+  const { signup, error, isLoading } = useSignup();
+  const [showError, setShowError] = useState(false);
   const [success, setSuccess] = useState(false);
 
   const handleChange = (e) => {
     setState({
       ...state,
       [e.target.name]: e.target.value,
     });
+    setShowError(false);
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    const res = await register(state);
+    setShowError(true);
+    await signup(state);
+
     // res.success = true/false, which can be used for styling error messages
-    setMessage(res.message);
-    setSuccess(res.success);
+    // setMessage(res.message);
+    // setSuccess(res.success);
   };
 
   return (
@@ -69,13 +73,13 @@ const RegisterForm = () => {
             required
           />
           <br />
-          <button type="submit" onClick={handleSubmit}>
-            Register
+          <button disabled={isLoading} type="submit" onClick={handleSubmit}>
+            Sign Up
           </button>
           <br />
         </form>
       )}
-      {message && <p>{message}</p>}
+      {showError && error && <p>{error}</p>}
       {success && (
         <div>
           <Link to="/login">Login</Link>
@@ -84,4 +88,4 @@ const RegisterForm = () => {
     </>
   );
 };
-export default RegisterForm;
+export default SignupForm;

client/src/components/Hero/Hero.jsx

@@ -1,11 +1,12 @@
 import classes from './Hero.module.css';
 import UrlForm from '../UrlForm/UrlForm.jsx';
-import useAuth from '../../hooks/useAuth.js';
+import { useAuth } from '../../hooks/useAuth.js';
+// import useAuth from '../../hooks/useAuth.js';
 
 function Hero() {
-  const { auth } = useAuth();
+  const { user } = useAuth();
 
-  if (!auth?.user) {
+  if (!user) {
     return (
       <>
         <div className={classes.container}>
@@ -28,13 +29,13 @@ function Hero() {
           <UrlForm />
         </div>
       </>
-    )
+    );
   } else {
     return (
       <div className={classes.container}>
         <UrlForm />
       </div>
-    )
+    );
   }
 }
 

client/src/components/Layout/Navbar/Navbar.jsx

@@ -1,9 +1,13 @@
 import { NavLink } from 'react-router-dom';
-import useAuth from '../../../hooks/useAuth.js';
+// import useAuth from '../../../hooks/useAuth.js';
 import classes from './Navbar.module.css';
+import { useLogout } from '../../../hooks/useLogout.js';
+import { useAuth } from '../../../hooks/useAuth.js';
 
 function Navbar() {
-  const { auth, setAuth } = useAuth();
+  // const { auth, setAuth } = useAuth();
+  const { user } = useAuth();
+  const { logout } = useLogout();
   return (
     <header className={classes.header}>
       <nav className={classes.nav}>
@@ -19,10 +23,10 @@ function Navbar() {
             <NavLink to="/">Pricing</NavLink>
           </li>
         </ul> */}
-        {!auth?.user ? (
-          <ul className={classes.loginRegister}>
+        {!user ? (
+          <ul className={classes.loginSignup}>
             <li>
-              <NavLink to="/register" className={classes.signup}>
+              <NavLink to="/signup" className={classes.signup}>
                 Sign Up
               </NavLink>
             </li>
@@ -38,7 +42,7 @@ function Navbar() {
             <NavLink to="/home">MyLinks</NavLink>
             */}
             {/*TODO: temporary logout*/}
-            <NavLink onClick={() => setAuth({})} className={classes.logout}>
+            <NavLink onClick={() => logout()} className={classes.logout}>
               Log Out
             </NavLink>
           </>