fix: fix and improve oauth

Aksh-Bansal-dev · Aksh-Bansal-dev · commit 648995ba4955 · 2021-05-29T22:22:57.000+05:30
diff --git a/frontend/src/components/Meeting/MeetingCard.tsx b/frontend/src/components/Meeting/MeetingCard.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import { Card, CardContent, Typography } from "@material-ui/core";
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      margin: "2vh",
+      minHeight: "20vh",
+      width: "80vh",
+      background: "#FFD166",
+    },
+    title: {
+      fontSize: "1.2rem",
+      color: "#3650C7",
+      fontWeight: "bold",
+      marginRight: "2vh",
+    },
+    lang: {
+      opacity: 0.5,
+    },
+    body: {
+      marginTop: "1vh",
+    },
+    owner: {
+      marginTop: "1vh",
+      opacity: 0.5,
+    },
+  })
+);
+
+// interface MeetingCardProps {}
+
+const MeetingCard: React.FC = ({}) => {
+  const classes = useStyles();
+  return (
+    <Card className={classes.root}>
+      <CardContent>
+        <Typography>hello</Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default MeetingCard;
diff --git a/frontend/src/components/Meeting/MeetingTabs.tsx b/frontend/src/components/Meeting/MeetingTabs.tsx
@@ -5,6 +5,7 @@ import AppBar from "@material-ui/core/AppBar";
 import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import Box from "@material-ui/core/Box";
+import MeetingCard from "./MeetingCard";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -81,10 +82,10 @@ const MeetingTabs: React.FC = () => {
         onChangeIndex={handleChangeIndex}
       >
         <TabPanel value={value} index={0} dir={theme.direction}>
-          SecrET meETiNg
+          <MeetingCard />
         </TabPanel>
         <TabPanel value={value} index={1} dir={theme.direction}>
-          Pollllllling
+          Polllllling
         </TabPanel>
       </SwipeableViews>
     </div>
diff --git a/frontend/src/components/Navs/Navbar/index.tsx b/frontend/src/components/Navs/Navbar/index.tsx
@@ -14,7 +14,7 @@ import { Link, useHistory } from "react-router-dom";
 import MenuIcon from "@material-ui/icons/Menu";
 import { linklist } from "../linklist";
 import useTokenStore from "../../../store/tokenStore";
-import { logout } from "../../../utils/logout";
+import { logout } from "../../../utils/auth/logout";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
diff --git a/frontend/src/components/Navs/linklist.ts b/frontend/src/components/Navs/linklist.ts
@@ -26,7 +26,7 @@ export const linklist = [
   },
   {
     name: "Logout",
-    url: "/registration",
+    url: "/",
     loginReq: true,
   },
 ];
diff --git a/frontend/src/components/Navs/navLinks/index.tsx b/frontend/src/components/Navs/navLinks/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./style.module.css";
 import { Link, useHistory } from "react-router-dom";
 import { linklist } from "../linklist";
-import { logout } from "src/utils/logout";
+import { logout } from "src/utils/auth/logout";
 import useTokenStore from "src/store/tokenStore";
 
 const NavLinks: React.FC = () => {
diff --git a/frontend/src/components/RegistrationForm/AuthDialog.tsx b/frontend/src/components/RegistrationForm/AuthDialog.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import Dialog from "@material-ui/core/Dialog";
+import Typography from "@material-ui/core/Typography";
+import GoogleButton from "../Buttons/GoogleButton";
+import Login from "./Login";
+import ResetPassword from "./ResetPassword";
+import Signup from "./Signup";
+import { DialogContent } from "@material-ui/core";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    title: {
+      margin: "4vh",
+      fontWeight: "bold",
+      fontSize: "1.4rem",
+    },
+    main: {
+      width: "30vw",
+      [theme.breakpoints.down("sm")]: {
+        width: "70vw",
+      },
+    },
+    or: {
+      margin: "2vh",
+    },
+  })
+);
+
+interface AuthDialogProps {
+  isOpen: boolean;
+}
+const AuthDialog: React.FC<AuthDialogProps> = ({ isOpen }) => {
+  const classes = useStyles();
+  const [page, setPage] = useState(0);
+  const heading = ["Login", "Sign Up", "Reset Password"];
+  const component = [
+    <Login setPage={setPage} />,
+    <Signup setPage={setPage} />,
+    <ResetPassword setPage={setPage} />,
+  ];
+
+  return (
+    <Dialog
+      aria-labelledby="customized-dialog-title"
+      open={isOpen}
+      maxWidth={false}
+    >
+      <DialogContent className={classes.main}>
+        <Typography className={classes.title} align="center">
+          {heading[page]}
+        </Typography>
+        <GoogleButton />
+        <Typography className={classes.or} align="center">
+          OR
+        </Typography>
+        {component[page]}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AuthDialog;
diff --git a/frontend/src/components/RegistrationForm/Login.tsx b/frontend/src/components/RegistrationForm/Login.tsx
@@ -4,7 +4,7 @@ import { Button, Link, Typography } from "@material-ui/core";
 import { useSignupLoginStyles } from "./signupLoginStyle";
 import FormikTextField from "./FormikTextField";
 import * as yup from "yup";
-import { fetchLogin } from "src/utils/fetchLogin";
+import { fetchLogin } from "../../utils/auth/fetchLogin";
 import { useHistory } from "react-router";
 import Snackbar from "@material-ui/core/Snackbar";
 import Alert from "@material-ui/lab/Alert";
diff --git a/frontend/src/components/RegistrationForm/ResetPassword.tsx b/frontend/src/components/RegistrationForm/ResetPassword.tsx
@@ -4,7 +4,7 @@ import { Button, Link, Typography } from "@material-ui/core";
 import { useSignupLoginStyles } from "./signupLoginStyle";
 import FormikTextField from "./FormikTextField";
 import * as yup from "yup";
-import { resetPassword } from "src/utils/resetPassword";
+import { resetPassword } from "../../utils/auth/resetPassword";
 import { useHistory } from "react-router";
 import Snackbar from "@material-ui/core/Snackbar";
 import Alert from "@material-ui/lab/Alert";
diff --git a/frontend/src/components/RegistrationForm/Signup.tsx b/frontend/src/components/RegistrationForm/Signup.tsx
@@ -4,7 +4,7 @@ import { Button, Link, Typography } from "@material-ui/core";
 import { useSignupLoginStyles } from "./signupLoginStyle";
 import FormikTextField from "./FormikTextField";
 import * as yup from "yup";
-import { fetchRegister } from "src/utils/fetchRegister";
+import { fetchRegister } from "../../utils/auth/fetchRegister";
 import { useHistory } from "react-router";
 import Snackbar from "@material-ui/core/Snackbar";
 import Alert from "@material-ui/lab/Alert";
diff --git a/frontend/src/pages/GoogleRedirect/index.tsx b/frontend/src/pages/GoogleRedirect/index.tsx
@@ -25,7 +25,9 @@ const GoogleRedirect: React.FC = () => {
   const setToken = useTokenStore((state) => state.setToken);
   React.useEffect(() => {
     const googleToken = async () => {
-      const res = await fetch(server + "/api/user/google-login/" + id);
+      const res = await fetch(server + "/api/user/google-login/" + id, {
+        credentials: "include",
+      });
       const payload = await res.json();
       if (payload.done) {
         setToken(payload.accessToken);
@@ -34,7 +36,6 @@ const GoogleRedirect: React.FC = () => {
         history.push("/registration");
       }
     };
-    console.log("google redirect" + id);
     googleToken();
   }, []);
   return <div className={classes.root}>Loading...</div>;
diff --git a/frontend/src/pages/Meeting/index.tsx b/frontend/src/pages/Meeting/index.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 import useTokenStore from "src/store/tokenStore";
 import Navbar from "../../components/Navs/Navbar";
 import MeetingTabs from "../../components/Meeting/MeetingTabs";
-import { useHistory } from "react-router-dom";
+import AuthDialog from "src/components/RegistrationForm/AuthDialog";
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -15,20 +15,20 @@ const useStyles = makeStyles(() =>
 
 const Meeting: React.FC = () => {
   const classes = useStyles();
-  const history = useHistory();
   const token = useTokenStore((state) => state.token);
+  const [authOpen, setAuthOpen] = useState(false);
   React.useEffect(() => {
-    setTimeout(() => {
-      console.log(token);
-      if (token && token === "") {
-        history.push("/registration");
-      }
-    }, 2000);
+    if (token === "") {
+      setAuthOpen(true);
+    } else {
+      setAuthOpen(false);
+    }
   }, [token]);
   return (
     <div className={classes.root}>
       <Navbar />
       <MeetingTabs />
+      <AuthDialog isOpen={authOpen} />
     </div>
   );
 };
diff --git a/frontend/src/utils/auth/fetchLogin.ts b/frontend/src/utils/auth/fetchLogin.ts
@@ -1,4 +1,4 @@
-import { server } from "../store/global";
+import { server } from "../../store/global";
 
 interface bodyTypes {
   email: string;
diff --git a/frontend/src/utils/auth/fetchRegister.ts b/frontend/src/utils/auth/fetchRegister.ts
@@ -1,4 +1,4 @@
-import { server } from "../store/global";
+import { server } from "../../store/global";
 import { fetchLogin } from "./fetchLogin";
 
 interface bodyTypes {
diff --git a/frontend/src/utils/auth/logout.ts b/frontend/src/utils/auth/logout.ts
@@ -0,0 +1,12 @@
+import { server } from "../../store/global";
+
+export const logout = async (
+  setToken: (newToken: string) => void
+): Promise<boolean> => {
+  setToken("");
+  const res = await fetch(server + "/api/user/logout", {
+    credentials: "include",
+  });
+  const payload = await res.json();
+  return payload.done;
+};
diff --git a/frontend/src/utils/auth/resetPassword.ts b/frontend/src/utils/auth/resetPassword.ts
diff --git a/frontend/src/utils/logout.ts b/frontend/src/utils/logout.ts
diff --git a/server/src/routes/refreshtoken.ts b/server/src/routes/refreshtoken.ts
@@ -1,6 +1,6 @@
 import express from "express";
 import { User } from "../model/User";
-import { getAccessToken, sendRefreshToken } from "../utils/tokenstuff";
+import { getAccessToken } from "../utils/tokenstuff";
 import { verify } from "jsonwebtoken";
 const Router = express.Router();
 
@@ -30,8 +30,6 @@ Router.get("/refresh_token", async (req, res) => {
       throw new Error("invalid token version");
     }
 
-    sendRefreshToken(res, user!);
-
     res.send({ ok: true, accessToken: jwt });
   } catch (err) {
     console.log("My Error: \n");
diff --git a/server/src/routes/userRoutes.ts b/server/src/routes/userRoutes.ts
@@ -143,8 +143,9 @@ Router.post("/reset", async (req: Request, res: Response) => {
 // Logout
 Router.get("/logout", async (_req: Request, res: Response) => {
   try {
-    await sendRefreshToken(res);
-    res.status(200).json({ ok: true });
+    // sendRefreshToken(res);
+    res.cookie("jid", "", { httpOnly: true, path: "/api/refresh_token" });
+    res.status(200).json({ done: true });
   } catch (err) {
     res.json({ ok: false, err: err });
   }
diff --git a/server/src/utils/tokenstuff.ts b/server/src/utils/tokenstuff.ts
@@ -10,10 +10,10 @@ export const getAccessToken = (user: User): string => {
 
 export const sendRefreshToken = (res: Response, user?: User): void => {
   if (!user) {
-    res.cookie("jid", "logout", { httpOnly: true, path: "/api/refresh_token" });
+    console.log("logout");
+    res.cookie("jid", "logut", { httpOnly: true, path: "/api/refresh_token" });
     return;
   }
-  console.log("happy send");
   res.cookie(
     "jid",
     sign(

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export const linklist = [`
`26`	`26`	`},`
`27`	`27`	`{`
`28`	`28`	`name: "Logout",`
`29`		`- url: "/registration",`
	`29`	`+ url: "/",`
`30`	`30`	`loginReq: true,`
`31`	`31`	`},`
`32`	`32`	`];`