From 74cc1886fd1dbd40ff2e89754cbf4857d878410e Mon Sep 17 00:00:00 2001
From: Maged Mohamed <MagedMohammed16@GMail.Com>
Date: Thu, 18 Dec 2025 00:19:16 +0200
Subject: [PATCH 1/5] feat(implement github login): a React component + Hook
 for GitHub OAuth authentication

---
 apps/playground/public/index.html             |   2 +-
 packages/@react-oauth/github/CHANGELOG.md     |   7 +
 packages/@react-oauth/github/README.md        | 352 ++++++++++++++++++
 packages/@react-oauth/github/package.json     |  73 ++++
 packages/@react-oauth/github/rollup.config.js |   5 +
 .../@react-oauth/github/src/GitHubLogin.tsx   |  57 +++
 .../github/src/GitHubLoginButton.tsx          | 120 ++++++
 .../@react-oauth/github/src/OAuthError.ts     |  60 +++
 .../@react-oauth/github/src/PopupWindow.ts    | 274 ++++++++++++++
 packages/@react-oauth/github/src/index.ts     |  17 +
 .../@react-oauth/github/src/useGitHubLogin.ts | 193 ++++++++++
 packages/@react-oauth/github/src/utils.ts     |  87 +++++
 packages/@react-oauth/github/tsconfig.json    |   9 +
 13 files changed, 1255 insertions(+), 1 deletion(-)
 create mode 100644 packages/@react-oauth/github/CHANGELOG.md
 create mode 100644 packages/@react-oauth/github/README.md
 create mode 100644 packages/@react-oauth/github/package.json
 create mode 100644 packages/@react-oauth/github/rollup.config.js
 create mode 100644 packages/@react-oauth/github/src/GitHubLogin.tsx
 create mode 100644 packages/@react-oauth/github/src/GitHubLoginButton.tsx
 create mode 100644 packages/@react-oauth/github/src/OAuthError.ts
 create mode 100644 packages/@react-oauth/github/src/PopupWindow.ts
 create mode 100644 packages/@react-oauth/github/src/index.ts
 create mode 100644 packages/@react-oauth/github/src/useGitHubLogin.ts
 create mode 100644 packages/@react-oauth/github/src/utils.ts
 create mode 100644 packages/@react-oauth/github/tsconfig.json

diff --git a/apps/playground/public/index.html b/apps/playground/public/index.html
index 473b58a..c0aab2d 100644
--- a/apps/playground/public/index.html
+++ b/apps/playground/public/index.html
@@ -46,7 +46,7 @@
 
     <!-- Google Tag Manager -->
     <script>
-      (function(w, d, s, l, i) {
+      (function (w, d, s, l, i) {
         w[l] = w[l] || [];
         w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
         var f = d.getElementsByTagName(s)[0],
diff --git a/packages/@react-oauth/github/CHANGELOG.md b/packages/@react-oauth/github/CHANGELOG.md
new file mode 100644
index 0000000..a805be3
--- /dev/null
+++ b/packages/@react-oauth/github/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @react-oauth/github
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial release of @react-oauth/github
diff --git a/packages/@react-oauth/github/README.md b/packages/@react-oauth/github/README.md
new file mode 100644
index 0000000..85e763c
--- /dev/null
+++ b/packages/@react-oauth/github/README.md
@@ -0,0 +1,352 @@
+<div align="center">
+<h1>@react-oauth/github</h1>
+
+**A modern, production-grade React component for GitHub OAuth authentication**
+
+</div>
+
+---
+
+## Features
+
+- ✅ **Production-Ready** - Battle-tested and optimized for real-world applications
+- ✅ **Fully Typed** - Complete TypeScript support with exported types
+- ✅ **Zero Dependencies** - No runtime dependencies (only React peer deps)
+- ✅ **Flexible API** - Component, or Hook - use what fits your needs
+- ✅ **Well Documented** - Extensive documentation and examples
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install @react-oauth/github
+# or
+yarn add @react-oauth/github
+# or
+pnpm add @react-oauth/github
+```
+
+### Using the Component (Easiest)
+
+```tsx
+import { GitHubLoginButton } from '@react-oauth/github';
+
+function App() {
+  return (
+    <GitHubLoginButton
+      clientId="your-github-client-id"
+      redirectUri="http://localhost:3000/callback"
+      onSuccess={response => {
+        console.log('Authorization code:', response.code);
+        // Exchange code for access token on your backend
+      }}
+      onError={error => {
+        console.error('Authentication failed:', error);
+      }}
+    />
+  );
+}
+```
+
+### Using the Hook (Maximum Flexibility)
+
+```tsx
+import { useGitHubLogin } from '@react-oauth/github';
+
+function CustomLoginButton() {
+  const { initiateGitHubLogin, isLoading } = useGitHubLogin({
+    clientId: 'your-github-client-id',
+    redirectUri: 'http://localhost:3000/callback',
+    onSuccess: response => {
+      console.log('Authorization code:', response.code);
+    },
+    onError: error => {
+      console.error('Authentication failed:', error);
+    },
+  });
+
+  return (
+    <button onClick={initiateGitHubLogin} disabled={isLoading}>
+      {isLoading ? 'Loading...' : 'Sign in with GitHub'}
+    </button>
+  );
+}
+```
+
+## API Reference
+
+### `useGitHubLogin` Hook
+
+A custom React hook that provides GitHub OAuth functionality. Use this when you want complete control over your UI. All options, including callbacks, are passed in a single object.
+
+#### Parameters
+
+```typescript
+useGitHubLogin(options: UseGitHubLoginOptions): UseGitHubLoginReturn
+```
+
+#### Options
+
+| Option         | Type                                | Required | Default        | Description                                                          |
+| -------------- | ----------------------------------- | -------- | -------------- | -------------------------------------------------------------------- |
+| `clientId`     | `string`                            | ✅       | -              | Your GitHub OAuth App Client ID                                      |
+| `redirectUri`  | `string`                            | ❌       | `''`           | Registered redirect URI for your OAuth App                           |
+| `scope`        | `string`                            | ❌       | `'user:email'` | OAuth scopes to request (comma-separated)                            |
+| `popupOptions` | `PopupWindowOptions`                | ❌       | -              | Options for configuring the popup window                             |
+| `state`        | `string`                            | ❌       | Auto-generated | State parameter for CSRF protection (auto-generated if not provided) |
+| `allowSignup`  | `boolean`                           | ❌       | `true`         | Whether to allow signup during authentication                        |
+| `onSuccess`    | `(response: OAuthResponse) => void` | ✅       | -              | Callback called when authentication succeeds                         |
+| `onError`      | `(error: Error) => void`            | ✅       | -              | Callback called when authentication fails                            |
+| `onRequest`    | `() => void`                        | ❌       | -              | Optional callback called when OAuth flow is initiated                |
+
+#### Return Value
+
+```typescript
+{
+  initiateGitHubLogin: () => void;  // Function to initiate OAuth flow
+  isLoading: boolean;                // Loading state during authentication
+}
+```
+
+### `<GitHubLoginButton />`
+
+A ready-to-use button component for GitHub OAuth authentication. Simply provide OAuth configuration props and the button handles the OAuth flow internally. For custom implementations, use the `useGitHubLogin` hook instead.
+
+The loading state is exposed via a `data-loading` attribute so you can style it with CSS.
+
+#### Props
+
+| Prop                                  | Type                                | Required | Default                 | Description                                                          |
+| ------------------------------------- | ----------------------------------- | -------- | ----------------------- | -------------------------------------------------------------------- |
+| `clientId`                            | `string`                            | ✅       | -                       | Your GitHub OAuth App Client ID                                      |
+| `onSuccess`                           | `(response: OAuthResponse) => void` | ✅       | -                       | Callback called when authentication succeeds                         |
+| `onError`                             | `(error: Error) => void`            | ✅       | -                       | Callback called when authentication fails                            |
+| `onRequest`                           | `() => void`                        | ❌       | -                       | Optional callback called when OAuth flow is initiated                |
+| `redirectUri`                         | `string`                            | ❌       | `''`                    | Registered redirect URI for your OAuth App                           |
+| `scope`                               | `string`                            | ❌       | `'user:email'`          | OAuth scopes to request (comma-separated)                            |
+| `popupOptions`                        | `PopupWindowOptions`                | ❌       | -                       | Options for configuring the popup window                             |
+| `state`                               | `string`                            | ❌       | Auto-generated          | State parameter for CSRF protection (auto-generated if not provided) |
+| `allowSignup`                         | `boolean`                           | ❌       | `true`                  | Whether to allow signup during authentication                        |
+| `children`                            | `React.ReactNode`                   | ❌       | `'Sign in with GitHub'` | Custom React node to render as button content                        |
+| `className`                           | `string`                            | ❌       | -                       | CSS class name for the button                                        |
+| All standard `button` HTML attributes | -                                   | ❌       | -                       | All standard button props are supported                              |
+
+#### Types
+
+```typescript
+interface OAuthResponse {
+  code: string;
+  state?: string;
+  error?: string;
+  error_description?: string;
+}
+
+interface PopupWindowOptions {
+  height?: number;
+  width?: number;
+  left?: number;
+  top?: number;
+}
+
+interface UseGitHubLoginOptions {
+  clientId: string;
+  redirectUri?: string;
+  scope?: string;
+  popupOptions?: PopupWindowOptions;
+  state?: string; // Auto-generated if not provided
+  allowSignup?: boolean;
+  onSuccess: (response: OAuthResponse) => void;
+  onError: (error: Error) => void;
+  onRequest?: () => void;
+}
+
+interface UseGitHubLoginReturn {
+  initiateGitHubLogin: () => void;
+  isLoading: boolean;
+}
+```
+
+## Common Scopes
+
+- `user:email` - Read user email addresses (default)
+- `repo` - Full control of private repositories
+- `read:org` - Read org and team membership
+- `gist` - Create gists
+- `notifications` - Access notifications
+
+See [GitHub OAuth Scopes](https://docs.github.com/en/developers/apps/building-oauth-apps/scopes-for-oauth-apps) for the full list.
+
+## Error Handling
+
+The component provides comprehensive error handling with standardized error codes. All OAuth-related errors are instances of `OAuthError` with specific error codes:
+
+### Error Codes
+
+| Code    | Description                                                                               |
+| ------- | ----------------------------------------------------------------------------------------- |
+| `OA001` | The Popup Closed - User closed the popup window before completing authentication          |
+| `OA002` | Popup Blocked By Browser - Browser blocked the popup window (user needs to enable popups) |
+| `OA003` | State Mismatch - State parameter mismatch detected (possible CSRF attack)                 |
+
+### Usage
+
+```tsx
+import {
+  GitHubLoginButton,
+  OAuthError,
+  OAuthErrorCode,
+} from '@react-oauth/github';
+
+<GitHubLoginButton
+  clientId="your-client-id"
+  onSuccess={handleSuccess}
+  onError={error => {
+    if (error instanceof OAuthError) {
+      switch (error.code) {
+        case OAuthErrorCode.POPUP_CLOSED:
+          console.log('User closed the popup');
+          // Handle popup closed
+          break;
+        case OAuthErrorCode.POPUP_BLOCKED:
+          console.log('Popup blocked by browser');
+          // Prompt user to enable popups
+          break;
+        case OAuthErrorCode.STATE_MISMATCH:
+          console.log('State mismatch - possible CSRF attack');
+          // Handle security issue
+          break;
+        default:
+          console.log('Other OAuth error:', error.message);
+      }
+    } else {
+      // Handle other errors
+      console.error('Unexpected error:', error);
+    }
+  }}
+/>;
+```
+
+### Error Object Structure
+
+```typescript
+class OAuthError extends Error {
+  code: OAuthErrorCode; // Error code (e.g., "OA001")
+  originalMessage: string; // Original error message
+  message: string; // Full message with code (e.g., "OA001 The Popup Closed")
+}
+```
+
+## CSRF Protection
+
+The package automatically generates a state parameter for CSRF protection if you don't provide one. The state is verified when the OAuth callback returns. If you provide your own state, make sure to verify it matches in your `onSuccess` callback:
+
+```tsx
+const { initiateGitHubLogin } = useGitHubLogin({
+  clientId: 'your-client-id',
+  state: 'your-custom-state', // Optional - auto-generated if not provided
+  onSuccess: response => {
+    // State is automatically verified by the package
+    // But you can also verify it manually if needed
+    if (response.state === 'your-custom-state') {
+      // Proceed with authentication
+    }
+  },
+  onError: error => console.error(error),
+});
+```
+
+## How It Works
+
+This package implements the **OAuth 2.0 Authorization Code Flow** with a popup window. The flow ensures secure authentication by keeping sensitive credentials (like the Client Secret) on your backend.
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Frontend as Frontend<br/>(React App)
+    participant GitHub as GitHub<br/>OAuth Server
+    participant Backend as Your Backend<br/>Server
+
+    User->>Frontend: Clicks "Sign in with GitHub"
+    Frontend->>Frontend: Opens popup window
+    Frontend->>GitHub: Redirects to OAuth authorize endpoint<br/>(with client_id, redirect_uri, state, scope)
+    GitHub->>User: Shows login/authorization page
+    User->>GitHub: Authenticates & authorizes app
+    GitHub->>Frontend: Redirects popup to redirect_uri<br/>(with authorization code & state)
+    Frontend->>Frontend: Extracts authorization code<br/>(via polling mechanism)
+    Frontend->>Backend: Sends authorization code<br/>(POST /api/github/callback)
+    Backend->>GitHub: Exchanges code for access token<br/>(POST /login/oauth/access_token<br/>with client_id, client_secret, code)
+    GitHub->>Backend: Returns access token
+    Backend->>GitHub: Fetches user data<br/>(GET /user with access token)
+    GitHub->>Backend: Returns user profile data
+    Backend->>Frontend: Responds with user data
+    Frontend->>User: User is authenticated
+```
+
+### Key Points
+
+- **Authorization Code**: The temporary code returned by GitHub is called an "authorization code" (not an access token)
+- **Security**: The Client Secret never leaves your backend - the code exchange happens server-side
+- **Popup Flow**: Uses a popup window with polling to detect when GitHub redirects back
+- **State Parameter**: Automatically generated for CSRF protection
+
+## Setup
+
+### 1. Create a GitHub OAuth App
+
+1. Go to [GitHub Developer Settings](https://github.com/settings/developers)
+2. Click "New OAuth App"
+3. Fill in the application details:
+   - **Application name**: Your app name
+   - **Homepage URL**: Your app URL
+   - **Authorization callback URL**: Your redirect URI (e.g., `http://localhost:3000/callback`)
+4. Click "Register application"
+5. Copy the **Client ID** (you'll need this for the component)
+
+### 2. Exchange Authorization Code for Access Token
+
+The component returns an authorization `code` that you need to exchange for an access token on your backend. **Never exchange the code on the client side** - this requires your Client Secret.
+
+**Backend Example (Node.js/Express):**
+
+```javascript
+app.post('/api/github/callback', async (req, res) => {
+  const { code } = req.body;
+
+  const response = await fetch('https://github.com/login/oauth/access_token', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+    body: JSON.stringify({
+      client_id: process.env.GITHUB_CLIENT_ID,
+      client_secret: process.env.GITHUB_CLIENT_SECRET,
+      code,
+    }),
+  });
+
+  const data = await response.json();
+  const { access_token } = data;
+
+  // Use access_token to fetch user data
+  const userResponse = await fetch('https://api.github.com/user', {
+    headers: {
+      Authorization: `token ${access_token}`,
+    },
+  });
+
+  const user = await userResponse.json();
+  // Handle user authentication...
+});
+```
+
+## License
+
+MIT
+
+---
+
+<div align="center">
+Made with ❤️ for the React community
+</div>
diff --git a/packages/@react-oauth/github/package.json b/packages/@react-oauth/github/package.json
new file mode 100644
index 0000000..4999307
--- /dev/null
+++ b/packages/@react-oauth/github/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "@react-oauth/github",
+  "version": "0.0.1",
+  "description": "A modern, fully-typed React component for GitHub OAuth login 🚀",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.esm.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "rollup -c -w",
+    "build": "rollup -c",
+    "prerelease": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "author": {
+    "name": "Maged Mohamed",
+    "email": "MagedMohammed16@GMail.Com",
+    "url": "https://github.com/Migggz"
+  },
+  "homepage": "https://github.com/MomenSherif/react-oauth",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MomenSherif/react-oauth"
+  },
+  "bugs": {
+    "url": "https://github.com/MomenSherif/react-oauth/issues",
+    "email": "momensherif.2019@gmail.com"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "react-component",
+    "react-oauth-google",
+    "react-google-login",
+    "react-social-login",
+    "react-oauth",
+    "react-login",
+    "github-login",
+    "github-oAuth2",
+    "github-oAuth"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.0.8",
+    "cross-env": "^7.0.3",
+    "rollup": "^2.71.1",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  }
+}
diff --git a/packages/@react-oauth/github/rollup.config.js b/packages/@react-oauth/github/rollup.config.js
new file mode 100644
index 0000000..ee145e3
--- /dev/null
+++ b/packages/@react-oauth/github/rollup.config.js
@@ -0,0 +1,5 @@
+import { defineConfig } from 'rollup';
+import rollupConfigGenerator from 'rollup-config-generator';
+import packageJson from './package.json';
+
+export default defineConfig(rollupConfigGenerator(packageJson));
diff --git a/packages/@react-oauth/github/src/GitHubLogin.tsx b/packages/@react-oauth/github/src/GitHubLogin.tsx
new file mode 100644
index 0000000..bf0f515
--- /dev/null
+++ b/packages/@react-oauth/github/src/GitHubLogin.tsx
@@ -0,0 +1,57 @@
+import type React from 'react';
+import { GitHubLoginButton } from './GitHubLoginButton';
+import type { UseGitHubLoginOptions } from './useGitHubLogin';
+/**
+ * Props for the GitHubLogin component
+ */
+export type GitHubLoginProps = UseGitHubLoginOptions & {
+  /** Custom React node to render as the button content */
+  children?: React.ReactNode;
+  /** Additional CSS class names for the button */
+  className?: string;
+};
+
+/**
+ * A modern React component for GitHub OAuth authentication
+ *
+ * This component provides a button that opens a popup window for GitHub OAuth
+ * authentication. It handles the OAuth flow and calls the appropriate callbacks
+ * when authentication succeeds or fails.
+ *
+ * The component uses the `useGitHubLogin` hook internally. You can customize
+ * it with className and children, or use the hook directly for complete control.
+ *
+ * @example
+ * ```tsx
+ * import { GitHubLogin } from '@react-oauth/github';
+ *
+ * function App() {
+ *   return (
+ *     <GitHubLogin
+ *       clientId="your-client-id"
+ *       redirectUri="http://localhost:3000/callback"
+ *       onSuccess={(response) => {
+ *         console.log('Authorization code:', response.code);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Authentication failed:', error);
+ *       }}
+ *       className="px-4 py-2 bg-gray-900 text-white rounded"
+ *     >
+ *       Sign in with GitHub
+ *     </GitHubLogin>
+ *   );
+ * }
+ * ```
+ */
+export const GitHubLogin: React.FC<GitHubLoginProps> = ({
+  children = 'Sign in with GitHub',
+  className,
+  ...options
+}) => (
+  <GitHubLoginButton className={className} {...options}>
+    {children}
+  </GitHubLoginButton>
+);
+
+export default GitHubLogin;
diff --git a/packages/@react-oauth/github/src/GitHubLoginButton.tsx b/packages/@react-oauth/github/src/GitHubLoginButton.tsx
new file mode 100644
index 0000000..18b453a
--- /dev/null
+++ b/packages/@react-oauth/github/src/GitHubLoginButton.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import type { OAuthResponse } from './PopupWindow';
+import { type UseGitHubLoginOptions, useGitHubLogin } from './useGitHubLogin';
+import { cn } from './utils';
+
+/**
+ * Props for the GitHubLoginButton component
+ *
+ * The button handles the GitHub OAuth flow internally using the provided OAuth configuration.
+ */
+export type GitHubLoginButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onClick' | 'onError' | 'onSuccess'
+> & {
+  /** GitHub OAuth App Client ID */
+  clientId: string;
+  /** Callback function called when authentication succeeds */
+  onSuccess: (response: OAuthResponse) => void;
+  /** Callback function called when authentication fails */
+  onError: (error: Error) => void;
+  /** Registered redirect URI for your GitHub OAuth App */
+  redirectUri?: string;
+  /** OAuth scopes to request (default: "user:email") */
+  scope?: string;
+  /** Options for configuring the popup window */
+  popupOptions?: UseGitHubLoginOptions['popupOptions'];
+  /** State parameter for CSRF protection (auto-generated if not provided) */
+  state?: string;
+  /** Whether to allow signup during authentication */
+  allowSignup?: boolean;
+  /** Optional callback function called when OAuth flow is initiated */
+  onRequest?: () => void;
+  /** Custom React node to render as the button content */
+  children?: React.ReactNode;
+  /** Additional CSS class names */
+  className?: string;
+};
+
+/**
+ * A ready-to-use button component for GitHub OAuth login
+ *
+ * This component handles the GitHub OAuth flow internally. Simply provide OAuth configuration
+ * props and the button will handle the rest. For custom implementations, use the `useGitHubLogin`
+ * hook instead.
+ *
+ * The loading state is exposed via a `data-loading` attribute so you can style it with CSS.
+ *
+ * @example
+ * ```tsx
+ * import { GitHubLoginButton } from '@react-oauth/github';
+ *
+ * function App() {
+ *   return (
+ *     <GitHubLoginButton
+ *       clientId="your-client-id"
+ *       redirectUri="http://localhost:3000/callback"
+ *       onSuccess={(response) => {
+ *         console.log('Authorization code:', response.code);
+ *       }}
+ *       onError={(error) => {
+ *         console.error('Authentication failed:', error);
+ *       }}
+ *       className="px-4 py-2 bg-gray-900 text-white rounded data-[loading=true]:opacity-50"
+ *     >
+ *       Sign in with GitHub
+ *     </GitHubLoginButton>
+ *   );
+ * }
+ * ```
+ */
+export const GitHubLoginButton = React.forwardRef<
+  HTMLButtonElement,
+  GitHubLoginButtonProps
+>((props, ref) => {
+  const {
+    children = 'Sign in with GitHub',
+    className,
+    disabled,
+    clientId,
+    redirectUri,
+    scope,
+    popupOptions,
+    state,
+    allowSignup,
+    onSuccess,
+    onError,
+    onRequest,
+    ...buttonProps
+  } = props;
+
+  const { initiateGitHubLogin, isLoading } = useGitHubLogin({
+    clientId,
+    redirectUri,
+    scope,
+    popupOptions,
+    state,
+    allowSignup,
+    onSuccess,
+    onError,
+    onRequest,
+  });
+
+  return (
+    <button
+      {...buttonProps}
+      className={cn('github-login-button', className)}
+      data-loading={isLoading}
+      disabled={isLoading || disabled}
+      onClick={initiateGitHubLogin}
+      ref={ref}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+});
+
+GitHubLoginButton.displayName = 'GitHubLoginButton';
+
+export default GitHubLoginButton;
diff --git a/packages/@react-oauth/github/src/OAuthError.ts b/packages/@react-oauth/github/src/OAuthError.ts
new file mode 100644
index 0000000..4f3ed3f
--- /dev/null
+++ b/packages/@react-oauth/github/src/OAuthError.ts
@@ -0,0 +1,60 @@
+/**
+ * OAuth error codes
+ */
+export const OAuthErrorCode = {
+  /** OA001: The popup window was closed by the user */
+  POPUP_CLOSED: 'OA001',
+  /** OA002: Popup window was blocked by the browser */
+  POPUP_BLOCKED: 'OA002',
+  /** OA003: State parameter mismatch - possible CSRF attack */
+  STATE_MISMATCH: 'OA003',
+} as const;
+
+export type OAuthErrorCode = typeof OAuthErrorCode[keyof typeof OAuthErrorCode];
+
+/**
+ * Custom error class for OAuth-related errors with error codes
+ */
+export class OAuthError extends Error {
+  /** The error code (e.g., "OA001") */
+  readonly code: OAuthErrorCode;
+  /** The original error message */
+  readonly originalMessage: string;
+
+  constructor(code: OAuthErrorCode, message: string) {
+    const errorMessage = `${code} ${message}`;
+    super(errorMessage);
+    this.name = 'OAuthError';
+    this.code = code;
+    this.originalMessage = message;
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, OAuthError);
+    }
+  }
+
+  /**
+   * Creates an OAuthError for when the popup is closed
+   */
+  static popupClosed(): OAuthError {
+    return new OAuthError(OAuthErrorCode.POPUP_CLOSED, 'The Popup Closed');
+  }
+
+  /**
+   * Creates an OAuthError for when the popup is blocked
+   */
+  static popupBlocked(): OAuthError {
+    return new OAuthError(
+      OAuthErrorCode.POPUP_BLOCKED,
+      'Popup Blocked By Browser',
+    );
+  }
+
+  /**
+   * Creates an OAuthError for state mismatch
+   */
+  static stateMismatch(): OAuthError {
+    return new OAuthError(OAuthErrorCode.STATE_MISMATCH, 'State Mismatch');
+  }
+}
diff --git a/packages/@react-oauth/github/src/PopupWindow.ts b/packages/@react-oauth/github/src/PopupWindow.ts
new file mode 100644
index 0000000..fcf09d0
--- /dev/null
+++ b/packages/@react-oauth/github/src/PopupWindow.ts
@@ -0,0 +1,274 @@
+import { OAuthError } from './OAuthError';
+import { parseQueryString } from './utils';
+
+// Regex patterns for URL parsing (moved to top level for performance)
+const QUERY_PREFIX_REGEX = /^\?/;
+const HASH_PREFIX_REGEX = /^#/;
+
+/**
+ * Options for configuring the popup window
+ */
+export type PopupWindowOptions = {
+  /** Height of the popup window in pixels */
+  height?: number;
+  /** Width of the popup window in pixels */
+  width?: number;
+  /** Left position of the popup window in pixels */
+  left?: number;
+  /** Top position of the popup window in pixels */
+  top?: number;
+};
+
+/**
+ * Response data from the OAuth popup
+ */
+export type OAuthResponse = {
+  /** The authorization code returned by GitHub */
+  code: string;
+  /** Optional state parameter for CSRF protection */
+  state?: string;
+  /** Optional error message if authentication failed */
+  error?: string;
+  /** Optional error description */
+  error_description?: string;
+};
+
+/**
+ * A thenable object that represents a popup window OAuth flow
+ * Can be used directly as a Promise with .then() and .catch()
+ */
+export type PopupWindowThenable = {
+  /** Promise-like then method */
+  then<TResult1 = OAuthResponse, TResult2 = never>(
+    onfulfilled?: (value: OAuthResponse) => TResult1 | PromiseLike<TResult1>,
+    onrejected?: (reason: unknown) => TResult2 | PromiseLike<TResult2>,
+  ): Promise<TResult1 | TResult2>;
+  /** Promise-like catch method */
+  catch<TResult = never>(
+    onrejected?: (reason: unknown) => TResult | PromiseLike<TResult>,
+  ): Promise<OAuthResponse | TResult>;
+  /** Cleanup method to close the popup and stop polling */
+  cleanup: () => void;
+};
+
+/**
+ * Creates and launches a popup window for OAuth authentication
+ *
+ * This function handles opening a popup window, polling for the OAuth response,
+ * and cleaning up when done. It returns a thenable object that resolves with the
+ * OAuth response data or rejects with an error.
+ *
+ * @param id - Unique identifier for the popup window
+ * @param url - The URL to open in the popup
+ * @param options - Configuration options for the popup window
+ * @returns A thenable object that can be used as a Promise
+ *
+ * @example
+ * ```ts
+ * const popup = openPopupWindow(
+ *   'github-oauth',
+ *   'https://github.com/login/oauth/authorize?...',
+ *   { height: 1000, width: 600 }
+ * );
+ *
+ * popup.then((data) => {
+ *   console.log('Authorization code:', data.code);
+ * }).catch((error) => {
+ *   console.error('OAuth failed:', error);
+ * });
+ * ```
+ */
+export function openPopupWindow(
+  id: string,
+  url: string,
+  options: PopupWindowOptions = {},
+): PopupWindowThenable {
+  // Closure state for managing the popup window
+  let popupWindow: Window | null = null;
+  let pollingIntervalId: number | null = null;
+  let oauthPromise: Promise<OAuthResponse> = Promise.reject(
+    new Error('Popup not initialized'),
+  );
+
+  // Normalize options with defaults
+  const normalizedOptions: Required<PopupWindowOptions> = {
+    height: 1000,
+    width: 600,
+    left: window.screen.width / 2 - 300,
+    top: window.screen.height / 2 - 500,
+    ...options,
+  };
+
+  /**
+   * Stops the polling interval that checks for OAuth response
+   */
+  function stopPolling(): void {
+    if (pollingIntervalId !== null) {
+      window.clearInterval(pollingIntervalId);
+      pollingIntervalId = null;
+    }
+  }
+
+  /**
+   * Checks if the popup is still on the initial or blank page
+   */
+  function isPopupOnInitialPage(popup: Window): boolean {
+    return (
+      popup.location.href === url ||
+      popup.location.pathname === 'blank' ||
+      popup.location.href === 'about:blank'
+    );
+  }
+
+  /**
+   * Extracts OAuth response from query parameters or hash fragment
+   */
+  function extractOAuthResponse(popup: Window): OAuthResponse | null {
+    // Try query parameters first
+    const queryParams = parseQueryString(
+      popup.location.search.replace(QUERY_PREFIX_REGEX, ''),
+    );
+
+    if (queryParams.code) {
+      return {
+        code: queryParams.code,
+        state: queryParams.state,
+      };
+    }
+
+    // Try hash fragment
+    if (popup.location.hash) {
+      const hashParams = parseQueryString(
+        popup.location.hash.replace(HASH_PREFIX_REGEX, ''),
+      );
+      if (hashParams.code) {
+        return {
+          code: hashParams.code,
+          state: hashParams.state,
+        };
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Checks for OAuth errors in the URL parameters
+   */
+  function extractOAuthError(popup: Window): Error | null {
+    const params = parseQueryString(
+      popup.location.search.replace(QUERY_PREFIX_REGEX, ''),
+    );
+
+    if (params.error) {
+      return new Error(
+        params.error_description ||
+          params.error ||
+          'OAuth authentication failed',
+      );
+    }
+
+    return null;
+  }
+
+  /**
+   * Starts polling the popup window for the OAuth response
+   *
+   * This function checks the popup's location every 500ms to detect
+   * when the OAuth flow completes. It resolves when it finds the
+   * authorization code or rejects if the popup is closed.
+   */
+  function startPolling(): void {
+    oauthPromise = new Promise<OAuthResponse>((resolve, reject) => {
+      pollingIntervalId = window.setInterval(() => {
+        try {
+          const popup = popupWindow;
+
+          if (!popup || popup.closed !== false) {
+            cleanup();
+            reject(OAuthError.popupClosed());
+            return;
+          }
+
+          // Skip if still on the initial URL or blank page
+          if (isPopupOnInitialPage(popup)) {
+            return;
+          }
+
+          // Check for OAuth errors
+          const error = extractOAuthError(popup);
+          if (error) {
+            cleanup();
+            reject(error);
+            return;
+          }
+
+          // Extract OAuth response
+          const response = extractOAuthResponse(popup);
+          if (response) {
+            cleanup();
+            resolve(response);
+            return;
+          }
+        } catch (_error) {
+          // Ignore DOMException: Blocked a frame with origin from accessing a cross-origin frame.
+          // This is expected when the popup is on a different domain (GitHub).
+          // We'll keep polling until the popup redirects back to our domain.
+        }
+      }, 500);
+    });
+  }
+
+  /**
+   * Closes the popup window and stops polling
+   */
+  function cleanup(): void {
+    stopPolling();
+    if (popupWindow && !popupWindow.closed) {
+      popupWindow.close();
+    }
+  }
+
+  /**
+   * Launches the popup window and begins polling for OAuth response
+   */
+  function launchPopup(): void {
+    // Format window.open options as comma-separated key=value pairs
+    const windowOptions = [
+      `height=${normalizedOptions.height}`,
+      `width=${normalizedOptions.width}`,
+      `left=${normalizedOptions.left}`,
+      `top=${normalizedOptions.top}`,
+    ].join(',');
+
+    popupWindow = window.open(url, id, windowOptions);
+
+    if (!popupWindow) {
+      throw OAuthError.popupBlocked();
+    }
+
+    startPolling();
+  }
+
+  // Launch the popup immediately
+  launchPopup();
+
+  // Return a thenable object that can be used as a Promise
+  const thenable = {
+    // biome-ignore lint/suspicious/noThenProperty: PopupWindowThenable is intentionally thenable for Promise-like API
+    then<TResult1 = OAuthResponse, TResult2 = never>(
+      onfulfilled?: (value: OAuthResponse) => TResult1 | PromiseLike<TResult1>,
+      onrejected?: (reason: unknown) => TResult2 | PromiseLike<TResult2>,
+    ): Promise<TResult1 | TResult2> {
+      return oauthPromise.then(onfulfilled, onrejected);
+    },
+    catch<TResult = never>(
+      onrejected?: (reason: unknown) => TResult | PromiseLike<TResult>,
+    ): Promise<OAuthResponse | TResult> {
+      return oauthPromise.catch(onrejected);
+    },
+    cleanup,
+  } as PopupWindowThenable;
+
+  return thenable;
+}
diff --git a/packages/@react-oauth/github/src/index.ts b/packages/@react-oauth/github/src/index.ts
new file mode 100644
index 0000000..694f7ba
--- /dev/null
+++ b/packages/@react-oauth/github/src/index.ts
@@ -0,0 +1,17 @@
+/**
+ * @react-oauth/github
+ *
+ * A modern, fully-typed React component for GitHub OAuth authentication.
+ *
+ * @packageDocumentation
+ */
+
+export type { GitHubLoginButtonProps } from './GitHubLoginButton';
+export { GitHubLoginButton } from './GitHubLoginButton';
+export { OAuthError, OAuthErrorCode } from './OAuthError';
+export type { OAuthResponse } from './PopupWindow';
+export type {
+  UseGitHubLoginOptions,
+  UseGitHubLoginReturn,
+} from './useGitHubLogin';
+export { useGitHubLogin } from './useGitHubLogin';
diff --git a/packages/@react-oauth/github/src/useGitHubLogin.ts b/packages/@react-oauth/github/src/useGitHubLogin.ts
new file mode 100644
index 0000000..58e237e
--- /dev/null
+++ b/packages/@react-oauth/github/src/useGitHubLogin.ts
@@ -0,0 +1,193 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { OAuthError } from './OAuthError';
+import {
+  type OAuthResponse,
+  openPopupWindow,
+  type PopupWindowOptions,
+  type PopupWindowThenable,
+} from './PopupWindow';
+
+/**
+ * Configuration options for the useGitHubLogin hook
+ */
+export type UseGitHubLoginOptions = {
+  /** GitHub OAuth App Client ID (required) */
+  clientId: string;
+  /** Registered redirect URI for your GitHub OAuth App */
+  redirectUri?: string;
+  /** OAuth scopes to request (default: "user:email") */
+  scope?: string;
+  /** Options for configuring the popup window */
+  popupOptions?: PopupWindowOptions;
+  /** State parameter for CSRF protection (auto-generated if not provided) */
+  state?: string;
+  /** Whether to allow signup during authentication */
+  allowSignup?: boolean;
+  /** Callback function called when authentication succeeds */
+  onSuccess: (response: OAuthResponse) => void;
+  /** Callback function called when authentication fails */
+  onError: (error: Error) => void;
+  /** Optional callback function called when OAuth flow is initiated */
+  onRequest?: () => void;
+};
+
+/**
+ * Return type of the useGitHubLogin hook
+ */
+export type UseGitHubLoginReturn = {
+  /** Function to initiate the GitHub OAuth flow */
+  initiateGitHubLogin: () => void;
+  /** Whether the OAuth flow is currently in progress */
+  isLoading: boolean;
+};
+
+/**
+ * Generates a random state string for CSRF protection
+ * @returns A random state string
+ */
+function generateState() {
+  return (
+    Math.random().toString(36).substring(2, 15) +
+    Math.random().toString(36).substring(2, 15)
+  );
+}
+
+/**
+ * Custom React hook for GitHub OAuth authentication
+ *
+ * This hook provides a simplified and flexible way to integrate GitHub OAuth into your application.
+ * All configuration options, including callbacks, are passed in a single options object.
+ * The state parameter for CSRF protection is automatically generated if not provided.
+ *
+ * @param options - Configuration options including callbacks
+ * @returns An object containing the `initiateGitHubLogin` function and `isLoading` state
+ *
+ * @example
+ * ```tsx
+ * import { useGitHubLogin } from '@react-oauth/github';
+ *
+ * function CustomLoginButton() {
+ *   const { initiateGitHubLogin, isLoading } = useGitHubLogin({
+ *     clientId: 'your-client-id',
+ *     redirectUri: 'http://localhost:3000/callback',
+ *     onSuccess: (response) => {
+ *       console.log('Success:', response.code);
+ *     },
+ *     onError: (error) => {
+ *       console.error('Error:', error);
+ *     },
+ *   });
+ *
+ *   return (
+ *     <button onClick={initiateGitHubLogin} disabled={isLoading}>
+ *       {isLoading ? 'Loading...' : 'Sign in with GitHub'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+
+export function useGitHubLogin(
+  options: UseGitHubLoginOptions,
+): UseGitHubLoginReturn {
+  const popupRef = useRef<PopupWindowThenable | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 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);
+      return;
+    }
+
+    // Prevent multiple simultaneous login attempts
+    if (isLoading) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    // Build the OAuth authorization URL
+    const params: Record<string, string> = {
+      client_id: clientId,
+      scope,
+      redirect_uri: redirectUri,
+      state, // Always include state for CSRF protection
+    };
+
+    if (!allowSignup) {
+      params.allow_signup = 'false';
+    }
+
+    const search = Object.entries(params)
+      .filter(([_, value]) => value !== undefined && value !== '')
+      .map(
+        ([key, value]) =>
+          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
+      )
+      .join('&');
+
+    const url = `https://github.com/login/oauth/authorize?${search}`;
+
+    try {
+      // Call onRequest callback if provided
+      onRequest?.();
+
+      // Open popup window
+      const popup = openPopupWindow('github-oauth-authorize', url, {
+        height: 1000,
+        width: 600,
+        ...popupOptions,
+      });
+
+      popupRef.current = popup;
+
+      // Handle successful authentication
+      popup
+        .then((data: OAuthResponse) => {
+          setIsLoading(false);
+
+          // Verify state matches (CSRF protection)
+          if (data.state && data.state !== state) {
+            onError(OAuthError.stateMismatch());
+            return;
+          }
+
+          if (!data.code) {
+            throw new Error("'code' not found in OAuth response");
+          }
+          onSuccess(data);
+        })
+        .catch((error: Error) => {
+          setIsLoading(false);
+          onError(error instanceof Error ? error : new Error(String(error)));
+        });
+    } catch (error) {
+      setIsLoading(false);
+      onError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }, [options, state, isLoading]);
+
+  return {
+    initiateGitHubLogin,
+    isLoading,
+  };
+}
diff --git a/packages/@react-oauth/github/src/utils.ts b/packages/@react-oauth/github/src/utils.ts
new file mode 100644
index 0000000..36c8af3
--- /dev/null
+++ b/packages/@react-oauth/github/src/utils.ts
@@ -0,0 +1,87 @@
+// Regex pattern for query string parsing (moved to top level for performance)
+const QUERY_PREFIX_REGEX = /^\??\//;
+
+/**
+ * Utility function to merge class names
+ * Similar to clsx/classnames but simpler - inspired by shadcn/ui
+ */
+export function cn(
+  ...inputs: (string | undefined | null | boolean | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) {
+      continue;
+    }
+
+    if (typeof input === 'string') {
+      classes.push(input);
+    } else if (Array.isArray(input)) {
+      const inner = cn(...input);
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (typeof input === 'object') {
+      for (const key in input) {
+        if (input[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}
+
+/**
+ * Parses a query string into a params object
+ * @param query - The query string (e.g., "key1=value1&key2=value2")
+ * @returns An object with key-value pairs from the query string
+ * @example
+ * ```ts
+ * const params = parseQueryString('code=abc123&state=xyz');
+ * // { code: 'abc123', state: 'xyz' }
+ * ```
+ */
+export function parseQueryString(query: string): Record<string, string> {
+  const q = query.replace(QUERY_PREFIX_REGEX, '');
+
+  return q.split('&').reduce((values, param) => {
+    const [key, value] = param.split('=');
+    if (key) {
+      values[decodeURIComponent(key)] = decodeURIComponent(value || '');
+    }
+    return values;
+  }, {} as Record<string, string>);
+}
+
+/**
+ * Builds a query string from a params object
+ * @param params - An object with key-value pairs
+ * @param delimiter - The delimiter to use between parameters (default: '&')
+ * @returns A query string
+ * @example
+ * ```ts
+ * const query = buildQueryString({ client_id: '123', scope: 'user:email' });
+ * // "client_id=123&scope=user:email"
+ * ```
+ */
+export function buildQueryString(
+  params: Record<string, string | undefined>,
+  delimiter = '&',
+): string {
+  const keys = Object.keys(params);
+
+  return keys
+    .filter(key => params[key] !== undefined && params[key] !== null)
+    .map(key => {
+      const value = params[key];
+      if (value === undefined) {
+        return '';
+      }
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+    .filter(param => param !== '')
+    .join(delimiter);
+}
diff --git a/packages/@react-oauth/github/tsconfig.json b/packages/@react-oauth/github/tsconfig.json
new file mode 100644
index 0000000..9958d6d
--- /dev/null
+++ b/packages/@react-oauth/github/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "tsconfig/library.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declarationDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

From 3e0f97d9981d8846afe549300f7f8890a3a0b259 Mon Sep 17 00:00:00 2001
From: Maged Mohamed <MagedMohammed16@GMail.Com>
Date: Thu, 18 Dec 2025 12:52:10 +0200
Subject: [PATCH 2/5] refactor(github package): removed GithubLoginButton and
 do some enhancements

- Removed GithubLoginButton
- Simplified Building Github OAuth URL using URLSearchParams
-
Simplified OAuthError Builder and its states
- Refactor PopupWindow and Simplified the code
-
Updated README accordingly

BREAKING CHANGE: Removed the GithubLoginButton
---
 packages/@react-oauth/github/README.md        | 134 +++++++-----------
 .../@react-oauth/github/src/GitHubLogin.tsx   |  57 --------
 .../github/src/GitHubLoginButton.tsx          | 120 ----------------
 .../@react-oauth/github/src/OAuthError.ts     |  80 ++++++-----
 .../@react-oauth/github/src/PopupWindow.ts    | 101 ++++---------
 packages/@react-oauth/github/src/index.ts     |   4 +-
 .../@react-oauth/github/src/useGitHubLogin.ts |  52 +++----
 7 files changed, 144 insertions(+), 404 deletions(-)
 delete mode 100644 packages/@react-oauth/github/src/GitHubLogin.tsx
 delete mode 100644 packages/@react-oauth/github/src/GitHubLoginButton.tsx

diff --git a/packages/@react-oauth/github/README.md b/packages/@react-oauth/github/README.md
index 85e763c..58e0c32 100644
--- a/packages/@react-oauth/github/README.md
+++ b/packages/@react-oauth/github/README.md
@@ -1,7 +1,7 @@
 <div align="center">
 <h1>@react-oauth/github</h1>
 
-**A modern, production-grade React component for GitHub OAuth authentication**
+**A modern, production-grade React hook for GitHub OAuth authentication**
 
 </div>
 
@@ -12,7 +12,7 @@
 - ✅ **Production-Ready** - Battle-tested and optimized for real-world applications
 - ✅ **Fully Typed** - Complete TypeScript support with exported types
 - ✅ **Zero Dependencies** - No runtime dependencies (only React peer deps)
-- ✅ **Flexible API** - Component, or Hook - use what fits your needs
+- ✅ **Flexible API** - Custom hook for complete UI control
 - ✅ **Well Documented** - Extensive documentation and examples
 
 ## Quick Start
@@ -27,29 +27,7 @@ yarn add @react-oauth/github
 pnpm add @react-oauth/github
 ```
 
-### Using the Component (Easiest)
-
-```tsx
-import { GitHubLoginButton } from '@react-oauth/github';
-
-function App() {
-  return (
-    <GitHubLoginButton
-      clientId="your-github-client-id"
-      redirectUri="http://localhost:3000/callback"
-      onSuccess={response => {
-        console.log('Authorization code:', response.code);
-        // Exchange code for access token on your backend
-      }}
-      onError={error => {
-        console.error('Authentication failed:', error);
-      }}
-    />
-  );
-}
-```
-
-### Using the Hook (Maximum Flexibility)
+### Basic Usage
 
 ```tsx
 import { useGitHubLogin } from '@react-oauth/github';
@@ -91,13 +69,13 @@ useGitHubLogin(options: UseGitHubLoginOptions): UseGitHubLoginReturn
 | Option         | Type                                | Required | Default        | Description                                                          |
 | -------------- | ----------------------------------- | -------- | -------------- | -------------------------------------------------------------------- |
 | `clientId`     | `string`                            | ✅       | -              | Your GitHub OAuth App Client ID                                      |
+| `onSuccess`    | `(response: OAuthResponse) => void` | ✅       | -              | Callback called when authentication succeeds                         |
+| `onError`      | `(error: Error) => void`            | ✅       | -              | Callback called when authentication fails                            |
 | `redirectUri`  | `string`                            | ❌       | `''`           | Registered redirect URI for your OAuth App                           |
 | `scope`        | `string`                            | ❌       | `'user:email'` | OAuth scopes to request (comma-separated)                            |
 | `popupOptions` | `PopupWindowOptions`                | ❌       | -              | Options for configuring the popup window                             |
 | `state`        | `string`                            | ❌       | Auto-generated | State parameter for CSRF protection (auto-generated if not provided) |
 | `allowSignup`  | `boolean`                           | ❌       | `true`         | Whether to allow signup during authentication                        |
-| `onSuccess`    | `(response: OAuthResponse) => void` | ✅       | -              | Callback called when authentication succeeds                         |
-| `onError`      | `(error: Error) => void`            | ✅       | -              | Callback called when authentication fails                            |
 | `onRequest`    | `() => void`                        | ❌       | -              | Optional callback called when OAuth flow is initiated                |
 
 #### Return Value
@@ -109,29 +87,6 @@ useGitHubLogin(options: UseGitHubLoginOptions): UseGitHubLoginReturn
 }
 ```
 
-### `<GitHubLoginButton />`
-
-A ready-to-use button component for GitHub OAuth authentication. Simply provide OAuth configuration props and the button handles the OAuth flow internally. For custom implementations, use the `useGitHubLogin` hook instead.
-
-The loading state is exposed via a `data-loading` attribute so you can style it with CSS.
-
-#### Props
-
-| Prop                                  | Type                                | Required | Default                 | Description                                                          |
-| ------------------------------------- | ----------------------------------- | -------- | ----------------------- | -------------------------------------------------------------------- |
-| `clientId`                            | `string`                            | ✅       | -                       | Your GitHub OAuth App Client ID                                      |
-| `onSuccess`                           | `(response: OAuthResponse) => void` | ✅       | -                       | Callback called when authentication succeeds                         |
-| `onError`                             | `(error: Error) => void`            | ✅       | -                       | Callback called when authentication fails                            |
-| `onRequest`                           | `() => void`                        | ❌       | -                       | Optional callback called when OAuth flow is initiated                |
-| `redirectUri`                         | `string`                            | ❌       | `''`                    | Registered redirect URI for your OAuth App                           |
-| `scope`                               | `string`                            | ❌       | `'user:email'`          | OAuth scopes to request (comma-separated)                            |
-| `popupOptions`                        | `PopupWindowOptions`                | ❌       | -                       | Options for configuring the popup window                             |
-| `state`                               | `string`                            | ❌       | Auto-generated          | State parameter for CSRF protection (auto-generated if not provided) |
-| `allowSignup`                         | `boolean`                           | ❌       | `true`                  | Whether to allow signup during authentication                        |
-| `children`                            | `React.ReactNode`                   | ❌       | `'Sign in with GitHub'` | Custom React node to render as button content                        |
-| `className`                           | `string`                            | ❌       | -                       | CSS class name for the button                                        |
-| All standard `button` HTML attributes | -                                   | ❌       | -                       | All standard button props are supported                              |
-
 #### Types
 
 ```typescript
@@ -179,7 +134,7 @@ See [GitHub OAuth Scopes](https://docs.github.com/en/developers/apps/building-oa
 
 ## Error Handling
 
-The component provides comprehensive error handling with standardized error codes. All OAuth-related errors are instances of `OAuthError` with specific error codes:
+The hook provides comprehensive error handling with standardized error codes. All OAuth-related errors are `Error` objects with a `code` property containing specific error codes:
 
 ### Error Codes
 
@@ -188,53 +143,64 @@ The component provides comprehensive error handling with standardized error code
 | `OA001` | The Popup Closed - User closed the popup window before completing authentication          |
 | `OA002` | Popup Blocked By Browser - Browser blocked the popup window (user needs to enable popups) |
 | `OA003` | State Mismatch - State parameter mismatch detected (possible CSRF attack)                 |
+| `OA004` | Missing Code - Authorization code not found in OAuth response                             |
 
 ### Usage
 
 ```tsx
 import {
-  GitHubLoginButton,
+  useGitHubLogin,
   OAuthError,
   OAuthErrorCode,
 } from '@react-oauth/github';
 
-<GitHubLoginButton
-  clientId="your-client-id"
-  onSuccess={handleSuccess}
-  onError={error => {
-    if (error instanceof OAuthError) {
-      switch (error.code) {
-        case OAuthErrorCode.POPUP_CLOSED:
-          console.log('User closed the popup');
-          // Handle popup closed
-          break;
-        case OAuthErrorCode.POPUP_BLOCKED:
-          console.log('Popup blocked by browser');
-          // Prompt user to enable popups
-          break;
-        case OAuthErrorCode.STATE_MISMATCH:
-          console.log('State mismatch - possible CSRF attack');
-          // Handle security issue
-          break;
-        default:
-          console.log('Other OAuth error:', error.message);
+function LoginButton() {
+  const { initiateGitHubLogin, isLoading } = useGitHubLogin({
+    clientId: 'your-client-id',
+    onSuccess: handleSuccess,
+    onError: error => {
+      if (OAuthError.isOAuthError(error)) {
+        switch (error.code) {
+          case OAuthErrorCode.POPUP_CLOSED:
+            console.log('User closed the popup');
+            // Handle popup closed
+            break;
+          case OAuthErrorCode.POPUP_BLOCKED:
+            console.log('Popup blocked by browser');
+            // Prompt user to enable popups
+            break;
+          case OAuthErrorCode.STATE_MISMATCH:
+            console.log('State mismatch - possible CSRF attack');
+            // Handle security issue
+            break;
+          case OAuthErrorCode.MISSING_CODE:
+            console.log('Authorization code not found in response');
+            // Handle missing code
+            break;
+          default:
+            console.log('Other OAuth error:', error.message);
+        }
+      } else {
+        // Handle other errors
+        console.error('Unexpected error:', error);
       }
-    } else {
-      // Handle other errors
-      console.error('Unexpected error:', error);
-    }
-  }}
-/>;
+    },
+  });
+
+  return (
+    <button onClick={initiateGitHubLogin} disabled={isLoading}>
+      {isLoading ? 'Loading...' : 'Sign in with GitHub'}
+    </button>
+  );
+}
 ```
 
 ### Error Object Structure
 
 ```typescript
-class OAuthError extends Error {
+type OAuthError = Error & {
   code: OAuthErrorCode; // Error code (e.g., "OA001")
-  originalMessage: string; // Original error message
-  message: string; // Full message with code (e.g., "OA001 The Popup Closed")
-}
+};
 ```
 
 ## CSRF Protection
@@ -301,11 +267,11 @@ sequenceDiagram
    - **Homepage URL**: Your app URL
    - **Authorization callback URL**: Your redirect URI (e.g., `http://localhost:3000/callback`)
 4. Click "Register application"
-5. Copy the **Client ID** (you'll need this for the component)
+5. Copy the **Client ID** (you'll need this for the hook)
 
 ### 2. Exchange Authorization Code for Access Token
 
-The component returns an authorization `code` that you need to exchange for an access token on your backend. **Never exchange the code on the client side** - this requires your Client Secret.
+The hook returns an authorization `code` that you need to exchange for an access token on your backend. **Never exchange the code on the client side** - this requires your Client Secret.
 
 **Backend Example (Node.js/Express):**
 
diff --git a/packages/@react-oauth/github/src/GitHubLogin.tsx b/packages/@react-oauth/github/src/GitHubLogin.tsx
deleted file mode 100644
index bf0f515..0000000
--- a/packages/@react-oauth/github/src/GitHubLogin.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type React from 'react';
-import { GitHubLoginButton } from './GitHubLoginButton';
-import type { UseGitHubLoginOptions } from './useGitHubLogin';
-/**
- * Props for the GitHubLogin component
- */
-export type GitHubLoginProps = UseGitHubLoginOptions & {
-  /** Custom React node to render as the button content */
-  children?: React.ReactNode;
-  /** Additional CSS class names for the button */
-  className?: string;
-};
-
-/**
- * A modern React component for GitHub OAuth authentication
- *
- * This component provides a button that opens a popup window for GitHub OAuth
- * authentication. It handles the OAuth flow and calls the appropriate callbacks
- * when authentication succeeds or fails.
- *
- * The component uses the `useGitHubLogin` hook internally. You can customize
- * it with className and children, or use the hook directly for complete control.
- *
- * @example
- * ```tsx
- * import { GitHubLogin } from '@react-oauth/github';
- *
- * function App() {
- *   return (
- *     <GitHubLogin
- *       clientId="your-client-id"
- *       redirectUri="http://localhost:3000/callback"
- *       onSuccess={(response) => {
- *         console.log('Authorization code:', response.code);
- *       }}
- *       onError={(error) => {
- *         console.error('Authentication failed:', error);
- *       }}
- *       className="px-4 py-2 bg-gray-900 text-white rounded"
- *     >
- *       Sign in with GitHub
- *     </GitHubLogin>
- *   );
- * }
- * ```
- */
-export const GitHubLogin: React.FC<GitHubLoginProps> = ({
-  children = 'Sign in with GitHub',
-  className,
-  ...options
-}) => (
-  <GitHubLoginButton className={className} {...options}>
-    {children}
-  </GitHubLoginButton>
-);
-
-export default GitHubLogin;
diff --git a/packages/@react-oauth/github/src/GitHubLoginButton.tsx b/packages/@react-oauth/github/src/GitHubLoginButton.tsx
deleted file mode 100644
index 18b453a..0000000
--- a/packages/@react-oauth/github/src/GitHubLoginButton.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React from 'react';
-import type { OAuthResponse } from './PopupWindow';
-import { type UseGitHubLoginOptions, useGitHubLogin } from './useGitHubLogin';
-import { cn } from './utils';
-
-/**
- * Props for the GitHubLoginButton component
- *
- * The button handles the GitHub OAuth flow internally using the provided OAuth configuration.
- */
-export type GitHubLoginButtonProps = Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  'onClick' | 'onError' | 'onSuccess'
-> & {
-  /** GitHub OAuth App Client ID */
-  clientId: string;
-  /** Callback function called when authentication succeeds */
-  onSuccess: (response: OAuthResponse) => void;
-  /** Callback function called when authentication fails */
-  onError: (error: Error) => void;
-  /** Registered redirect URI for your GitHub OAuth App */
-  redirectUri?: string;
-  /** OAuth scopes to request (default: "user:email") */
-  scope?: string;
-  /** Options for configuring the popup window */
-  popupOptions?: UseGitHubLoginOptions['popupOptions'];
-  /** State parameter for CSRF protection (auto-generated if not provided) */
-  state?: string;
-  /** Whether to allow signup during authentication */
-  allowSignup?: boolean;
-  /** Optional callback function called when OAuth flow is initiated */
-  onRequest?: () => void;
-  /** Custom React node to render as the button content */
-  children?: React.ReactNode;
-  /** Additional CSS class names */
-  className?: string;
-};
-
-/**
- * A ready-to-use button component for GitHub OAuth login
- *
- * This component handles the GitHub OAuth flow internally. Simply provide OAuth configuration
- * props and the button will handle the rest. For custom implementations, use the `useGitHubLogin`
- * hook instead.
- *
- * The loading state is exposed via a `data-loading` attribute so you can style it with CSS.
- *
- * @example
- * ```tsx
- * import { GitHubLoginButton } from '@react-oauth/github';
- *
- * function App() {
- *   return (
- *     <GitHubLoginButton
- *       clientId="your-client-id"
- *       redirectUri="http://localhost:3000/callback"
- *       onSuccess={(response) => {
- *         console.log('Authorization code:', response.code);
- *       }}
- *       onError={(error) => {
- *         console.error('Authentication failed:', error);
- *       }}
- *       className="px-4 py-2 bg-gray-900 text-white rounded data-[loading=true]:opacity-50"
- *     >
- *       Sign in with GitHub
- *     </GitHubLoginButton>
- *   );
- * }
- * ```
- */
-export const GitHubLoginButton = React.forwardRef<
-  HTMLButtonElement,
-  GitHubLoginButtonProps
->((props, ref) => {
-  const {
-    children = 'Sign in with GitHub',
-    className,
-    disabled,
-    clientId,
-    redirectUri,
-    scope,
-    popupOptions,
-    state,
-    allowSignup,
-    onSuccess,
-    onError,
-    onRequest,
-    ...buttonProps
-  } = props;
-
-  const { initiateGitHubLogin, isLoading } = useGitHubLogin({
-    clientId,
-    redirectUri,
-    scope,
-    popupOptions,
-    state,
-    allowSignup,
-    onSuccess,
-    onError,
-    onRequest,
-  });
-
-  return (
-    <button
-      {...buttonProps}
-      className={cn('github-login-button', className)}
-      data-loading={isLoading}
-      disabled={isLoading || disabled}
-      onClick={initiateGitHubLogin}
-      ref={ref}
-      type="button"
-    >
-      {children}
-    </button>
-  );
-});
-
-GitHubLoginButton.displayName = 'GitHubLoginButton';
-
-export default GitHubLoginButton;
diff --git a/packages/@react-oauth/github/src/OAuthError.ts b/packages/@react-oauth/github/src/OAuthError.ts
index 4f3ed3f..a9469e6 100644
--- a/packages/@react-oauth/github/src/OAuthError.ts
+++ b/packages/@react-oauth/github/src/OAuthError.ts
@@ -8,53 +8,69 @@ export const OAuthErrorCode = {
   POPUP_BLOCKED: 'OA002',
   /** OA003: State parameter mismatch - possible CSRF attack */
   STATE_MISMATCH: 'OA003',
+  /** OA004: Authorization code not found in OAuth response */
+  MISSING_CODE: 'OA004',
 } as const;
 
 export type OAuthErrorCode = typeof OAuthErrorCode[keyof typeof OAuthErrorCode];
 
 /**
- * Custom error class for OAuth-related errors with error codes
+ * Error with OAuth error code attached
  */
-export class OAuthError extends Error {
-  /** The error code (e.g., "OA001") */
-  readonly code: OAuthErrorCode;
-  /** The original error message */
-  readonly originalMessage: string;
-
-  constructor(code: OAuthErrorCode, message: string) {
-    const errorMessage = `${code} ${message}`;
-    super(errorMessage);
-    this.name = 'OAuthError';
-    this.code = code;
-    this.originalMessage = message;
-
-    // Maintains proper stack trace for where our error was thrown (only available on V8)
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, OAuthError);
-    }
-  }
+export type OAuthError = Error & {
+  code: OAuthErrorCode;
+};
 
+/**
+ * Creates an OAuth error with the given code and message
+ */
+function createOAuthError(code: OAuthErrorCode, message: string): OAuthError {
+  const error = new Error(`${code} ${message}`) as OAuthError;
+  error.name = 'OAuthError';
+  error.code = code;
+  return error;
+}
+
+/**
+ * OAuth error factory functions
+ */
+export const OAuthError = {
   /**
    * Creates an OAuthError for when the popup is closed
    */
-  static popupClosed(): OAuthError {
-    return new OAuthError(OAuthErrorCode.POPUP_CLOSED, 'The Popup Closed');
-  }
+  popupClosed: (): OAuthError =>
+    createOAuthError(OAuthErrorCode.POPUP_CLOSED, 'The Popup Closed'),
 
   /**
    * Creates an OAuthError for when the popup is blocked
    */
-  static popupBlocked(): OAuthError {
-    return new OAuthError(
-      OAuthErrorCode.POPUP_BLOCKED,
-      'Popup Blocked By Browser',
-    );
-  }
+  popupBlocked: (): OAuthError =>
+    createOAuthError(OAuthErrorCode.POPUP_BLOCKED, 'Popup Blocked By Browser'),
 
   /**
    * Creates an OAuthError for state mismatch
    */
-  static stateMismatch(): OAuthError {
-    return new OAuthError(OAuthErrorCode.STATE_MISMATCH, 'State Mismatch');
-  }
-}
+  stateMismatch: (): OAuthError =>
+    createOAuthError(OAuthErrorCode.STATE_MISMATCH, 'State Mismatch'),
+
+  /**
+   * Creates an OAuthError for missing authorization code
+   */
+  missingCode: (): OAuthError =>
+    createOAuthError(
+      OAuthErrorCode.MISSING_CODE,
+      'Authorization Code Not Found',
+    ),
+
+  /**
+   * Type guard to check if an error is an OAuthError
+   */
+  isOAuthError: (error: unknown): error is OAuthError => {
+    return (
+      error instanceof Error &&
+      'code' in error &&
+      typeof (error as OAuthError).code === 'string' &&
+      Object.values(OAuthErrorCode).includes((error as OAuthError).code)
+    );
+  },
+};
diff --git a/packages/@react-oauth/github/src/PopupWindow.ts b/packages/@react-oauth/github/src/PopupWindow.ts
index fcf09d0..78ad96c 100644
--- a/packages/@react-oauth/github/src/PopupWindow.ts
+++ b/packages/@react-oauth/github/src/PopupWindow.ts
@@ -1,9 +1,4 @@
 import { OAuthError } from './OAuthError';
-import { parseQueryString } from './utils';
-
-// Regex patterns for URL parsing (moved to top level for performance)
-const QUERY_PREFIX_REGEX = /^\?/;
-const HASH_PREFIX_REGEX = /^#/;
 
 /**
  * Options for configuring the popup window
@@ -34,34 +29,23 @@ export type OAuthResponse = {
 };
 
 /**
- * A thenable object that represents a popup window OAuth flow
+ * A Promise that represents a popup window OAuth flow
  * Can be used directly as a Promise with .then() and .catch()
+ * Cleanup is handled automatically when the promise resolves or rejects
  */
-export type PopupWindowThenable = {
-  /** Promise-like then method */
-  then<TResult1 = OAuthResponse, TResult2 = never>(
-    onfulfilled?: (value: OAuthResponse) => TResult1 | PromiseLike<TResult1>,
-    onrejected?: (reason: unknown) => TResult2 | PromiseLike<TResult2>,
-  ): Promise<TResult1 | TResult2>;
-  /** Promise-like catch method */
-  catch<TResult = never>(
-    onrejected?: (reason: unknown) => TResult | PromiseLike<TResult>,
-  ): Promise<OAuthResponse | TResult>;
-  /** Cleanup method to close the popup and stop polling */
-  cleanup: () => void;
-};
+export type PopupWindowPromise = Promise<OAuthResponse>;
 
 /**
  * Creates and launches a popup window for OAuth authentication
  *
  * This function handles opening a popup window, polling for the OAuth response,
- * and cleaning up when done. It returns a thenable object that resolves with the
+ * and cleaning up when done. It returns a Promise that resolves with the
  * OAuth response data or rejects with an error.
  *
  * @param id - Unique identifier for the popup window
  * @param url - The URL to open in the popup
  * @param options - Configuration options for the popup window
- * @returns A thenable object that can be used as a Promise
+ * @returns A Promise that resolves with OAuth response or rejects with an error
  *
  * @example
  * ```ts
@@ -82,13 +66,10 @@ export function openPopupWindow(
   id: string,
   url: string,
   options: PopupWindowOptions = {},
-): PopupWindowThenable {
+): PopupWindowPromise {
   // Closure state for managing the popup window
   let popupWindow: Window | null = null;
   let pollingIntervalId: number | null = null;
-  let oauthPromise: Promise<OAuthResponse> = Promise.reject(
-    new Error('Popup not initialized'),
-  );
 
   // Normalize options with defaults
   const normalizedOptions: Required<PopupWindowOptions> = {
@@ -121,34 +102,19 @@ export function openPopupWindow(
   }
 
   /**
-   * Extracts OAuth response from query parameters or hash fragment
+   * Extracts OAuth response from query parameters
    */
   function extractOAuthResponse(popup: Window): OAuthResponse | null {
-    // Try query parameters first
-    const queryParams = parseQueryString(
-      popup.location.search.replace(QUERY_PREFIX_REGEX, ''),
-    );
+    const queryParams = new URLSearchParams(popup.location.search);
+    const code = queryParams.get('code');
 
-    if (queryParams.code) {
+    if (code) {
       return {
-        code: queryParams.code,
-        state: queryParams.state,
+        code,
+        state: queryParams.get('state') || undefined,
       };
     }
 
-    // Try hash fragment
-    if (popup.location.hash) {
-      const hashParams = parseQueryString(
-        popup.location.hash.replace(HASH_PREFIX_REGEX, ''),
-      );
-      if (hashParams.code) {
-        return {
-          code: hashParams.code,
-          state: hashParams.state,
-        };
-      }
-    }
-
     return null;
   }
 
@@ -156,14 +122,13 @@ export function openPopupWindow(
    * Checks for OAuth errors in the URL parameters
    */
   function extractOAuthError(popup: Window): Error | null {
-    const params = parseQueryString(
-      popup.location.search.replace(QUERY_PREFIX_REGEX, ''),
-    );
+    const params = new URLSearchParams(popup.location.search);
+    const error = params.get('error');
 
-    if (params.error) {
+    if (error) {
       return new Error(
-        params.error_description ||
-          params.error ||
+        params.get('error_description') ||
+          error ||
           'OAuth authentication failed',
       );
     }
@@ -178,8 +143,8 @@ export function openPopupWindow(
    * when the OAuth flow completes. It resolves when it finds the
    * authorization code or rejects if the popup is closed.
    */
-  function startPolling(): void {
-    oauthPromise = new Promise<OAuthResponse>((resolve, reject) => {
+  function startPolling(): Promise<OAuthResponse> {
+    return new Promise<OAuthResponse>((resolve, reject) => {
       pollingIntervalId = window.setInterval(() => {
         try {
           const popup = popupWindow;
@@ -232,7 +197,7 @@ export function openPopupWindow(
   /**
    * Launches the popup window and begins polling for OAuth response
    */
-  function launchPopup(): void {
+  function launchPopup(): Promise<OAuthResponse> {
     // Format window.open options as comma-separated key=value pairs
     const windowOptions = [
       `height=${normalizedOptions.height}`,
@@ -247,28 +212,10 @@ export function openPopupWindow(
       throw OAuthError.popupBlocked();
     }
 
-    startPolling();
+    return startPolling();
   }
 
-  // Launch the popup immediately
-  launchPopup();
-
-  // Return a thenable object that can be used as a Promise
-  const thenable = {
-    // biome-ignore lint/suspicious/noThenProperty: PopupWindowThenable is intentionally thenable for Promise-like API
-    then<TResult1 = OAuthResponse, TResult2 = never>(
-      onfulfilled?: (value: OAuthResponse) => TResult1 | PromiseLike<TResult1>,
-      onrejected?: (reason: unknown) => TResult2 | PromiseLike<TResult2>,
-    ): Promise<TResult1 | TResult2> {
-      return oauthPromise.then(onfulfilled, onrejected);
-    },
-    catch<TResult = never>(
-      onrejected?: (reason: unknown) => TResult | PromiseLike<TResult>,
-    ): Promise<OAuthResponse | TResult> {
-      return oauthPromise.catch(onrejected);
-    },
-    cleanup,
-  } as PopupWindowThenable;
-
-  return thenable;
+  // Launch the popup immediately and return the promise
+  // Cleanup is handled automatically when the promise resolves or rejects
+  return launchPopup();
 }
diff --git a/packages/@react-oauth/github/src/index.ts b/packages/@react-oauth/github/src/index.ts
index 694f7ba..f42af2c 100644
--- a/packages/@react-oauth/github/src/index.ts
+++ b/packages/@react-oauth/github/src/index.ts
@@ -1,13 +1,11 @@
 /**
  * @react-oauth/github
  *
- * A modern, fully-typed React component for GitHub OAuth authentication.
+ * A modern, fully-typed React hook for GitHub OAuth authentication.
  *
  * @packageDocumentation
  */
 
-export type { GitHubLoginButtonProps } from './GitHubLoginButton';
-export { GitHubLoginButton } from './GitHubLoginButton';
 export { OAuthError, OAuthErrorCode } from './OAuthError';
 export type { OAuthResponse } from './PopupWindow';
 export type {
diff --git a/packages/@react-oauth/github/src/useGitHubLogin.ts b/packages/@react-oauth/github/src/useGitHubLogin.ts
index 58e237e..857a305 100644
--- a/packages/@react-oauth/github/src/useGitHubLogin.ts
+++ b/packages/@react-oauth/github/src/useGitHubLogin.ts
@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { OAuthError } from './OAuthError';
 import {
-  type OAuthResponse,
   openPopupWindow,
+  type OAuthResponse,
   type PopupWindowOptions,
-  type PopupWindowThenable,
+  type PopupWindowPromise,
 } from './PopupWindow';
 
 /**
@@ -45,7 +45,7 @@ export type UseGitHubLoginReturn = {
  * Generates a random state string for CSRF protection
  * @returns A random state string
  */
-function generateState() {
+function generateState(): string {
   return (
     Math.random().toString(36).substring(2, 15) +
     Math.random().toString(36).substring(2, 15)
@@ -90,7 +90,7 @@ function generateState() {
 export function useGitHubLogin(
   options: UseGitHubLoginOptions,
 ): UseGitHubLoginReturn {
-  const popupRef = useRef<PopupWindowThenable | null>(null);
+  const popupRef = useRef<PopupWindowPromise | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
   // Generate state if not provided (for CSRF protection)
@@ -104,7 +104,7 @@ export function useGitHubLogin(
       clientId,
       redirectUri = '',
       scope = 'user:email',
-      popupOptions,
+      popupOptions = {},
       allowSignup = true,
       onSuccess,
       onError,
@@ -126,37 +126,26 @@ export function useGitHubLogin(
     setIsLoading(true);
 
     // Build the OAuth authorization URL
-    const params: Record<string, string> = {
-      client_id: clientId,
-      scope,
-      redirect_uri: redirectUri,
-      state, // Always include state for CSRF protection
-    };
-
-    if (!allowSignup) {
-      params.allow_signup = 'false';
-    }
-
-    const search = Object.entries(params)
-      .filter(([_, value]) => value !== undefined && value !== '')
-      .map(
-        ([key, value]) =>
-          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
-      )
-      .join('&');
-
-    const url = `https://github.com/login/oauth/authorize?${search}`;
+    const url = `https://github.com/login/oauth/authorize?${new URLSearchParams(
+      {
+        client_id: clientId,
+        scope,
+        redirect_uri: redirectUri,
+        state,
+        ...(allowSignup ? {} : { allow_signup: 'false' }),
+      },
+    )}`;
 
     try {
       // Call onRequest callback if provided
       onRequest?.();
 
       // Open popup window
-      const popup = openPopupWindow('github-oauth-authorize', url, {
-        height: 1000,
-        width: 600,
-        ...popupOptions,
-      });
+      const popup = openPopupWindow(
+        'github-oauth-authorize',
+        url,
+        popupOptions,
+      );
 
       popupRef.current = popup;
 
@@ -172,7 +161,8 @@ export function useGitHubLogin(
           }
 
           if (!data.code) {
-            throw new Error("'code' not found in OAuth response");
+            onError(OAuthError.missingCode());
+            return;
           }
           onSuccess(data);
         })

From 592b7846b945916a77ecf6f987c37b05ff9cdcb7 Mon Sep 17 00:00:00 2001
From: Maged Mohamed <MagedMohammed16@GMail.Com>
Date: Thu, 18 Dec 2025 13:04:15 +0200
Subject: [PATCH 3/5] chore(remove utils.ts from github package): removed
 utils.ts from Github Package

---
 packages/@react-oauth/github/src/utils.ts | 87 -----------------------
 1 file changed, 87 deletions(-)
 delete mode 100644 packages/@react-oauth/github/src/utils.ts

diff --git a/packages/@react-oauth/github/src/utils.ts b/packages/@react-oauth/github/src/utils.ts
deleted file mode 100644
index 36c8af3..0000000
--- a/packages/@react-oauth/github/src/utils.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-// Regex pattern for query string parsing (moved to top level for performance)
-const QUERY_PREFIX_REGEX = /^\??\//;
-
-/**
- * Utility function to merge class names
- * Similar to clsx/classnames but simpler - inspired by shadcn/ui
- */
-export function cn(
-  ...inputs: (string | undefined | null | boolean | Record<string, boolean>)[]
-): string {
-  const classes: string[] = [];
-
-  for (const input of inputs) {
-    if (!input) {
-      continue;
-    }
-
-    if (typeof input === 'string') {
-      classes.push(input);
-    } else if (Array.isArray(input)) {
-      const inner = cn(...input);
-      if (inner) {
-        classes.push(inner);
-      }
-    } else if (typeof input === 'object') {
-      for (const key in input) {
-        if (input[key]) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-}
-
-/**
- * Parses a query string into a params object
- * @param query - The query string (e.g., "key1=value1&key2=value2")
- * @returns An object with key-value pairs from the query string
- * @example
- * ```ts
- * const params = parseQueryString('code=abc123&state=xyz');
- * // { code: 'abc123', state: 'xyz' }
- * ```
- */
-export function parseQueryString(query: string): Record<string, string> {
-  const q = query.replace(QUERY_PREFIX_REGEX, '');
-
-  return q.split('&').reduce((values, param) => {
-    const [key, value] = param.split('=');
-    if (key) {
-      values[decodeURIComponent(key)] = decodeURIComponent(value || '');
-    }
-    return values;
-  }, {} as Record<string, string>);
-}
-
-/**
- * Builds a query string from a params object
- * @param params - An object with key-value pairs
- * @param delimiter - The delimiter to use between parameters (default: '&')
- * @returns A query string
- * @example
- * ```ts
- * const query = buildQueryString({ client_id: '123', scope: 'user:email' });
- * // "client_id=123&scope=user:email"
- * ```
- */
-export function buildQueryString(
-  params: Record<string, string | undefined>,
-  delimiter = '&',
-): string {
-  const keys = Object.keys(params);
-
-  return keys
-    .filter(key => params[key] !== undefined && params[key] !== null)
-    .map(key => {
-      const value = params[key];
-      if (value === undefined) {
-        return '';
-      }
-      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
-    })
-    .filter(param => param !== '')
-    .join(delimiter);
-}

From 942af2073b588332248650af37084d92d8452feb Mon Sep 17 00:00:00 2001
From: Maged Mohamed <MagedMohammed16@GMail.Com>
Date: Thu, 18 Dec 2025 13:15:42 +0200
Subject: [PATCH 4/5] chore: modified desc to reflect a React hook for GitHub
 OAuth, exported PopupWindowOptions type

---
 packages/@react-oauth/github/package.json | 14 ++++++++------
 packages/@react-oauth/github/src/index.ts |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/@react-oauth/github/package.json b/packages/@react-oauth/github/package.json
index 4999307..73b0cf4 100644
--- a/packages/@react-oauth/github/package.json
+++ b/packages/@react-oauth/github/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@react-oauth/github",
   "version": "0.0.1",
-  "description": "A modern, fully-typed React component for GitHub OAuth login 🚀",
+  "description": "A modern, fully-typed React hook for GitHub OAuth authentication 🚀",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
@@ -45,15 +45,17 @@
   "keywords": [
     "react",
     "reactjs",
-    "react-component",
-    "react-oauth-google",
-    "react-google-login",
+    "react-hook",
+    "react-hooks",
     "react-social-login",
     "react-oauth",
     "react-login",
     "github-login",
-    "github-oAuth2",
-    "github-oAuth"
+    "github-oauth",
+    "github-oauth2",
+    "oauth2",
+    "authentication",
+    "authorization"
   ],
   "devDependencies": {
     "@types/react": "^18.0.8",
diff --git a/packages/@react-oauth/github/src/index.ts b/packages/@react-oauth/github/src/index.ts
index f42af2c..b2aaa88 100644
--- a/packages/@react-oauth/github/src/index.ts
+++ b/packages/@react-oauth/github/src/index.ts
@@ -7,7 +7,7 @@
  */
 
 export { OAuthError, OAuthErrorCode } from './OAuthError';
-export type { OAuthResponse } from './PopupWindow';
+export type { OAuthResponse, PopupWindowOptions } from './PopupWindow';
 export type {
   UseGitHubLoginOptions,
   UseGitHubLoginReturn,

From efd414cc5f55536653781d28529dcdce4a4d8f60 Mon Sep 17 00:00:00 2001
From: Maged Mohamed <MagedMohammed16@GMail.Com>
Date: Thu, 18 Dec 2025 18:41:33 +0200
Subject: [PATCH 5/5] docs: update Root Documentation

---
 CONTRIBUTING.md | 120 ++++++++++++++++++
 README.md       | 331 ++++++++++++++++--------------------------------
 2 files changed, 230 insertions(+), 221 deletions(-)
 create mode 100644 CONTRIBUTING.md

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..bd2a177
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,120 @@
+# Contributing to @react-oauth
+
+Thank you for your interest in contributing to @react-oauth! This document provides guidelines and instructions for contributing.
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork: `git clone https://github.com/yourusername/react-oauth.git`
+3. Install dependencies: `yarn install`
+4. Create a branch: `git checkout -b feature/your-feature-name`
+
+## Development Workflow
+
+### Building
+
+```bash
+# Build all packages
+yarn build
+
+# Start development mode for all packages
+yarn dev
+
+# Start development mode for Google package only
+yarn dev:google
+```
+
+### Linting & Formatting
+
+We use Prettier for code formatting. Code is automatically formatted on commit via lint-staged.
+
+```bash
+# Check code formatting
+yarn prettier:check
+
+# Auto-fix formatting issues
+yarn prettier:fix
+```
+
+### Committing Changes
+
+We use [Commitizen](https://github.com/commitizen/cz-cli) for creating properly formatted commit messages following [Conventional Commits](https://www.conventionalcommits.org/):
+
+```bash
+yarn commit
+```
+
+This will guide you through creating a commit message interactively.
+
+## Code Style
+
+- We use TypeScript with strict mode enabled
+- We use Prettier for code formatting (runs automatically on commit)
+- Follow the existing code style in the repository
+- Write meaningful commit messages using Conventional Commits
+- Run `yarn prettier:fix` before committing to ensure formatting
+
+## Adding a New OAuth Provider
+
+1. Create a new package directory under `packages/@react-oauth/`
+2. Follow the structure of `packages/@react-oauth/github/`
+3. Implement the OAuth flow for your provider
+4. Update the root README.md
+5. Create a changeset: `yarn changeset`
+
+## Pull Request Process
+
+1. Run `yarn build` to ensure everything builds successfully
+2. Run `yarn prettier:check` to ensure formatting is correct
+3. Update documentation if needed
+4. Create a changeset if this is a user-facing change: `yarn changeset`
+5. Submit your pull request with a clear description
+
+## Commit Messages
+
+We follow the [Conventional Commits](https://www.conventionalcommits.org/) specification. Use `yarn commit` for interactive commit creation.
+
+**Format:**
+
+```
+<type>(<scope>): <subject>
+```
+
+**Types:**
+
+- `feat:` A new feature
+- `fix:` A bug fix
+- `docs:` Documentation only changes
+- `style:` Code style changes (formatting, etc.)
+- `refactor:` Code refactoring
+- `test:` Adding or updating tests
+- `chore:` Maintenance tasks
+
+**Scopes:**
+
+- `google` - `@react-oauth/google` package
+- `github` - `@react-oauth/github` package
+- `playground` - Playground app
+- `repo` - Repository config/tooling
+
+**Examples:**
+
+```
+feat(google): add custom button themes
+fix(github): handle popup blocked error
+docs(repo): update contributing guide
+```
+
+## Versioning
+
+This project uses [Changesets](https://github.com/changesets/changesets) for version management. If your PR includes user-facing changes:
+
+1. Create a changeset: `yarn changeset`
+2. Select the affected packages
+3. Choose the type of change (major, minor, patch)
+4. Write a summary of the changes
+5. Commit the changeset file with your changes
+
+## Questions?
+
+Feel free to open an issue for any questions or concerns.
diff --git a/README.md b/README.md
index 3c2db68..9ddd23d 100644
--- a/README.md
+++ b/README.md
@@ -1,273 +1,162 @@
-# React OAuth2 | Google
+<div align="center">
 
-Google OAuth2 using the new [**Google Identity Services SDK**](https://developers.google.com/identity/gsi/web) for React [@react-oauth/google](https://www.npmjs.com/package/@react-oauth/google)🚀
+# React OAuth
 
-## Install
+**Modern OAuth2 authentication libraries for React** 🚀
 
-```sh
-$ npm install @react-oauth/google@latest
+[![npm version](https://img.shields.io/npm/v/@react-oauth/google.svg)](https://www.npmjs.com/package/@react-oauth/google)
+[![npm version](https://img.shields.io/npm/v/@react-oauth/github.svg)](https://www.npmjs.com/package/@react-oauth/github)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-# or
-
-$ yarn add @react-oauth/google@latest
-```
-
-## Demo & How to use to fetch user details
-
-https://react-oauth.vercel.app/
-
-## Seamless sign-in and sign-up flows
-
-### Sign In With Google
-
-Add a personalized and customizable sign-up or sign-in button to your website.
-
-![personalized button](https://developers.google.com/identity/gsi/web/images/personalized-button-single_480.png)
+[Demo](https://react-oauth.vercel.app/) • [Documentation](#documentation) • [GitHub](https://github.com/MomenSherif/react-oauth)
 
-### One-tap sign-up
+</div>
 
-Sign up new users with just one tap, without interrupting them with a sign-up screen. Users get a secure, token-based, passwordless account on your site, protected by their Google Account.
+---
 
-![One-tap sign-up](https://developers.google.com/identity/gsi/web/images/one-tap-sign-in_480.png)
+## Overview
 
-### Automatic sign-in
+**React OAuth** is a collection of production-ready OAuth2 libraries for React applications. Each package is designed to be simple, type-safe, and easy to integrate into your projects.
 
-Sign users in automatically when they return to your site on any device or browser, even after their session expires.
+### Packages
 
-![Automatic sign-in](https://developers.google.com/identity/gsi/web/images/auto-sign-in_480.png)
+| Package                                                             | Description                                              | NPM                                                                                                               |
+| ------------------------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| **[@react-oauth/google](./packages/@react-oauth/google/README.md)** | Google OAuth2 using the new Google Identity Services SDK | [![npm](https://img.shields.io/npm/v/@react-oauth/google.svg)](https://www.npmjs.com/package/@react-oauth/google) |
+| **[@react-oauth/github](./packages/@react-oauth/github/README.md)** | Modern React hook for GitHub OAuth authentication        | [![npm](https://img.shields.io/npm/v/@react-oauth/github.svg)](https://www.npmjs.com/package/@react-oauth/github) |
 
-## User authorization for Google APIs (with custom button)
+---
 
-OAuth 2.0 implicit and authorization code flows for web apps
+## Quick Start
 
-> The Google Identity Services JavaScript library helps you to quickly and safely obtain access tokens necessary to call Google APIs. Your web application, complete either the OAuth 2.0 implicit flow, or to initiate the authorization code flow which then finishes on your backend platform.
+### Google OAuth
 
-## How to use
-
-1. Get your [**Google API client ID**](https://console.cloud.google.com/apis/dashboard)
-
-> Key Point: Add both `http://localhost` and `http://localhost:<port_number>` to the Authorized JavaScript origins box for local tests or development.
-
-2. Configure your OAuth [**Consent Screen**](https://console.cloud.google.com/apis/credentials/consent)
+```bash
+npm install @react-oauth/google
+# or
+yarn add @react-oauth/google
+```
 
-3. Wrap your application with `GoogleOAuthProvider`
+**Basic Usage:**
 
 ```jsx
-import { GoogleOAuthProvider } from '@react-oauth/google';
-
-<GoogleOAuthProvider clientId="<your_client_id>">...</GoogleOAuthProvider>;
+import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
+
+function App() {
+  return (
+    <GoogleOAuthProvider clientId="<your_client_id>">
+      <GoogleLogin
+        onSuccess={credentialResponse => {
+          console.log(credentialResponse);
+        }}
+        onError={() => {
+          console.log('Login Failed');
+        }}
+      />
+    </GoogleOAuthProvider>
+  );
+}
 ```
 
-### Sign In With Google
+**Features:**
 
-```jsx
-import { GoogleLogin } from '@react-oauth/google';
-
-<GoogleLogin
-  onSuccess={credentialResponse => {
-    console.log(credentialResponse);
-  }}
-  onError={() => {
-    console.log('Login Failed');
-  }}
-/>;
-```
+- ✅ Sign In With Google button
+- ✅ One-tap sign-up
+- ✅ Automatic sign-in
+- ✅ Custom login buttons
+- ✅ Implicit & Authorization Code flows
+- ✅ Full TypeScript support
 
-> If you are using popup mode (default), set the proper [Cross Origin Opener Policy](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#cross_origin_opener_policy) to avoid the [blank window issue](https://github.com/google/google-api-javascript-client/issues/796): `cross-origin-opener-policy: same-origin-allow-popups`.
+### 📖 [View Full Google Documentation →](./packages/@react-oauth/google/README.md)
 
-### One-tap
+---
 
-```jsx
-import { useGoogleOneTapLogin } from '@react-oauth/google';
-
-useGoogleOneTapLogin({
-  onSuccess: credentialResponse => {
-    console.log(credentialResponse);
-  },
-  onError: () => {
-    console.log('Login Failed');
-  },
-});
+### GitHub OAuth
+
+```bash
+npm install @react-oauth/github
+# or
+yarn add @react-oauth/github
 ```
 
-or
+**Basic Usage:**
 
 ```jsx
-import { GoogleLogin } from '@react-oauth/google';
-
-<GoogleLogin
-  onSuccess={credentialResponse => {
-    console.log(credentialResponse);
-  }}
-  onError={() => {
-    console.log('Login Failed');
-  }}
-  useOneTap
-/>;
+import { useGitHubLogin } from '@react-oauth/github';
+
+function LoginButton() {
+  const { initiateGitHubLogin, isLoading } = useGitHubLogin({
+    clientId: 'your-github-client-id',
+    redirectUri: 'http://localhost:3000/callback',
+    onSuccess: response => {
+      console.log('Authorization code:', response.code);
+      // Exchange code for access token on your backend
+    },
+    onError: error => {
+      console.error('Authentication failed:', error);
+    },
+  });
+
+  return (
+    <button onClick={initiateGitHubLogin} disabled={isLoading}>
+      {isLoading ? 'Loading...' : 'Sign in with GitHub'}
+    </button>
+  );
+}
 ```
 
-> If you are using one tap login, when logging user out consider [this issue](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out#sign-out) may happen, to prevent it call `googleLogout` when logging user out from your application.
-
-```jsx
-import { googleLogout } from '@react-oauth/google';
+**Features:**
 
-googleLogout();
-```
+- ✅ Production-ready React hook
+- ✅ Fully typed with TypeScript
+- ✅ Zero runtime dependencies
+- ✅ Flexible API with complete UI control
+- ✅ Comprehensive error handling
+- ✅ Built-in CSRF protection
 
-### Automatic sign-in
+### 📖 [View Full GitHub Documentation →](./packages/@react-oauth/github/README.md)
 
-> `auto_select` prop `true`
+---
 
-```jsx
+## Documentation
 
-<GoogleLogin
-    ...
-    auto_select
-/>
+### Google OAuth
 
-useGoogleOneTapLogin({
-    ...
-    auto_select
-});
-```
+- **[Complete API Reference 🚀](./packages/@react-oauth/google/README.md)** - Full documentation with all props, hooks, and examples
+- **[Google Identity Services Docs](https://developers.google.com/identity/gsi/web)** - Official Google documentation
+- **[Live Demo](https://react-oauth.vercel.app/)** - Interactive playground for Google OAuth
 
-### Custom login button (implicit & authorization code flow)
+### GitHub OAuth
 
-#### Implicit flow
+- **[Complete API Reference 🚀](./packages/@react-oauth/github/README.md)** - Full documentation with examples and error handling
+- **[GitHub OAuth Docs](https://docs.github.com/en/developers/apps/building-oauth-apps)** - Official GitHub OAuth documentation
 
-```jsx
-import { useGoogleLogin } from '@react-oauth/google';
+---
 
-const login = useGoogleLogin({
-  onSuccess: tokenResponse => console.log(tokenResponse),
-});
+## Demo
 
-<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;
-```
+Check out the live demo to see the Google OAuth package in action:
 
-#### Authorization code flow
+🔗 **[https://react-oauth.vercel.app/](https://react-oauth.vercel.app/)** _(Google OAuth only)_
 
-> Requires backend to exchange code with access and refresh token.
+---
 
-```jsx
-import { useGoogleLogin } from '@react-oauth/google';
+## Contributing
 
-const login = useGoogleLogin({
-  onSuccess: codeResponse => console.log(codeResponse),
-  flow: 'auth-code',
-});
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
 
-<MyCustomButton onClick={() => login()}>Sign in with Google 🚀</MyCustomButton>;
-```
+---
 
-#### Checks if the user granted all the specified scope or scopes
+## License
 
-```jsx
-import { hasGrantedAllScopesGoogle } from '@react-oauth/google';
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-const hasAccess = hasGrantedAllScopesGoogle(
-  tokenResponse,
-  'google-scope-1',
-  'google-scope-2',
-);
-```
+---
 
-#### Checks if the user granted any of the specified scope or scopes
+<div align="center">
 
-```jsx
-import { hasGrantedAnyScopeGoogle } from '@react-oauth/google';
+Made with ❤️ for the React community
 
-const hasAccess = hasGrantedAnyScopeGoogle(
-  tokenResponse,
-  'google-scope-1',
-  'google-scope-2',
-);
-```
+**[GitHub](https://github.com/MomenSherif/react-oauth)** • **[Issues](https://github.com/MomenSherif/react-oauth/issues)** • [@react-oauth/google](https://www.npmjs.com/package/@react-oauth/google) • [@react-oauth/github](https://www.npmjs.com/package/@react-oauth/github)
 
-#### [Content Security Policy (if needed)](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#content_security_policy)
-
-## API
-
-### GoogleOAuthProvider
-
-| Required | Prop                | Type       | Description                                                                 |
-| :------: | ------------------- | ---------- | --------------------------------------------------------------------------- |
-|    ✓     | clientId            | `string`   | [**Google API client ID**](https://console.cloud.google.com/apis/dashboard) |
-|          | nonce               | `string`   | Nonce applied to GSI script tag. Propagates to GSI's inline style tag       |
-|          | onScriptLoadSuccess | `function` | Callback fires on load gsi script success                                   |
-|          | onScriptLoadError   | `function` | Callback fires on load gsi script failure                                   |
-
-### GoogleLogin
-
-| Required | Prop                               | Type                                                          | Description                                                                                                                                                                                                                                                                       |
-| :------: | ---------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|    ✓     | onSuccess                          | `(response: CredentialResponse) => void`                      | Callback fires with credential response after successfully login                                                                                                                                                                                                                  |
-|          | onError                            | `function`                                                    | Callback fires after login failure                                                                                                                                                                                                                                                |
-|          | type                               | `standard` \| `icon`                                          | Button type [type](https://developers.google.com/identity/gsi/web/reference/js-reference#type)                                                                                                                                                                                    |
-|          | theme                              | `outline` \| `filled_blue` \| `filled_black`                  | Button [theme](https://developers.google.com/identity/gsi/web/reference/js-reference#theme)                                                                                                                                                                                       |
-|          | size                               | `large` \| `medium` \| `small`                                | Button [size](https://developers.google.com/identity/gsi/web/reference/js-reference#size)                                                                                                                                                                                         |
-|          | text                               | `signin_with` \| `signup_with` \| `continue_with` \| `signin` | Button [text](https://developers.google.com/identity/gsi/web/reference/js-reference#text). For example, "Sign in with Google", "Sign up with Google" or "Sign in"                                                                                                                 |
-|          | shape                              | `rectangular` \| `pill` \| `circle` \| `square`               | Button [shape](https://developers.google.com/identity/gsi/web/reference/js-reference#shape)                                                                                                                                                                                       |
-|          | logo_alignment                     | `left` \| `center`                                            | Google [logo alignment](https://developers.google.com/identity/gsi/web/reference/js-reference#logo_alignment)                                                                                                                                                                     |
-|          | width                              | `string`                                                      | button [width](https://developers.google.com/identity/gsi/web/reference/js-reference#width), in pixels                                                                                                                                                                            |
-|          | locale                             | `string`                                                      | If set, then the button [language](https://developers.google.com/identity/gsi/web/reference/js-reference#locale) is rendered                                                                                                                                                      |
-|          | useOneTap                          | `boolean`                                                     | Activate One-tap sign-up or not                                                                                                                                                                                                                                                   |
-|          | promptMomentNotification           | `(notification: PromptMomentNotification) => void`            | [PromptMomentNotification](https://developers.google.com/identity/gsi/web/reference/js-reference) methods and description                                                                                                                                                         |
-|          | cancel_on_tap_outside              | `boolean`                                                     | Controls whether to cancel the prompt if the user clicks outside of the prompt                                                                                                                                                                                                    |
-|          | auto_select                        | `boolean`                                                     | Enables automatic selection on Google One Tap                                                                                                                                                                                                                                     |
-|          | ux_mode                            | `popup` \| `redirect`                                         | The Sign In With Google button UX flow                                                                                                                                                                                                                                            |
-|          | login_uri                          | `string`                                                      | The URL of your login endpoint                                                                                                                                                                                                                                                    |
-|          | native_login_uri                   | `string`                                                      | The URL of your password credential handler endpoint                                                                                                                                                                                                                              |
-|          | native_callback                    | `(response: { id: string; password: string }) => void`        | The JavaScript password credential handler function name                                                                                                                                                                                                                          |
-|          | prompt_parent_id                   | `string`                                                      | The DOM ID of the One Tap prompt container element                                                                                                                                                                                                                                |
-|          | nonce                              | `string`                                                      | A random string for ID tokens                                                                                                                                                                                                                                                     |
-|          | context                            | `signin` \| `signup` \| `use`                                 | The title and words in the One Tap prompt                                                                                                                                                                                                                                         |
-|          | state_cookie_domain                | `string`                                                      | If you need to call One Tap in the parent domain and its subdomains, pass the parent domain to this attribute so that a single shared cookie is used                                                                                                                              |
-|          | allowed_parent_origin              | `string` \| `string[]`                                        | The origins that are allowed to embed the intermediate iframe. One Tap will run in the intermediate iframe mode if this attribute presents                                                                                                                                        |
-|          | intermediate_iframe_close_callback | `function`                                                    | Overrides the default intermediate iframe behavior when users manually close One Tap                                                                                                                                                                                              |
-|          | itp_support                        | `boolean`                                                     | Enables upgraded One Tap UX on ITP browsers                                                                                                                                                                                                                                       |
-|          | hosted_domain                      | `string`                                                      | If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the [hd](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs |
-|          | use_fedcm_for_prompt               | `boolean`                                                     | Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google.                                                                                                                                                                   |
-|          | use_fedcm_for_button               | `boolean`                                                     | Enable FedCM Button flow.                                                                                                                                                                                                                                                         |
-
-### useGoogleLogin (Both implicit & authorization code flow)
-
-| Required | Prop                  | Type                                                                                      | Description                                                                                                                                                                                                                                                                                                                                     |
-| :------: | --------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|          | flow                  | `implicit` \| `auth-code`                                                                 | [Two flows](https://developers.google.com/identity/oauth2/web/guides/how-user-authz-works), implicit and authorization code are discussed. Both return an access token suitable for use with Google APIs                                                                                                                                        |
-|          | onSuccess             | `(response: TokenResponse\|CodeResponse) => void`                                         | Callback fires with response ([token](https://developers.google.com/identity/oauth2/web/reference/js-reference#TokenResponse) \| [code](https://developers.google.com/identity/oauth2/web/reference/js-reference#CodeResponse)) based on flow selected after successfully login                                                                 |
-|          | onError               | `(errorResponse: {error: string; error_description?: string,error_uri?: string}) => void` | Callback fires after login failure                                                                                                                                                                                                                                                                                                              |
-|          | onNonOAuthError       | `(nonOAuthError: NonOAuthError) => void`                                                  | Some non-OAuth errors, such as the popup window is failed to open or closed before an OAuth response is returned. `popup_failed_to_open` \| `popup_closed` \| `unknown`                                                                                                                                                                         |
-|          | scope                 | `string`                                                                                  | A space-delimited list of scopes that are approved by the user                                                                                                                                                                                                                                                                                  |
-|          | enable_serial_consent | `boolean`                                                                                 | defaults to true. If set to false, [more granular Google Account permissions](https://developers.googleblog.com/2018/10/more-granular-google-account.html) will be disabled for clients created before 2019. No effect for newer clients, since more granular permissions is always enabled for them.                                           |
-|          | hint                  | `string`                                                                                  | If your application knows which user should authorize the request, it can use this property to provide a hint to Google. The email address for the target user. For more information, see the [login_hint](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs |
-|          | hosted_domain         | `string`                                                                                  | If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the [hd](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs                                                               |
-
-### useGoogleLogin (Extra implicit flow props)
-
-| Required | Prop   | Type                                            | Description                                                                                                                                                         |
-| :------: | ------ | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|          | prompt | `''` \| `none` \| `consent` \| `select_account` | defaults to 'select_account'. A space-delimited, case-sensitive list of prompts to present the user                                                                 |
-|          | state  | `string`                                        | Not recommended. Specifies any string value that your application uses to maintain state between your authorization request and the authorization server's response |
-
-### useGoogleLogin (Extra authorization code flow props)
-
-| Required | Prop           | Type                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| :------: | -------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|          | ux_mode        | `popup` \| `redirect` | The UX mode to use for the authorization flow. By default, it will open the consent flow in a popup. Valid values are popup and redirect                                                                                                                                                                                                                                                                                                                |
-|          | redirect_uri   | `string`              | Required for redirect UX. Determines where the API server redirects the user after the user completes the authorization flow The value must exactly match one of the authorized redirect URIs for the OAuth 2.0 client which you configured in the API Console and must conform to our [Redirect URI validation](https://developers.google.com/identity/protocols/oauth2/web-server#uri-validation) rules. The property will be ignored by the popup UX |
-|          | state          | `string`              | Recommended for redirect UX. Specifies any string value that your application uses to maintain state between your authorization request and the authorization server's response                                                                                                                                                                                                                                                                         |
-|          | select_account | `boolean`             | defaults to 'false'. Boolean value to prompt the user to select an account                                                                                                                                                                                                                                                                                                                                                                              |
-
-### useGoogleOneTapLogin
-
-| Required | Prop                     | Type                                               | Description                                                                                                                                                                                                                                                                       |
-| :------: | ------------------------ | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|    ✓     | onSuccess                | `(response: CredentialResponse) => void`           | Callback fires with credential response after successfully login                                                                                                                                                                                                                  |
-|          | onError                  | `function`                                         | Callback fires after login failure                                                                                                                                                                                                                                                |
-|          | promptMomentNotification | `(notification: PromptMomentNotification) => void` | [PromptMomentNotification](https://developers.google.com/identity/gsi/web/reference/js-reference) methods and description                                                                                                                                                         |
-|          | cancel_on_tap_outside    | `boolean`                                          | Controls whether to cancel the prompt if the user clicks outside of the prompt                                                                                                                                                                                                    |
-|          | hosted_domain            | `string`                                           | If your application knows the Workspace domain the user belongs to, use this to provide a hint to Google. For more information, see the [hd](https://developers.google.com/identity/protocols/oauth2/openid-connect#authenticationuriparameters) field in the OpenID Connect docs |
-|          | disabled                 | `boolean`                                          | Controls whether to cancel the popup in cases such as when the user is already logged in                                                                                                                                                                                          |
-|          | use_fedcm_for_prompt     | `boolean`                                          | Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google.                                                                                                                                                                   |
-|          | use_fedcm_for_button     | `boolean`                                          | Enable FedCM Button flow.                                                                                                                                                                                                                                                         |
+</div>