Merge pull request #43 from andrewjcho84/github

GitHub Oauth re-implemented and working

Author: andrewjcho84

app/electron/main.js

@@ -58,8 +58,8 @@ async function createWindow() {
     // icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
     webPreferences: {
       zoomFactor: 0.7,
-      // enable devtools
-      devTools: true,
+      // enable devtools when in development mode
+      devTools: isDev,
       // crucial security feature - blocks rendering process from having access to node moduels
       nodeIntegration: false,
       // web workers will not have access to node
@@ -214,8 +214,8 @@ app.on('web-contents-created', (event, contents) => {
     const parsedUrl = new URL(navigationUrl);
     const validOrigins = [
       selfHost,
-      'http://localhost:8081',
-      'http://reactype.heroku.com',
+      'http://localhost:5000',
+      'https://reactype.herokuapp.com',
       'https://github.com/'
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -235,9 +235,8 @@ app.on('web-contents-created', (event, contents) => {
     //console.log('parsedUrl.origin is', parsedUrl.origin);
     const validOrigins = [
       selfHost,
-      'http://localhost:8081',
       'http://localhost:5000',
-      'http://reactype.heroku.com',
+      'https://reactype.herokuapp.com',
       'https://github.com',
       'app://rse/'
     ];
@@ -323,10 +322,16 @@ ipcMain.on('choose_app_dir', event => {
     .catch(err => console.log('ERROR on "choose_app_dir" event: ', err));
 });
 
+// define serverURL for cookie and auth purposes based on environment
+let serverUrl = 'https://reactype.herokuapp.com';
+if (isDev) {
+  serverUrl = 'http://localhost:5000';
+}
+
 // 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://reactype.heroku.com' })
+    .get({ url: serverUrl })
     .then(cookie => {
       console.log(cookie);
       event.reply('give_cookie', cookie);
@@ -339,12 +344,47 @@ 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://reactype.heroku.com', 'ssid')
+    .remove(serverUrl, 'ssid')
     .then(removed => {
       console.log('Cookies deleted', removed);
     })
     .catch(err => console.log('Error deleting cookie:', err));
 });
 
-// bypass ssl certification validation error
-// app.commandLine.appendSwitch('ignore-certificate-errors', 'true');
+// opens new window for github oauth when button on signin page is clicked
+ipcMain.on('github', event => {
+  // create new browserwindow object with size, title, security options
+  const github = new BrowserWindow({
+    width: 800,
+    height: 600,
+    title: 'Github Oauth',
+    webPreferences: {
+      nodeIntegration: false,
+      nodeIntegrationInWorker: false,
+      nodeIntegrationInSubFrames: false,
+      contextIsolation: true,
+      enableRemoteModule: false,
+      zoomFactor: 1.0
+    }
+  });
+  // redirects to relevant server endpoint
+  github.loadURL(`${serverUrl}/github`);
+  // show window
+  github.show();
+  // if final callback is reached and we get a redirect from server back to our app, close oauth window
+  github.webContents.on('will-redirect', (e, callbackUrl) => {
+    let redirectUrl = 'app://rse/';
+    if (isDev) {
+      redirectUrl = 'http://localhost:8080/';
+    }
+    if (callbackUrl === redirectUrl) {
+      dialog.showMessageBox({
+        type: 'info',
+        title: 'ReacType',
+        icon: resolve('app/src/public/icons/png/256x256.png'),
+        message: 'Github Oauth Successful!'
+      });
+      github.close();
+    }
+  });
+});

app/electron/preload.js

@@ -11,7 +11,7 @@ const {
   setCookie,
   getCookie,
   delCookie,
-  reload
+  github
 } = require('./preloadFunctions/cookies');
 
 // Expose protected methods that allow the renderer process to use select node methods
@@ -33,5 +33,6 @@ contextBridge.exposeInMainWorld('api', {
   writeFile,
   setCookie,
   getCookie,
-  delCookie
+  delCookie,
+  github
 });

app/electron/preloadFunctions/cookies.js

@@ -14,4 +14,8 @@ const delCookie = () => {
   return ipcRenderer.send('delete_cookie');
 };
 
-module.exports = { setCookie, getCookie, delCookie };
+const github = () => {
+  return ipcRenderer.send('github');
+};
+
+module.exports = { setCookie, getCookie, delCookie, github };

app/src/components/login/SignIn.tsx

@@ -80,6 +80,24 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
   const [invalidUser, setInvalidUser] = useState(false);
   const [invalidPass, setInvalidPass] = useState(false);
 
+  // this useEffect will check for cookies and set an item in localstorage for github Oauth session validation
+  useEffect(() => {
+    const githubCookie = setInterval(() => {
+      window.api.setCookie();
+      window.api.getCookie(cookie => {
+        // if a cookie exists, set localstorage item with cookie data, clear interval, go back to '/' route to load app
+        if (cookie[0]) {
+          window.localStorage.setItem('ssid', cookie[0].value);
+          clearInterval(githubCookie);
+          props.history.push('/');
+          // if an item is already set in localstorage (guest option or normal login) clear interval needs to be run or else this will constantly run
+        } else if (window.localStorage.getItem('ssid')) {
+          clearInterval(githubCookie);
+        }
+      });
+    }, 2000);
+  }, []);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;
     switch (e.target.name) {
@@ -188,10 +206,11 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           helperText={invalidPassMsg}
           error={invalidPass}
         />
+        {/* **TODO** Make 'Remember Me' functional
         <FormControlLabel
           control={<Checkbox value="remember" color="primary" />}
           label="Remember me"
-        />
+        /> */}
 
         <Button
           fullWidth
@@ -203,25 +222,18 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
           Sign In
         </Button>
         {/* Hiding github oauth button as it's still buggy and not fully working */}
-        {/* <Button
+        <Button
           fullWidth
           variant="contained"
           color="default"
           className={classes.submit}
-          href="https://reactype.heroku.com/github"
           onClick={() => {
-            console.log('Inside onclick of github');
-            setTimeout(() => {
-              window.api.setCookie();
-              window.api.getCookie(cookie => {
-                window.localStorage.setItem('ssid', cookie[0].value);
-                props.history.push('/');
-              });
-            }, 2000);
+            // messages the main proces to open new window for github oauth
+            window.api.github();
           }}
         >
           <GitHubIcon />
-        </Button> */}
+        </Button>
 
         <Button
           fullWidth