Merge pull request #39 from andrewjcho84/serverSeparation

Add more server separation logic

Author: andrewjcho84

app/electron/main.js

@@ -222,7 +222,8 @@ app.on('web-contents-created', (event, contents) => {
     const parsedUrl = new URL(navigationUrl);
     const validOrigins = [
       selfHost,
-      'https://localhost:8081',
+      'http://localhost:8081',
+      'http://reactype.heroku.com',
       'https://github.com/'
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -242,7 +243,9 @@ app.on('web-contents-created', (event, contents) => {
     //console.log('parsedUrl.origin is', parsedUrl.origin);
     const validOrigins = [
       selfHost,
-      'https://localhost:8081',
+      'http://localhost:8081',
+      'http://localhost:5000',
+      'http://reactype.heroku.com',
       'https://github.com',
       'app://rse/'
     ];
@@ -331,7 +334,7 @@ ipcMain.on('choose_app_dir', event => {
 // for github oauth login in production, since cookies are not accessible through document.cookie on local filesystem, we need electron to grab the cookie that is set from oauth, this listens for an set cookie event from the renderer process then sends back the cookie
 ipcMain.on('set_cookie', event => {
   session.defaultSession.cookies
-    .get({ url: 'https://localhost:8081' })
+    .get({ url: 'https://reactype.heroku.com' })
     .then(cookie => {
       console.log(cookie);
       event.reply('give_cookie', cookie);
@@ -344,7 +347,7 @@ ipcMain.on('set_cookie', event => {
 // again for production, document.cookie is not accessible so we need this listener on main to delete the cookie on logout
 ipcMain.on('delete_cookie', event => {
   session.defaultSession.cookies
-    .remove('https://localhost:8081', 'ssid')
+    .remove('https://reactype.heroku.com', 'ssid')
     .then(removed => {
       console.log('Cookies deleted', removed);
     })

app/src/components/login/LoginButton.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { stateContext } from '../../context/context';
 import Button from '@material-ui/core/Button';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-import { useHistory } from "react-router-dom";
+import { useHistory } from 'react-router-dom';
 
 export default function LoginButton() {
   let history = useHistory();
@@ -11,8 +11,12 @@ export default function LoginButton() {
   const handleLogout = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
     console.log('Logout clicked, destroying cookie, redirect to login');
+    // clear local storage
+    window.localStorage.clear();
     // destroys cookie by backdating expiration time
     document.cookie = 'ssid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    // destroy cookie in production via electron main process
+    window.api.delCookie();
     // uses useHistory to return to the login page
     history.push('/login');
   };
@@ -28,7 +32,7 @@ export default function LoginButton() {
       >
         Log Out
       </Button>
-    )
+    );
   } else {
     return (
       <Button
@@ -40,6 +44,6 @@ export default function LoginButton() {
       >
         Log In
       </Button>
-    )
+    );
   }
-}
+}

app/src/components/login/ProjectsFolder.tsx

@@ -97,8 +97,10 @@ export default function ProjectsFolder() {
 
   const handleClickOpen = () => {
     getProjects().then(data => {
-      setProjects(data);
-      setOpen(true);
+      if (data) {
+        setProjects(data);
+        setOpen(true);
+      }
     });
   };
 

app/src/components/login/SignIn.tsx

@@ -208,7 +208,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           variant="contained"
           color="default"
           className={classes.submit}
-          href="https://localhost:8081/github"
+          href="https://reactype.heroku.com/github"
           onClick={() => {
             console.log('Inside onclick of github');
             setTimeout(() => {

app/src/helperFunctions/auth.ts

@@ -1,19 +1,23 @@
+const isDev = process.env.NODE_ENV === 'development';
+let serverURL = 'https://reactype.herokuapp.com';
+if (isDev) {
+  serverURL = 'http://localhost:5000';
+}
+
 export const sessionIsCreated = (
   username: string,
   password: string
 ): Promise<string> => {
-  console.log('Username and pw in sessionIsCreated', username, password);
   const body = JSON.stringify({
     username,
     password
   });
-  console.log('In sessionIsCreated, body is', body);
-  const result = fetch('https://localhost:8081/login', {
+  console.log(process.env.NODE_ENV);
+  const result = fetch(`${serverURL}/login`, {
     method: 'POST',
     credentials: 'include',
     headers: {
-      'Content-Type': 'application/json',
-      Origin: 'reactype'
+      'Content-Type': 'application/json'
     },
     body
   })
@@ -48,13 +52,11 @@ export const newUserIsCreated = (
     email,
     password
   });
-  const result = fetch('https://localhost:8081/signup', {
+  const result = fetch(`${serverURL}/signup`, {
     method: 'POST',
-    //credentials: 'include',
-    //mode: 'no-cors',
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json'
-      //'Access-Control-Allow-Origin': 'https://localhost:8081'
     },
     body
   })

app/src/helperFunctions/projectGetSave.ts

@@ -1,11 +1,16 @@
+const isDev = process.env.NODE_ENV === 'development';
+let serverURL = 'https://reactype.herokuapp.com';
+if (isDev) {
+  serverURL = 'http://localhost:5000';
+}
 // helper functions that will do fetch requests to get and save user/guest projects
 
 export const getProjects = (): Promise<Object> => {
   //console.log("Loading user's projects...");
   let userId = window.localStorage.getItem('ssid');
   //console.log('userId from localStorage is', userId);
   const body = JSON.stringify({ userId });
-  const projects = fetch('https://localhost:8081/getProjects', {
+  const projects = fetch(`${serverURL}/getProjects`, {
     method: 'POST',
     headers: {
       'content-type': 'application/json'
@@ -33,7 +38,7 @@ export const saveProject = (
     project: workspace,
     userId: window.localStorage.getItem('ssid')
   });
-  const project = fetch('https://localhost:8081/saveProject', {
+  const project = fetch(`${serverURL}/saveProject`, {
     method: 'POST',
     headers: {
       'content-type': 'application/json'