refactor(github package): update PopupWindow dimensions and enhance useGitHubLogin options handling

- Adjusted PopupWindow dimensions for better user experience.
- Refactored useGitHubLogin to
extract individual options and utilize refs for callbacks.

Author: Migggz

packages/@react-oauth/github/src/PopupWindow.ts

@@ -71,12 +71,12 @@ export function openPopupWindow(
   let popupWindow: Window | null = null;
   let pollingIntervalId: number | null = null;
 
-  // Normalize options with defaults
+  // Normalize options with defaults and center the popup
   const normalizedOptions: Required<PopupWindowOptions> = {
-    height: 1000,
-    width: 600,
-    left: window.screen.width / 2 - 300,
-    top: window.screen.height / 2 - 500,
+    height: 700,
+    width: 500,
+    left: window.screen.width / 2 - 250,
+    top: window.screen.height / 2 - 350,
     ...options,
   };
 

packages/@react-oauth/github/src/useGitHubLogin.ts

@@ -93,28 +93,39 @@ export function useGitHubLogin(
   const popupRef = useRef<PopupWindowPromise | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
+  // Extract individual options to avoid dependency on the whole options object
+  const {
+    clientId,
+    redirectUri = '',
+    scope = 'user:email',
+    popupOptions = {},
+    allowSignup = true,
+    onSuccess,
+    onError,
+    onRequest,
+  } = options;
+
+  // Use refs for callbacks to avoid requiring users to memoize them
+  const onSuccessRef = useRef(onSuccess);
+  onSuccessRef.current = onSuccess;
+
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
+
+  const onRequestRef = useRef(onRequest);
+  onRequestRef.current = onRequest;
+
   // Generate state if not provided (for CSRF protection)
   const state = useMemo(
     () => options.state || generateState(),
     [options.state],
   );
 
   const initiateGitHubLogin = useCallback(() => {
-    const {
-      clientId,
-      redirectUri = '',
-      scope = 'user:email',
-      popupOptions = {},
-      allowSignup = true,
-      onSuccess,
-      onError,
-      onRequest,
-    } = options;
-
     // Validate required props
     if (!clientId) {
       const error = new Error('clientId is required');
-      onError(error);
+      onErrorRef.current(error);
       return;
     }
 
@@ -138,7 +149,7 @@ export function useGitHubLogin(
 
     try {
       // Call onRequest callback if provided
-      onRequest?.();
+      onRequestRef.current?.();
 
       // Open popup window
       const popup = openPopupWindow(
@@ -156,25 +167,37 @@ export function useGitHubLogin(
 
           // Verify state matches (CSRF protection)
           if (data.state && data.state !== state) {
-            onError(OAuthError.stateMismatch());
+            onErrorRef.current(OAuthError.stateMismatch());
             return;
           }
 
           if (!data.code) {
-            onError(OAuthError.missingCode());
+            onErrorRef.current(OAuthError.missingCode());
             return;
           }
-          onSuccess(data);
+          onSuccessRef.current(data);
         })
         .catch((error: Error) => {
           setIsLoading(false);
-          onError(error instanceof Error ? error : new Error(String(error)));
+          onErrorRef.current(
+            error instanceof Error ? error : new Error(String(error)),
+          );
         });
     } catch (error) {
       setIsLoading(false);
-      onError(error instanceof Error ? error : new Error(String(error)));
+      onErrorRef.current(
+        error instanceof Error ? error : new Error(String(error)),
+      );
     }
-  }, [options, state, isLoading]);
+  }, [
+    clientId,
+    redirectUri,
+    scope,
+    popupOptions,
+    allowSignup,
+    state,
+    isLoading,
+  ]);
 
   return {
     initiateGitHubLogin,