refactor(auth): device code flow

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/App.tsx

@@ -12,6 +12,7 @@ import { AppProvider } from './context/App';
 import { AccountsRoute } from './routes/Accounts';
 import { FiltersRoute } from './routes/Filters';
 import { LoginRoute } from './routes/Login';
+import { LoginWithDeviceFlowRoute } from './routes/LoginWithDeviceFlow';
 import { LoginWithOAuthAppRoute } from './routes/LoginWithOAuthApp';
 import { LoginWithPersonalAccessTokenRoute } from './routes/LoginWithPersonalAccessToken';
 import { NotificationsRoute } from './routes/Notifications';
@@ -78,6 +79,10 @@ export const App = () => {
                   path="/accounts"
                 />
                 <Route element={<LoginRoute />} path="/login" />
+                <Route
+                  element={<LoginWithDeviceFlowRoute />}
+                  path="/login-device-flow"
+                />
                 <Route
                   element={<LoginWithPersonalAccessTokenRoute />}
                   path="/login-personal-access-token"

src/renderer/__helpers__/test-utils.tsx

@@ -42,6 +42,9 @@ export function AppContextProvider({
 
       // Default mock implementations for all required methods
       loginWithGitHubApp: jest.fn(),
+      startGitHubDeviceFlow: jest.fn(),
+      pollGitHubDeviceFlow: jest.fn(),
+      completeGitHubDeviceLogin: jest.fn(),
       loginWithOAuthApp: jest.fn(),
       loginWithPersonalAccessToken: jest.fn(),
       logoutFromAccount: jest.fn(),

src/renderer/context/App.tsx

@@ -25,13 +25,15 @@ import type {
   FilterSettingsValue,
   GitifyError,
   GitifyNotification,
+  Hostname,
   SettingsState,
   SettingsValue,
   Status,
   Token,
 } from '../types';
 import { FetchType } from '../types';
 import type {
+  DeviceFlowSession,
   LoginOAuthWebOptions,
   LoginPersonalAccessTokenOptions,
 } from '../utils/auth/types';
@@ -42,10 +44,11 @@ import {
   exchangeAuthCodeForAccessToken,
   getAccountUUID,
   hasAccounts,
-  performGitHubDeviceOAuth,
   performGitHubWebOAuth,
+  pollGitHubDeviceFlow,
   refreshAccount,
   removeAccount,
+  startGitHubDeviceFlow,
 } from '../utils/auth/utils';
 import {
   decryptValue,
@@ -76,6 +79,12 @@ export interface AppContextState {
   auth: AuthState;
   isLoggedIn: boolean;
   loginWithGitHubApp: () => Promise<void>;
+  startGitHubDeviceFlow: () => Promise<DeviceFlowSession>;
+  pollGitHubDeviceFlow: (session: DeviceFlowSession) => Promise<Token | null>;
+  completeGitHubDeviceLogin: (
+    token: Token,
+    hostname?: Hostname,
+  ) => Promise<void>;
   loginWithOAuthApp: (data: LoginOAuthWebOptions) => Promise<void>;
   loginWithPersonalAccessToken: (
     data: LoginPersonalAccessTokenOptions,
@@ -396,17 +405,61 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     return hasAccounts(auth);
   }, [auth]);
 
+  /**
+   * Start a GitHub device flow session.
+   */
+  const startGitHubDeviceFlowWithDefaults = useCallback(
+    async () => await startGitHubDeviceFlow(),
+    [],
+  );
+
+  /**
+   * Poll GitHub device flow session for completion.
+   */
+  const pollGitHubDeviceFlowWithSession = useCallback(
+    async (session: DeviceFlowSession) => await pollGitHubDeviceFlow(session),
+    [],
+  );
+
+  /**
+   * Persist GitHub app login after device flow completes.
+   */
+  const completeGitHubDeviceLogin = useCallback(
+    async (
+      token: Token,
+      hostname: Hostname = Constants.OAUTH_DEVICE_FLOW.hostname,
+    ) => {
+      const updatedAuth = await addAccount(auth, 'GitHub App', token, hostname);
+
+      persistAuth(updatedAuth);
+    },
+    [auth, persistAuth],
+  );
+
   /**
    * Login with GitHub App using device flow so the client secret is never bundled or persisted.
    */
   const loginWithGitHubApp = useCallback(async () => {
-    const token = await performGitHubDeviceOAuth();
-    const hostname = Constants.OAUTH_DEVICE_FLOW.hostname;
+    const session = await startGitHubDeviceFlowWithDefaults();
+    const intervalMs = Math.max(5000, session.intervalSeconds * 1000);
 
-    const updatedAuth = await addAccount(auth, 'GitHub App', token, hostname);
+    while (Date.now() < session.expiresAt) {
+      const token = await pollGitHubDeviceFlowWithSession(session);
 
-    persistAuth(updatedAuth);
-  }, [auth, persistAuth]);
+      if (token) {
+        await completeGitHubDeviceLogin(token, session.hostname);
+        return;
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, intervalMs));
+    }
+
+    throw new Error('Device code expired before authorization completed');
+  }, [
+    startGitHubDeviceFlowWithDefaults,
+    pollGitHubDeviceFlowWithSession,
+    completeGitHubDeviceLogin,
+  ]);
 
   /**
    * Login with custom GitHub OAuth App.
@@ -487,6 +540,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
       auth,
       isLoggedIn,
       loginWithGitHubApp,
+      startGitHubDeviceFlow: startGitHubDeviceFlowWithDefaults,
+      pollGitHubDeviceFlow: pollGitHubDeviceFlowWithSession,
+      completeGitHubDeviceLogin,
       loginWithOAuthApp,
       loginWithPersonalAccessToken,
       logoutFromAccount,
@@ -517,6 +573,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
       auth,
       isLoggedIn,
       loginWithGitHubApp,
+      startGitHubDeviceFlowWithDefaults,
+      pollGitHubDeviceFlowWithSession,
+      completeGitHubDeviceLogin,
       loginWithOAuthApp,
       loginWithPersonalAccessToken,
       logoutFromAccount,

src/renderer/routes/Login.tsx

@@ -1,4 +1,4 @@
-import { type FC, useCallback, useEffect } from 'react';
+import { type FC, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { KeyIcon, MarkGithubIcon, PersonIcon } from '@primer/octicons-react';
@@ -12,31 +12,18 @@ import { Centered } from '../components/layout/Centered';
 import { Size } from '../types';
 
 import { showWindow } from '../utils/comms';
-import { rendererLogError } from '../utils/logger';
 
 export const LoginRoute: FC = () => {
   const navigate = useNavigate();
 
-  const { loginWithGitHubApp, isLoggedIn } = useAppContext();
+  const { isLoggedIn } = useAppContext();
 
   useEffect(() => {
     if (isLoggedIn) {
       showWindow();
       navigate('/', { replace: true });
     }
-  }, [isLoggedIn]);
-
-  const loginUser = useCallback(async () => {
-    try {
-      await loginWithGitHubApp();
-    } catch (err) {
-      rendererLogError(
-        'loginWithGitHubApp',
-        'failed to login with GitHub',
-        err,
-      );
-    }
-  }, [loginWithGitHubApp]);
+  }, [isLoggedIn, navigate]);
 
   return (
     <Centered fullHeight={true}>
@@ -54,7 +41,7 @@ export const LoginRoute: FC = () => {
           <Button
             data-testid="login-github"
             leadingVisual={MarkGithubIcon}
-            onClick={() => loginUser()}
+            onClick={() => navigate('/login-device-flow', { replace: true })}
             variant="primary"
           >
             GitHub

src/renderer/routes/LoginWithDeviceFlow.test.tsx

@@ -0,0 +1,96 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { renderWithAppContext } from '../__helpers__/test-utils';
+
+import { LoginWithDeviceFlowRoute } from './LoginWithDeviceFlow';
+
+const navigateMock = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => navigateMock,
+}));
+
+describe('renderer/routes/LoginWithDeviceFlow.tsx', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render and initialize device flow', async () => {
+    const startGitHubDeviceFlowMock = jest.fn().mockResolvedValueOnce({
+      hostname: 'github.com',
+      clientId: 'test-id',
+      deviceCode: 'device-code',
+      userCode: 'USER-1234',
+      verificationUri: 'https://github.com/login/device',
+      intervalSeconds: 5,
+      expiresAt: Date.now() + 900000,
+    });
+
+    renderWithAppContext(<LoginWithDeviceFlowRoute />, {
+      startGitHubDeviceFlow: startGitHubDeviceFlowMock,
+    });
+
+    expect(startGitHubDeviceFlowMock).toHaveBeenCalled();
+
+    await screen.findByText(/USER-1234/);
+    expect(screen.getByText(/github.com\/login\/device/)).toBeInTheDocument();
+  });
+
+  it('should copy user code to clipboard', async () => {
+    const startGitHubDeviceFlowMock = jest.fn().mockResolvedValueOnce({
+      hostname: 'github.com',
+      clientId: 'test-id',
+      deviceCode: 'device-code',
+      userCode: 'USER-1234',
+      verificationUri: 'https://github.com/login/device',
+      intervalSeconds: 5,
+      expiresAt: Date.now() + 900000,
+    });
+
+    renderWithAppContext(<LoginWithDeviceFlowRoute />, {
+      startGitHubDeviceFlow: startGitHubDeviceFlowMock,
+    });
+
+    await screen.findByText(/USER-1234/);
+
+    await userEvent.click(screen.getByLabelText('Copy device code'));
+
+    // We can't easily spy on navigator.clipboard in tests, but the button exists and works
+    expect(screen.getByLabelText('Copy device code')).toBeInTheDocument();
+  });
+
+  it('should handle device flow errors during initialization', async () => {
+    const startGitHubDeviceFlowMock = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('Network error'));
+
+    renderWithAppContext(<LoginWithDeviceFlowRoute />, {
+      startGitHubDeviceFlow: startGitHubDeviceFlowMock,
+    });
+
+    await screen.findByText(/Failed to start authentication/);
+  });
+
+  it('should navigate back on cancel', async () => {
+    const startGitHubDeviceFlowMock = jest.fn().mockResolvedValueOnce({
+      hostname: 'github.com',
+      clientId: 'test-id',
+      deviceCode: 'device-code',
+      userCode: 'USER-1234',
+      verificationUri: 'https://github.com/login/device',
+      intervalSeconds: 5,
+      expiresAt: Date.now() + 900000,
+    });
+
+    renderWithAppContext(<LoginWithDeviceFlowRoute />, {
+      startGitHubDeviceFlow: startGitHubDeviceFlowMock,
+    });
+
+    await screen.findByText(/USER-1234/);
+
+    await userEvent.click(screen.getByText('Cancel'));
+
+    expect(navigateMock).toHaveBeenCalledWith(-1);
+  });
+});