19946653658

Committed 04 Dec 2025 10:56PM UTC coverage: 62.673%. Remained the same

Build # 19946653658

Build Type

push

github

Committed by

jcubic

Commit Message

10xDev Project

Run Details

303 of 501 branches covered (60.48%)

Branch coverage included in aggregate %.

555 of 864 new or added lines in 49 files covered. (64.24%)

4 existing lines in 1 file now uncovered.

555 of 868 relevant lines covered (63.94%)

214.35 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

36.36

/src/components/GitHubSignInButton.tsx

/**
 * Button component for GitHub OAuth authentication.
 * Handles GitHub social sign-in flow using Better Auth client.
 *
 * @remarks
 * Dependencies: `@chakra-ui/react` for Button component with styling,
 * and `@/lib/auth-client` for Better Auth client used in social authentication.
 *
 * **Features:**
 * - One-click GitHub OAuth sign-in
 * - Loading state during authentication
 * - Automatic redirect to homepage after successful sign-in
 * - Error handling with console logging
 * - GitHub-branded styling (dark gray background)
 *
 * **Authentication Flow:**
 * 1. User clicks "Continue with GitHub" button
 * 2. Button shows loading state ("Signing in...")
 * 3. Better Auth initiates OAuth flow with GitHub
 * 4. User authorizes app on GitHub (redirects to GitHub)
 * 5. GitHub redirects back to app callback URL
 * 6. Better Auth processes OAuth callback
 * 7. User redirected to homepage (`/`)
 *
 * **Error Handling:**
 * - Catches authentication errors
 * - Logs errors to console
 * - Resets loading state on error
 * - Does not show error UI (relies on console for debugging)
 *
 * **Styling:**
 * - Full-width button
 * - Dark background (#18181b) matching GitHub branding
 * - White text for contrast
 * - Hover effect (lighter gray)
 * - Large size for prominence
 *
 * @example
 * ```tsx
 * import GitHubSignInButton from '@/components/GitHubSignInButton';
 *
 * export default function LoginPage() {
 *   return (
 *     <div>
 *       <h1>Sign In</h1>
 *       <GitHubSignInButton />
 *       <p>Or sign in with email...</p>
 *     </div>
 *   );
 * }
 * ```
 *
 * @example
 * ```tsx
 * // Used in register page alongside email registration
 * <VStack gap={4}>
 *   <GitHubSignInButton />
 *   <Divider />
 *   <EmailRegistrationForm />
 * </VStack>
 * ```
 *
 * @public
 */
'use client';

import { Button } from '@chakra-ui/react';
import { useState } from 'react';
import { authClient } from '@/lib/auth-client';

/**
 * GitHub OAuth sign-in button with loading state.
 *
 * @returns Rendered GitHub sign-in button
 *
 * @remarks
 * **Behavior:**
 * - Disabled during sign-in process to prevent double-clicks
 * - Button text changes to "Signing in..." during loading
 * - Redirects to homepage (`/`) after successful authentication
 * - Loading state persists until OAuth flow completes or errors
 *
 * **OAuth Flow:**
 * - Uses Better Auth's `authClient.signIn.social()` method
 * - Provider: `github`
 * - Callback URL: `/` (homepage)
 * - Better Auth handles OAuth redirect and token exchange
 *
 * **Error Handling:**
 * - Errors logged to console (for debugging)
 * - Loading state reset to allow retry
 * - No user-facing error message (consider adding toast notification)
 *
 * **Security:**
 * - OAuth handled by Better Auth (secure token exchange)
 * - No credentials stored client-side
 * - GitHub app credentials configured server-side
 *
 * **Accessibility:**
 * - Disabled state prevents multiple submissions
 * - Loading text provides feedback
 * - High contrast colors (white on dark gray)
 *
 * @example
 * ```tsx
 * // User clicks button
 * // -> Button shows "Signing in..."
 * // -> Redirects to GitHub authorization page
 * // -> User authorizes app
 * // -> Redirects back to app
 * // -> Better Auth processes callback
 * // -> User signed in and redirected to "/"
 * <GitHubSignInButton />
 * ```
 *
 * @public
 */
export default function GitHubSignInButton() {
  const [isLoading, setIsLoading] = useState(false);

  const handleGitHubSignIn = async () => {
    try {
      setIsLoading(true);
      await authClient.signIn.social({
        provider: 'github',
        callbackURL: '/'
      });
    } catch (error) {
      console.error('GitHub sign-in error:', error);
      setIsLoading(false);
    }
  };

  return (
    <Button
      onClick={handleGitHubSignIn}
      disabled={isLoading}
      size="lg"
      bg="gray.900"
      color="white"
      _hover={{
        bg: 'gray.700'
      }}
      px={8}
      py={6}
      width="full"
    >
      {isLoading ? 'Signing in...' : 'Continue with GitHub'}
    </Button>
  );
}

1	/**
2	* Button component for GitHub OAuth authentication.
3	* Handles GitHub social sign-in flow using Better Auth client.
4	*
5	* @remarks
6	* Dependencies: `@chakra-ui/react` for Button component with styling,
7	* and `@/lib/auth-client` for Better Auth client used in social authentication.
8	*
9	* Features:
10	* - One-click GitHub OAuth sign-in
11	* - Loading state during authentication
12	* - Automatic redirect to homepage after successful sign-in
13	* - Error handling with console logging
14	* - GitHub-branded styling (dark gray background)
15	*
16	* Authentication Flow:
17	* 1. User clicks "Continue with GitHub" button
18	* 2. Button shows loading state ("Signing in...")
19	* 3. Better Auth initiates OAuth flow with GitHub
20	* 4. User authorizes app on GitHub (redirects to GitHub)
21	* 5. GitHub redirects back to app callback URL
22	* 6. Better Auth processes OAuth callback
23	* 7. User redirected to homepage (`/`)
24	*
25	* Error Handling:
26	* - Catches authentication errors
27	* - Logs errors to console
28	* - Resets loading state on error
29	* - Does not show error UI (relies on console for debugging)
30	*
31	* Styling:
32	* - Full-width button
33	* - Dark background (#18181b) matching GitHub branding
34	* - White text for contrast
35	* - Hover effect (lighter gray)
36	* - Large size for prominence
37	*
38	* @example
39	* ```tsx
40	* import GitHubSignInButton from '@/components/GitHubSignInButton';
41	*
42	* export default function LoginPage() {
43	* return (
44	* <div>
45	* <h1>Sign In</h1>
46	* <GitHubSignInButton />
47	* <p>Or sign in with email...</p>
48	* </div>
49	* );
50	* }
51	* ```
52	*
53	* @example
54	* ```tsx
55	* // Used in register page alongside email registration
56	* <VStack gap={4}>
57	* <GitHubSignInButton />
58	* <Divider />
59	* <EmailRegistrationForm />
60	* </VStack>
61	* ```
62	*
63	* @public
64	*/
65	'use client';
66
67	import { Button } from '@chakra-ui/react';
68	import { useState } from 'react';
69	import { authClient } from '@/lib/auth-client';
70
71	/**
72	* GitHub OAuth sign-in button with loading state.
73	*
74	* @returns Rendered GitHub sign-in button
75	*
76	* @remarks
77	* Behavior:
78	* - Disabled during sign-in process to prevent double-clicks
79	* - Button text changes to "Signing in..." during loading
80	* - Redirects to homepage (`/`) after successful authentication
81	* - Loading state persists until OAuth flow completes or errors
82	*
83	* OAuth Flow:
84	* - Uses Better Auth's `authClient.signIn.social()` method
85	* - Provider: `github`
86	* - Callback URL: `/` (homepage)
87	* - Better Auth handles OAuth redirect and token exchange
88	*
89	* Error Handling:
90	* - Errors logged to console (for debugging)
91	* - Loading state reset to allow retry
92	* - No user-facing error message (consider adding toast notification)
93	*
94	* Security:
95	* - OAuth handled by Better Auth (secure token exchange)
96	* - No credentials stored client-side
97	* - GitHub app credentials configured server-side
98	*
99	* Accessibility:
100	* - Disabled state prevents multiple submissions
101	* - Loading text provides feedback
102	* - High contrast colors (white on dark gray)
103	*
104	* @example
105	* ```tsx
106	* // User clicks button
107	* // -> Button shows "Signing in..."
108	* // -> Redirects to GitHub authorization page
109	* // -> User authorizes app
110	* // -> Redirects back to app
111	* // -> Better Auth processes callback
112	* // -> User signed in and redirected to "/"
113	* <GitHubSignInButton />
114	* ```
115	*
116	* @public
117	*/
118	export default function GitHubSignInButton() {	18✔
119	const [isLoading, setIsLoading] = useState(false);	12✔
120
121	const handleGitHubSignIn = async () => {	12✔
NEW 122	try {	×
NEW 123	setIsLoading(true);	×
NEW 124	await authClient.signIn.social({	×
125	provider: 'github',
126	callbackURL: '/'
127	});
128	} catch (error) {
NEW 129	console.error('GitHub sign-in error:', error);	×
NEW 130	setIsLoading(false);	×
131	}
132	};
133
NEW 134	return (	×
135	<Button
136	onClick={handleGitHubSignIn}
137	disabled={isLoading}
138	size="lg"
139	bg="gray.900"
140	color="white"
141	_hover={{
142	bg: 'gray.700'
143	}}
144	px={8}
145	py={6}
146	width="full"
147	>
148	{isLoading ? 'Signing in...' : 'Continue with GitHub'}	12!
149	</Button>
150	);
151	}

jcubic / 10xDevs / 19946653658

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous