removed pub button from marketplace, fixing routes for google oauth

Author: dentonwong

app/src/components/login/SignIn.tsx

@@ -318,7 +318,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
               >
                 <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
               </svg>
-            </Button>
+            </Button>*/}
             <Button
               fullWidth
               variant="contained"
@@ -344,7 +344,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
               >
                 <path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z" />
               </svg>
-            </Button> */}
+            </Button> 
             <Button
               fullWidth
               variant="contained"

app/src/components/top/NavBar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -23,6 +23,9 @@ const NavBar = () => {
   const [projectName, setProjectName] = useState(state.name || '');
   const [invalidProjectName, setInvalidProjectName] = useState(false);
   const [invalidProjectNameMessage, setInvalidProjectNameMessage] = useState('');
+  const urlAdd = useHistory();
+  const isMarketplace = urlAdd.location.pathname === '/marketplace';
+
   const isDarkMode = useSelector(
     (state: RootState) => state.darkMode.isDarkMode
   );
@@ -156,15 +159,15 @@ const NavBar = () => {
         </div>
       </Link>
       <div style={buttonContainerStyle}>
-        {state.published ? (
+        {isMarketplace ? null : (state.published ? (
           <button style={buttonStyle} onClick={handleUnpublish}>
             Unpublish
           </button>
         ) : (
           <button style={buttonStyle} onClick={handlePublish}>
             Publish
           </button>
-        )}
+        ))}
         <NewExportButton />
         <Button
           style={moreVertButtonStyle}

app/src/helperFunctions/projectGetSaveDel.ts

@@ -10,19 +10,17 @@ if (isDev) {
 }
 
 export const getProjects = (): Promise<any> => {
-  let userId = window.localStorage.getItem('ssid');
-  const body = JSON.stringify({ userId });
   const projects = fetch(`${serverURL}/getProjects`, {
     method: 'POST',
     headers: {
       'content-type': 'application/json'
     },
     // need credentials for userid pull from cookie
-    credentials: 'include',
-    body
+    credentials: 'include'
   })
     .then((res) => res.json())
     .then((data) => {
+      console.log('........................ data', data)
       return data;
     })
     .catch((err) => console.log(`Error getting project ${err}`));
@@ -39,8 +37,6 @@ export const saveProject = (
   const body = JSON.stringify({
     name,
     project: { ...newProject},
-    userId: window.localStorage.getItem('ssid'),
-    username: window.localStorage.getItem('username'),
     comments: []
   });
   const project = fetch(`${serverURL}/saveProject`, {
@@ -69,8 +65,6 @@ export const publishProject = (
     _id: workspace._id, 
     name: name,
     project: { ...newProject},
-    userId: window.localStorage.getItem('ssid'),
-    username: window.localStorage.getItem('username'),
     comments: [],
   });
 
@@ -101,7 +95,6 @@ export const unpublishProject = (
 ): Promise<Object> => {
   const body = JSON.stringify({
     _id: projectData._id,
-    userId: window.localStorage.getItem('ssid'),
   });
 
   const response = fetch(`${serverURL}/unpublishProject`, {
@@ -129,7 +122,7 @@ export const unpublishProject = (
 export const deleteProject = (project: any): Promise<Object> => {
   const body = JSON.stringify({
     _id: project._id,
-    userId: window.localStorage.getItem('ssid')
+    // userId: window.localStorage.getItem('ssid')
   });
   const deletedProject = fetch(`${serverURL}/deleteProject`, {
     method: 'DELETE',

app/src/index.tsx

@@ -10,10 +10,10 @@ import {
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import App from './components/App';
-import Cookies from 'js-cookie';
 import FBPassWord from './components/login/FBPassWord';
 import MarketplaceContainer from './containers/MarketplaceContainer';
 import ProjectDashboard from './Dashboard/ProjectContainer';
+import { useState, useEffect } from 'react';
 import { Provider } from 'react-redux';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -28,18 +28,53 @@ const client = new ApolloClient({
   cache: new InMemoryCache()
 });
 
-const PrivateRoute = ({ component: Component, ...rest }) => (
+const isDev = process.env.NODE_ENV === 'development';
+const { DEV_PORT, API_BASE_URL } = require('../../config.js');
+let serverURL = API_BASE_URL;
+
+//check if we're in dev mode
+if (isDev) {
+  serverURL = `http://localhost:${DEV_PORT}`;
+}
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(null);
+  
+  useEffect(() => {
+
+  const projects = fetch(`${serverURL}/loggedIn`, {
+    method: 'GET',
+    headers: {
+      'content-type': 'application/json'
+    },
+    // need credentials for userid pull from cookie
+    credentials: 'include'
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      console.log('........................ data', data);
+      setIsLoggedIn(data);
+
+    })
+    .catch((err) => console.log(`Error getting project ${err}`));
+  }, []);
+
+return (
   <Route
     {...rest}
     render={(props) => {
-      return Cookies.get('ssid') || window.localStorage.getItem('ssid') ? (
-        <Component {...props} />
-      ) : (
-        <Redirect to="/login" />
-      );
+     if (isLoggedIn) {
+        console.log("should be app")
+        // User is logged in, render the protected component
+        return <Component {...props} />;
+      } else if(isLoggedIn !== null) {
+        console.log("redirect login")
+        // User is not logged in, redirect to the login page
+        return <Redirect to="/login" />;
+      }
     }}
   />
-);
+  )};
 
 
 ReactDOM.render(

config.js

@@ -3,7 +3,8 @@ const config = {
   DEV_PORT: 5656,
   API_BASE_URL: isProduction
     ? 'https://app.reactype.dev'
-    : 'http://localhost:5656',
+    : 'http://localhost:8080',
+  // : 'http://localhost:5656',
   API_BASE_URL2: isProduction
     ? 'https://app.reactype.dev'
     : 'http://localhost:8080',

server/controllers/cookieController.ts

@@ -1,5 +1,6 @@
 import { CookieController } from '../interfaces';
 
+
 const cookieController: CookieController = {
   // setSSIDCookie - store the user id from database in cookie
   setSSIDCookie: (req, res, next) => {

server/controllers/marketplaceController.ts

@@ -37,10 +37,12 @@ const marketplaceController: MarketplaceController = {
    * @return sends the updated entire project document to the frontend
    */
   publishProject: async (req, res, next) => {
-    const { _id, project, comments, userId, username, name } = req.body;
+    const { _id, project, comments, name } = req.body;
+    const username = req.cookies.username;
+    const userId = req.cookies.ssid;
     const createdAt = Date.now();
 
-    if (userId === req.cookies.ssid) {
+    try{
       if (mongoose.isValidObjectId(_id)) {
         const noPub = {...project}
         delete noPub.published;
@@ -67,7 +69,7 @@ const marketplaceController: MarketplaceController = {
         return next();
       }
     }
-    else {
+    catch {
 
       // we should not expect a user to be able to access another user's id, but included error handling for unexpected errors
       return next({
@@ -85,12 +87,12 @@ const marketplaceController: MarketplaceController = {
    * @return sends the updated project to the frontend
    */
   unpublishProject: (req, res, next) => {
-    // pull project name and userId from req.body
-    const { _id, userId } = req.body;
+    const { _id } = req.body;
+    const userId = req.cookies.ssid;
     //check if req.cookies.ssid matches userId
 
-    if (userId === req.cookies.ssid ) {
-      Projects.findOneAndUpdate({ _id }, {published: false}, { new: true }, (err, result) => {
+    try {
+      Projects.findOneAndUpdate({ _id, userId }, {published: false}, { new: true }, (err, result) => {
         if (err || result === null) {
           return next({
             log: `Error in marketplaceController.unpublishProject: ${err || null}`,
@@ -103,7 +105,7 @@ const marketplaceController: MarketplaceController = {
         return next();
       });
     }
-    else {
+    catch {
       // we should not expect a user to be able to access another user's id, but included error handling for unexpected errors
       return next({
         log: `Error in marketplaceController.unpublishProject`,

server/controllers/projectController.ts

@@ -10,7 +10,9 @@ const projectController: ProjectController = {
   saveProject: (req, res, next) => {
 
     // pull project name and project itself from body
-    const { name, project, userId, username, comments } = req.body;
+    const { name, project, comments } = req.body;
+    const username = req.cookies.username;
+    const userId = req.cookies.ssid;
     //deleted published from project
     const noPub = {...project};
     delete noPub.published;
@@ -43,7 +45,7 @@ const projectController: ProjectController = {
 
   // gets all of current user's projects
   getProjects: (req, res, next) => {
-    const { userId } = req.body;
+    const userId = req.cookies.ssid
     Projects.find({ userId }, (err, projects: Array<{_id: string; published: boolean; project: object }>) => {
       if (err) {
         return next({
@@ -68,7 +70,8 @@ const projectController: ProjectController = {
   // delete project from database
   deleteProject: async (req, res, next) => {
     // pull project name and userId from req.body
-    const { _id, userId } = req.body;
+    const { _id } = req.body;
+    const userId = req.cookies.ssid;
     // try {
     //   const response = await Projects.findOneAndDelete({ _id: _id, username: userId });
     //   res.locals.deleted = response;

server/controllers/sessionController.ts

@@ -24,8 +24,11 @@ const sessionController: SessionController = {
         // find session from request session ID in mongodb
         const session = await Sessions.findOne({ cookieId });
         if (!session) {
+          console.log('no session')
+          res.locals.loggedIn = false;
           return res.redirect('/');
         }
+        res.locals.loggedIn = true;
         return next();
       } catch (err) {
         return next({
@@ -40,7 +43,7 @@ const sessionController: SessionController = {
   // startSession - create and save a new session into the database
   startSession: (req, res, next) => {
     // first check if user is logged in already
-    Sessions.findOne({ cookieId: res.locals.id }, (err, ses) => {
+    Sessions.findOne({ cookieId: res.locals.id || req.user.id }, (err, ses) => {
       if (err) {
         return next({
           log: `Error in sessionController.startSession find session: ${err}`,
@@ -53,11 +56,12 @@ const sessionController: SessionController = {
       }
       if (!ses) {
         Sessions.create(
-          { cookieId: res.locals.id },
+          //checking if logged in via the login form (res.locals.id) or oauth(req.user.id)
+          { cookieId: res.locals.id || req.user.id },
           (error, session: SessionCookie) => {
             if (error) {
               return next({
-                log: `Error in sessionController.startSession create session: ${err}`,
+                log: `Error in sessionController.startSession create session: ${error}`,
                 message: {
                   err: 'Error in sessionController.startSession create session, check server logs for details'
                 }

server/routers/auth.ts

@@ -2,11 +2,14 @@ import express from 'express';
 const passport = require('passport');
 import config from '../../config';
 import { Request } from 'express';
+import sessionController from '../controllers/sessionController';
 
 // trying to add interface
 interface UserReq extends Request {
   user: {
     id: string;
+    username: string;
+    googleId: string;
   };
 }
 
@@ -41,9 +44,19 @@ router.get(
 router.get(
   '/google/callback',
   passport.authenticate('google'),
+  sessionController.startSession,
   (req: UserReq, res) => {
     console.log('google authenicate function being run');
-    res.cookie('ssid', req.user.id);
+    res.cookie('ssid', req.user.id, {
+      httpOnly: true,
+      sameSite: 'none',
+      secure: true,
+    });
+    res.cookie('username', req.user.username, {
+      httpOnly: true,
+      sameSite: 'none',
+      secure: true,
+    });
     return res.redirect(API_BASE_URL);
   }
 );