completed auth (#127)

.pnpm-debug.log

@@ -6,9 +6,9 @@
     "code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
     "err": {
       "name": "pnpm",
-      "message": "No package.json (or package.yaml, or package.json5) was found in \"/home/chirag/Desktop/jwoc/url-minify\".",
+      "message": "No package.json (or package.yaml, or package.json5) was found in \"D:\\url-minify\".",
       "code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
-      "stack": "pnpm: No package.json (or package.yaml, or package.json5) was found in \"/home/chirag/Desktop/jwoc/url-minify\".\n    at readProjectManifest (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:19808:13)\n    at async Object.readProjectManifestOnly (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:19812:28)\n    at async readProjectManifestOnly (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:43691:24)\n    at async Object.handler (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:177805:24)\n    at async /usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182068:21\n    at async run (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182042:34)\n    at async runPnpm (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182261:5)\n    at async /usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:182253:7"
+      "stack": "pnpm: No package.json (or package.yaml, or package.json5) was found in \"D:\\url-minify\".\n    at readProjectManifest (C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:19805:13)\n    at async Object.readProjectManifestOnly (C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:19809:28)\n    at async readProjectManifestOnly (C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:43712:24)\n    at async Object.handler (C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:177753:24)\n    at async C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:182016:21\n    at async run (C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:181990:34)\n    at async runPnpm (C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:182209:5)\n    at async C:\\Users\\chira\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:182201:7"
     }
   }
 }

backend/.env.example

@@ -1,3 +1,3 @@
-MONGO_DB=mongo-uri
+MONGO_DB=mongodb://localhost:27017/urlMinify
 SECRET=secret
 AUTH_SECRET=secret

frontend/.env

@@ -1,2 +1,3 @@
 NODE_ENV=dev
-NEXT_PUBLIC_API_URL=https://api.minfy.xyz
+#NEXT_PUBLIC_API_URL=https://api.minfy.xyz
+NEXT_PUBLIC_API_URL=http://localhost:5000

frontend/components/Login/Login.jsx

@@ -1,18 +1,18 @@
 import React from 'react'
 import LoginStyle from './Login.style'
-import AccountCircleIcon from '@mui/icons-material/AccountCircle'
+// import AccountCircleIcon from '@mui/icons-material/AccountCircle'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faUser,
-  faEnvelope,
-  faLock,
-} from '@fortawesome/free-solid-svg-icons'
-import { UserContext } from '../../helpers/user/usercontext'
+import { faEnvelope, faLock } from '@fortawesome/free-solid-svg-icons'
+import UserContext from '../../helpers/user/usercontext'
 import { useState } from 'react'
 import Link from 'next/link'
 import { useContext } from 'react'
+import { useRouter } from 'next/router'
 
 function Login() {
+  const router = useRouter()
+  const user = useContext(UserContext)
+
   const [userData, setUserData] = useState({
     email: '',
     password: '',
@@ -24,9 +24,17 @@ function Login() {
     setUserData({ ...userData, [name]: value })
   }
 
+  const handleLogin = (evt) => {
+    evt.preventDefault()
+    user.login(userData)
+  }
+
+  if (user.user) {
+    router.push('/dashboard')
+  }
   return (
     <LoginStyle>
-      <form className="form-wrapper">
+      <form className="form-wrapper" onSubmit={handleLogin}>
         <p className="reg-title">Sign in</p>
 
         <img src="/images/user.png"></img>
@@ -61,11 +69,9 @@ function Login() {
           />
         </div>
 
-        <Link href="/">
-          <button type="submit" className="submit-button">
-            Submit
-          </button>
-        </Link>
+        <button type="submit" className="submit-button">
+          Submit
+        </button>
 
         <p className="foot-text">
           New here?&nbsp;

frontend/components/Reg/Reg.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import RegStyle from './Reg.style'
-import Image from 'next/image'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser, faEnvelope, faLock } from '@fortawesome/free-solid-svg-icons'
 import { useState, useContext } from 'react'
 import { Link } from '@mui/material'
 import UserAuth from 'helpers/user/usercontext'
+import { useRouter } from 'next/router'
 
 function Reg() {
+  const router = useRouter()
+  const context = useContext(UserAuth)
   const [userData, setUserData] = useState({
     username: '',
     email: '',
@@ -25,7 +27,10 @@ function Reg() {
     setUserData(userData)
     context.createAcc(userData)
   }
-  const context = useContext(UserAuth);
+
+  if (context.user) {
+    router.push('/dashboard')
+  }
   return (
     <RegStyle>
       <form onSubmit={handleSubmit} className="form-wrapper">

frontend/helpers/user/userState.js

@@ -1,31 +1,102 @@
 import UserAuth from './usercontext'
 import { useState } from 'react'
 import axios from 'helpers/Axios'
+import { useEffect } from 'react'
+
+const storeJWT = (data) => {
+  let jwt = data
+  try {
+    localStorage.setItem('jwt', jwt)
+    return false
+  } catch (e) {
+    return true
+  }
+}
+
+const fetchJWT = () => {
+  try {
+    let jwt = localStorage.getItem('jwt')
+    return jwt
+  } catch (e) {
+    return false
+  }
+}
 
 const UserAuthProvider = ({ children }) => {
   const [user, setUser] = useState(null)
-  const login = () => {
-    setUser('default')
+  const [jwt, setJwt] = useState(null)
+  const login = async ({ email, password }) => {
+    let login = true
+    await axios
+      .post(`/user/login`, {
+        email: email,
+        password: password,
+      })
+      .then(function (response) {
+        setJwt(response.data.access_token)
+        storeJWT(response.data.access_token)
+      })
+      .catch(function (error) {
+        login = false
+        console.error(error)
+      })
+    return login
   }
-  const createAcc = (data) => {
-    axios
+  const createAcc = async ({ email, password, name }) => {
+    let register = true
+    await axios
       .post(`/user/register`, {
-        email: data.email,
-        password: data.password,
-        name: data.name,
+        email: email,
+        password: password,
+        name: name,
       })
       .then(function (response) {
         console.log(response)
+        setJwt(response.data)
+        storeJWT(response.data)
       })
       .catch(function (error) {
-        console.log(error)
+        register = false
+        console.error(error)
+      })
+    return register
+  }
+  const fetchUser = async () => {
+    if (!jwt) {
+      return
+    }
+    axios({
+      headers: {
+        Authorization: jwt,
+      },
+      method: 'GET',
+      url: '/user/me',
+    })
+      .then((user) => {
+        setUser(user.data)
+      })
+      .catch((err) => {
+        console.error(err)
+        setJwt(null)
+        setUser(null)
+        storeJWT(null)
       })
   }
-
   const logout = () => {
     setUser(null)
+    setJwt(null)
+    storeJWT(null)
   }
-  const context = { user, login, logout, createAcc }
+  const context = { jwt, user, login, logout, createAcc }
+  useEffect(() => {
+    let jwt = fetchJWT()
+    if (jwt) {
+      setJwt(jwt)
+    }
+  }, [])
+  useEffect(() => {
+    fetchUser()
+  }, [jwt])
 
   return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>
 }

frontend/pages/_app.js

@@ -6,15 +6,12 @@ import '../styles/404.css'
 import UserAuthProvider from 'helpers/user/userState'
 import Page from 'react-page-loading'
 
-
 function MyApp({ Component, pageProps }) {
   return (
     <UserAuthProvider>
-      <Page loader={"bar"} color={"#03b1fc"} size={10} >
+      <Page loader={'bar'} color={'#03b1fc'} size={10}>
         <Component {...pageProps} />
-
       </Page>
-
     </UserAuthProvider>
   )
 }