fix(auth): restore oauth2 flow functionality

Signed-off-by: Adam Setch <adam.setch@outlook.com>
gitify-app · Aug 11, 2024 · e7cf991 · e7cf991
1 parent 572e157
commit e7cf991
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 23 deletions.
diff --git a/src/electron/main.js b/src/electron/main.js
@@ -17,10 +17,6 @@ const { autoUpdater } = require('electron-updater');
 const { updateElectronApp } = require('update-electron-app');
 
 log.initialize();
-
-// TODO: Remove @electron/remote use - see #650
-require('@electron/remote/main').initialize();
-
 // Tray Icons
 const idleIcon = path.resolve(
   `${__dirname}/../../assets/images/tray-idleTemplate.png`,
@@ -124,6 +120,13 @@ app.whenReady().then(async () => {
   mb.on('ready', () => {
     mb.app.setAppUserModelId('com.electron.gitify');
 
+    /**
+     * TODO: Remove @electron/remote use - see #650
+     * GitHub OAuth 2 Login Flows - Enable Remote Browser Window Launch
+     */
+    require('@electron/remote/main').initialize();
+    require('@electron/remote/main').enable(mb.window.webContents);
+
     // Tray configuration
     mb.tray.setToolTip('Gitify');
     mb.tray.setIgnoreDoubleClickEvents(true);

diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
@@ -1,5 +1,6 @@
-import { KeyIcon, PersonIcon } from '@primer/octicons-react';
-import { type FC, useContext, useEffect } from 'react';
+import { KeyIcon, MarkGithubIcon, PersonIcon } from '@primer/octicons-react';
+import log from 'electron-log';
+import { type FC, useCallback, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '../components/buttons/Button';
 import { LogoIcon } from '../components/icons/LogoIcon';
@@ -9,7 +10,7 @@ import { showWindow } from '../utils/comms';
 
 export const LoginRoute: FC = () => {
   const navigate = useNavigate();
-  const { isLoggedIn } = useContext(AppContext);
+  const { loginWithGitHubApp, isLoggedIn } = useContext(AppContext);
 
   useEffect(() => {
     if (isLoggedIn) {
@@ -18,14 +19,13 @@ export const LoginRoute: FC = () => {
     }
   }, [isLoggedIn]);
 
-  // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
-  /* const loginUser = useCallback(async () => {
+  const loginUser = useCallback(async () => {
     try {
-      await login();
+      await loginWithGitHubApp();
     } catch (err) {
-      // Skip
+      log.error('Auth: failed to login with GitHub', err);
     }
-  }, []); */
+  }, [loginWithGitHubApp]);
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center p-4">
@@ -36,18 +36,16 @@ export const LoginRoute: FC = () => {
       </div>
 
       <div className="text-center text-sm font-semibold italic">Login with</div>
-      {
-        // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
-        /*    
-       <Button
+
+      <Button
         name="GitHub"
-        icon={MarkGitHubIcon}
+        icon={{ icon: MarkGithubIcon }}
         label="Login with GitHub"
-        class="w-50 px-2 py-2 my-2 text-xs"
-        onClick={loginUser}
-      />  
-      */
-      }
+        className="mt-2 py-2"
+        onClick={() => loginUser()}
+      >
+        GitHub
+      </Button>
 
       <Button
         icon={{ icon: KeyIcon }}

diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
@@ -1,6 +1,8 @@
 import { BookIcon, PersonIcon, SignInIcon } from '@primer/octicons-react';
+import log from 'electron-log';
 import { type FC, useCallback, useContext } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
+import { useNavigate } from 'react-router-dom';
 import { Header } from '../components/Header';
 import { Button } from '../components/buttons/Button';
 import { FieldInput } from '../components/fields/FieldInput';
@@ -58,6 +60,8 @@ export const validate = (values: IValues): IFormErrors => {
 };
 
 export const LoginWithOAuthApp: FC = () => {
+  const navigate = useNavigate();
+
   const { loginWithOAuthApp } = useContext(AppContext);
 
   const renderForm = (formProps: FormRenderProps) => {
@@ -119,8 +123,9 @@ export const LoginWithOAuthApp: FC = () => {
     async (data: IValues) => {
       try {
         await loginWithOAuthApp(data as LoginOAuthAppOptions);
+        navigate('/', { replace: true });
       } catch (err) {
-        // Skip
+        log.error('Auth: Failed to login with oauth app', err);
       }
     },
     [loginWithOAuthApp],

diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -1,4 +1,5 @@
 import { BookIcon, KeyIcon, SignInIcon } from '@primer/octicons-react';
+import log from 'electron-log';
 import { type FC, useCallback, useContext, useState } from 'react';
 import { Form, type FormRenderProps } from 'react-final-form';
 import { useNavigate } from 'react-router-dom';
@@ -125,6 +126,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
         );
         navigate(-1);
       } catch (err) {
+        log.error('Auth: failed to login with personal access token', err);
         setIsValidToken(false);
       }
     },

diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
diff --git a/src/utils/auth/utils.ts b/src/utils/auth/utils.ts
@@ -17,6 +17,7 @@ import { Constants } from '../constants';
 import { getPlatformFromHostname } from '../helpers';
 import type { AuthMethod, AuthResponse, AuthTokenResponse } from './types';
 
+// TODO - Refactor our OAuth2 flow to use system browser and local app gitify://callback - see #485 #561
 export function authGitHub(
   authOptions = Constants.DEFAULT_AUTH_OPTIONS,
 ): Promise<AuthResponse> {