working on client side

dwbra · dwbra · Jul 31, 2022 · Jul 19, 2022 · Jul 20, 2022 · Jul 20, 2022
commit 5887ce6fae272dd8f748b3397a535a5ae06ef9d5
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
  <head>
  <meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta
  name="description"
  content="Web site created using create-react-app"
  />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
  <!--
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
  -->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
  <!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.

diff --git a/client/public/manifest.json b/client/public/manifest.json
diff --git a/client/src/App.test.tsx b/client/src/App.test.tsx
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,11 +1,19 @@
-import React, { useState, useEffect } from "react";
-import "./App.css";
+import React, { useState } from "react";
+import { Routes, Route } from "react-router-dom";
 import AuthForm from "./components/AuthForm/AuthForm";
+import HiddenContent from "./components/HiddenContent/HiddenContent";
 
 function App() {
+ const [tokens, setTokens] = useState({});
+
+ // console.log(tokens);
+
  return (
  <>
- <AuthForm />
+ <Routes>
+ <Route path="/" element={<AuthForm setTokens={setTokens} />} />
+ <Route path="/home" element={<HiddenContent tokens={tokens} />} />
+ </Routes>
  </>
  );
 }

diff --git a/client/src/components/AuthForm/AuthForm.tsx b/client/src/components/AuthForm/AuthForm.tsx
@@ -4,9 +4,9 @@ import { Visibility, VisibilityOff } from "@material-ui/icons/";
 import { Input, Button, InputAdornment, IconButton } from "@material-ui/core/";
 import axios from "axios";
 
-type Props = {};
-
-function AuthForm({}: Props) {
+function AuthForm(props: any) {
+ const { setTokens } = props;
+ const navigate = useNavigate();
  //set the initial state for the auth form to be signin
  const [isSignup, setIsSignup] = useState(false);
  //create a new set of data for the form and set the initial state as the empty fields above
@@ -36,6 +36,8 @@ function AuthForm({}: Props) {
  .post("http:https://localhost:5001/user/login-user", formData)
  .then(function (response) {
  console.log(response);
+ let data = response.data;
+ setTokens(data);
  })
  .catch(function (error) {
  console.log(error);
@@ -46,11 +48,14 @@ function AuthForm({}: Props) {
  .post("http:https://localhost:5001/user/create-user", formData)
  .then(function (response) {
  console.log(response);
+ let data = response.data;
+ setTokens(data);
  })
  .catch(function (error) {
  console.log(error);
  });
  }
+ navigate("/home");
  };
 
  //when any input field in the formData state is updated it will take a copy of the initial state

diff --git a/client/src/components/HiddenContent/HiddenContent.tsx b/client/src/components/HiddenContent/HiddenContent.tsx
@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import AuthForm from "../AuthForm/AuthForm";
+import axios from "axios";
+
+function HiddenContent(props: any) {
+ const { tokens } = props;
+ const refreshToken = tokens.newRefreshTkn;
+ // console.log(refreshToken);
+ // const MINUTE_MS = 300000;
+ // const test = 3000;
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (Object.keys(tokens).length === 0) {
+ axios
+ .post("http:https://localhost:5001/user/get-refresh-token", refreshToken)
+ .then(function (response) {
+ console.log(response);
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+ }
+ }, test);
+
+ return () => clearInterval(interval); // This represents the unmount function, in which you need to clear your interval to prevent memory leaks.
+ }, []);
+
+ return (
+ <>
+ <h1>HiddenContent</h1>
+ <p>
+ This is a page that can only be accessed via auth. It has refresh token
+ wrapped around this so that it will consistently check if the token is
+ expired.
+ </p>
+ </>
+ );
+}
+
+export default HiddenContent;
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -1,19 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
+import "./App.css";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import HiddenContent from "./components/HiddenContent/HiddenContent";
+import AuthForm from "./components/AuthForm/AuthForm";
 import App from "./App";
-import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
 );
+
 root.render(
  // <React.StrictMode>
- <App />
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
  // </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/client/src/reportWebVitals.ts b/client/src/reportWebVitals.ts
diff --git a/server/controllers/userController.js b/server/controllers/userController.js
@@ -18,6 +18,7 @@ const refreshToken = id => {
 };
 
 export const getRefreshToken = async (req, res) => {
+ console.log(req.body);
  const refreshTkn = req.body.refreshToken;
  if (!refreshTkn) {
  return res.status(401).json("Token is required!");