feat(auth): use system browser for GitHub SSO / OAuth authentication

config/webpack.config.renderer.base.ts

@@ -40,10 +40,10 @@ const configuration: webpack.Configuration = {
   },
 
   plugins: [
-    // Development Keys - See README.md
+    // Development Keys - See CONTRIBUTING.md
     new webpack.EnvironmentPlugin({
-      OAUTH_CLIENT_ID: '3fef4433a29c6ad8f22c',
-      OAUTH_CLIENT_SECRET: '9670de733096c15322183ff17ed0fc8704050379',
+      OAUTH_CLIENT_ID: 'Ov23liQIkFs5ehQLNzHF',
+      OAUTH_CLIENT_SECRET: '404b80632292e18419dbd2a6ed25976856e95255',
     }),
 
     // Extract CSS into a separate file

package.json

@@ -80,6 +80,12 @@
       "package.json"
     ],
     "electronLanguages": ["en"],
+    "protocols": [
+      {
+        "name": "Gitify",
+        "schemes": ["gitify"]
+      }
+    ],
     "mac": {
       "category": "public.app-category.developer-tools",
       "icon": "assets/images/app-icon.icns",

src/main/main.ts

@@ -20,7 +20,6 @@ const browserWindowOpts = {
   resizable: false,
   skipTaskbar: true, // Hide the app from the Windows taskbar
   webPreferences: {
-    enableRemoteModule: true,
     nodeIntegration: true,
     contextIsolation: false,
   },
@@ -37,11 +36,14 @@ const mb = menubar({
 const menuBuilder = new MenuBuilder(mb);
 const contextMenu = menuBuilder.buildMenu();
 
-/**
- * Electron Auto Updater only supports macOS and Windows
- * https://github.com/electron/update-electron-app
- */
+// Register your app as the handler for a custom protocol
+app.setAsDefaultProtocolClient('gitify');
+
 if (isMacOS() || isWindows()) {
+  /**
+   * Electron Auto Updater only supports macOS and Windows
+   * https://github.com/electron/update-electron-app
+   */
   const updater = new Updater(mb, menuBuilder);
   updater.initialize();
 }
@@ -54,13 +56,6 @@ app.whenReady().then(async () => {
   mb.on('ready', () => {
     mb.app.setAppUserModelId(APPLICATION.ID);
 
-    /**
-     * 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(APPLICATION.NAME);
     mb.tray.setIgnoreDoubleClickEvents(true);
@@ -172,3 +167,9 @@ app.whenReady().then(async () => {
     app.setLoginItemSettings(settings);
   });
 });
+
+// Handle gitify:// custom protocol URL events for OAuth 2.0 callback
+app.on('open-url', (event, url) => {
+  event.preventDefault();
+  mb.window.webContents.send(namespacedEvent('auth-callback'), url);
+});

src/renderer/components/settings/AppearanceSettings.tsx

@@ -260,8 +260,8 @@ export const AppearanceSettings: FC = () => {
         <Checkbox
           name="showAccountHeader"
           label="Show account header"
-          checked={settings.showAccountHeader || hasMultipleAccounts(auth)}
-          disabled={hasMultipleAccounts(auth)}
+          checked={settings.showAccountHeader}
+          visible={!hasMultipleAccounts(auth)}
           onChange={(evt) =>
             updateSetting('showAccountHeader', evt.target.checked)
           }

src/renderer/components/settings/NotificationSettings.tsx

@@ -1,7 +1,7 @@
 import { type FC, type MouseEvent, useContext } from 'react';
 
 import { BellIcon } from '@primer/octicons-react';
-import { Stack, Text } from '@primer/react';
+import { Box, Stack, Text } from '@primer/react';
 
 import { APPLICATION } from '../../../shared/constants';
 import { AppContext } from '../../context/App';
@@ -61,9 +61,8 @@ export const NotificationSettings: FC = () => {
           tooltip={
             <Text>
               See{' '}
-              <button
-                type="button"
-                className="text-gitify-link"
+              <Box
+                className="text-gitify-link cursor-pointer"
                 title="Open GitHub documentation for participating and watching notifications"
                 onClick={(event: MouseEvent<HTMLElement>) => {
                   // Don't trigger onClick of parent element.
@@ -72,7 +71,7 @@ export const NotificationSettings: FC = () => {
                 }}
               >
                 official docs
-              </button>{' '}
+              </Box>{' '}
               for more details.
             </Text>
           }

src/renderer/routes/Accounts.tsx

@@ -49,6 +49,10 @@ export const AccountsRoute: FC = () => {
     useContext(AppContext);
   const navigate = useNavigate();
 
+  const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>(
+    {},
+  );
+
   const logoutAccount = useCallback(
     (account: Account) => {
       logoutFromAccount(account);
@@ -65,6 +69,29 @@ export const AccountsRoute: FC = () => {
     navigate('/accounts', { replace: true });
   }, []);
 
+  const handleRefresh = useCallback(async (account: Account) => {
+    const accountUUID = getAccountUUID(account);
+
+    setLoadingStates((prev) => ({
+      ...prev,
+      [accountUUID]: true,
+    }));
+
+    await refreshAccount(account);
+    navigate('/accounts', { replace: true });
+
+    /**
+     * Typically the above refresh API call completes very quickly,
+     * so we add an brief artificial delay to allow the icon to spin a few times
+     */
+    setTimeout(() => {
+      setLoadingStates((prev) => ({
+        ...prev,
+        [accountUUID]: false,
+      }));
+    }, 500);
+  }, []);
+
   const loginWithGitHub = useCallback(async () => {
     try {
       await loginWithGitHubApp();
@@ -89,11 +116,11 @@ export const AccountsRoute: FC = () => {
         {auth.accounts.map((account, i) => {
           const AuthMethodIcon = getAuthMethodIcon(account.method);
           const PlatformIcon = getPlatformIcon(account.platform);
-          const [isRefreshingAccount, setIsRefreshingAccount] = useState(false);
+          const accountUUID = getAccountUUID(account);
 
           return (
             <Box
-              key={getAccountUUID(account)}
+              key={accountUUID}
               className="rounded-md p-2 mb-4 bg-gitify-accounts"
             >
               <Stack
@@ -107,7 +134,6 @@ export const AccountsRoute: FC = () => {
                     title="Open account profile"
                     onClick={() => openAccountProfile(account)}
                     data-testid="account-profile"
-                    className="pb-2"
                   >
                     <AvatarWithFallback
                       src={account.user.avatar}
@@ -130,10 +156,10 @@ export const AccountsRoute: FC = () => {
                         </Stack>
                       </Box>
 
-                      <button
+                      <Box
                         title="Open host"
-                        type="button"
                         onClick={() => openHost(account.hostname)}
+                        className="cursor-pointer"
                         data-testid="account-host"
                       >
                         <Stack
@@ -144,12 +170,12 @@ export const AccountsRoute: FC = () => {
                           <PlatformIcon />
                           <Text>{account.hostname}</Text>
                         </Stack>
-                      </button>
+                      </Box>
 
-                      <button
+                      <Box
                         title="Open developer settings"
-                        type="button"
                         onClick={() => openDeveloperSettings(account)}
+                        className="cursor-pointer"
                         data-testid="account-developer-settings"
                       >
                         <Stack
@@ -160,7 +186,7 @@ export const AccountsRoute: FC = () => {
                           <AuthMethodIcon />
                           <Text>{account.method}</Text>
                         </Stack>
-                      </button>
+                      </Box>
                     </Stack>
                   </Box>
                 </Stack>
@@ -192,22 +218,9 @@ export const AccountsRoute: FC = () => {
                   <IconButton
                     icon={SyncIcon}
                     aria-label={`Refresh ${account.user.login}`}
-                    onClick={async () => {
-                      setIsRefreshingAccount(true);
-
-                      await refreshAccount(account);
-                      navigate('/accounts', { replace: true });
-
-                      /**
-                       * Typically the above refresh API call completes very quickly,
-                       * so we add an brief artificial delay to allow the icon to spin a few times
-                       */
-                      setTimeout(() => {
-                        setIsRefreshingAccount(false);
-                      }, 500);
-                    }}
+                    onClick={() => handleRefresh(account)}
                     size="small"
-                    loading={isRefreshingAccount}
+                    loading={loadingStates[accountUUID] || false}
                     data-testid="account-refresh"
                   />