Add GitHub Authentication via Better Auth#16
Conversation
- Configure Better Auth client with staging API URL - Add GitHub sign-in button with icon and loading states - Implement OAuth flow initiation with authClient.signIn.social - Add comprehensive error handling for OAuth, network, and popup errors - Display user-friendly error messages in UI - Clean up unused imports and improve code quality Requirements: 1.1, 1.3, 1.4, 3.1-3.4, 4.1-4.2, 5.1-5.5, 6.1-6.7, 8.3-8.4, 9.1-9.5
|
Tip For best results, initiate chat on the files or code changes.
Just let me know what you need! |
@coderabbitai Review the PR against the issue #1 |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chainI'll review this PR against issue 🏁 Script executed: Length of output: 1713 Now let me fetch the PR files to review the implementation against the issue requirements. 🏁 Script executed: Length of output: 49057
✅ Requirements CoverageScope RequirementsAll three core scope items from issue
File Updateslib/auth-client.ts:
components/login/sign-in.tsx:
Acceptance Criteria
🎯 Strengths
💡 Observations
✅ VerdictThis PR fully satisfies all requirements from issue The only recommendation would be to add unit tests before deploying to production, as outlined in the tasks.md file. |
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughThis PR adds GitHub OAuth authentication using Better Auth. It includes design and implementation specifications, updates the auth client to use the staging API endpoint, implements the GitHub sign-in flow with loading and error state management in the sign-in component, and updates React type definitions. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant SignInComponent as Sign-In Component
participant AuthClient as Auth Client
participant StagingAPI as Staging API
participant GitHub as GitHub OAuth
User->>SignInComponent: Click "Sign in with GitHub"
activate SignInComponent
SignInComponent->>SignInComponent: Set loading = true
SignInComponent->>SignInComponent: Show Loader2 spinner
SignInComponent->>AuthClient: authClient.signIn.social({ provider: "github" })
deactivate SignInComponent
activate AuthClient
AuthClient->>StagingAPI: Redirect to OAuth initialization
deactivate AuthClient
activate StagingAPI
StagingAPI->>GitHub: Initiate OAuth code flow
deactivate StagingAPI
activate GitHub
GitHub->>User: Present login & consent screen
User->>GitHub: Authorize application
GitHub->>StagingAPI: Return authorization code
deactivate GitHub
activate StagingAPI
StagingAPI->>StagingAPI: Exchange code for session token
StagingAPI->>AuthClient: Redirect with session
deactivate StagingAPI
activate SignInComponent
SignInComponent->>SignInComponent: Session established
SignInComponent->>SignInComponent: Set loading = false
SignInComponent->>User: Navigate to authenticated route
deactivate SignInComponent
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @.kiro/specs/github-auth/design.md:
- Around line 19-20: The design doc triggers markdownlint MD040/MD034 because
fenced code blocks lack language tags and bare URLs are not wrapped; update each
affected fenced block (the blocks containing the example snippet and the other
occurrences referenced) by adding an explicit language tag like "text" after the
opening ``` and wrap the URL https://staging-api.boundlessfi.xyz in inline code
ticks (`https://staging-api.boundlessfi.xyz`) inside the block so the fenced
block becomes ```text and the URL is not bare; apply the same change to the
other occurrences noted in the review.
In @.kiro/specs/github-auth/requirements.md:
- Line 5: The markdown contains a bare URL "https://staging-api.boundlessfi.xyz"
which triggers MD034; update the text in the requirements document to wrap that
URL in angle brackets (<https://staging-api.boundlessfi.xyz>) or convert it to a
proper markdown link (e.g., [staging API](https://staging-api.boundlessfi.xyz))
so the URL is no longer bare; ensure the visible text still conveys the staging
API endpoint.
In @.kiro/specs/github-auth/tasks.md:
- Around line 9-12: Wrap the bare URL in the task list by surrounding the URL
string "https://staging-api.boundlessfi.xyz" with angle brackets (i.e.
<https://staging-api.boundlessfi.xyz>) so the list line "- Set baseURL to
"https://staging-api.boundlessfi.xyz"" becomes "- Set baseURL to
<https://staging-api.boundlessfi.xyz>" to satisfy markdownlint MD034; also scan
other task lines for any other bare URLs and wrap them similarly.
♻️ Duplicate comments (2)
.vscode/settings.json (1)
1-2: Empty workspace settings file adds noise.If there are no workspace settings to enforce, consider removing this file; otherwise add the intended settings.
lib/auth-client.ts (1)
3-5: Prefer env-configured base URL with staging fallback.Hardcoding staging makes it harder to deploy the same build to different environments. Consider sourcing from a public env var with a staging default.
♻️ Suggested adjustment
export const authClient = createAuthClient({ - baseURL: "https://staging-api.boundlessfi.xyz", + baseURL: + process.env.NEXT_PUBLIC_AUTH_BASE_URL ?? + "https://staging-api.boundlessfi.xyz", });
| ``` | ||
| ┌─────────────────────────────────────────────────────────────┐ |
There was a problem hiding this comment.
Fix markdownlint MD040/MD034 in design doc.
Add language tags to fenced blocks and wrap the bare URL to avoid lint failures.
📝 Suggested edits
-```
+```text
...
-For the auth client instance, the baseURL should be set to "https://staging-api.boundlessfi.xyz" and should not contain any production domain references.
+For the auth client instance, the baseURL should be set to "`https://staging-api.boundlessfi.xyz`" and should not contain any production domain references.
...
-```
+```textAlso applies to: 239-239, 433-434
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
19-19: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In @.kiro/specs/github-auth/design.md around lines 19 - 20, The design doc
triggers markdownlint MD040/MD034 because fenced code blocks lack language tags
and bare URLs are not wrapped; update each affected fenced block (the blocks
containing the example snippet and the other occurrences referenced) by adding
an explicit language tag like "text" after the opening ``` and wrap the URL
https://staging-api.boundlessfi.xyz in inline code ticks
(`https://staging-api.boundlessfi.xyz`) inside the block so the fenced block
becomes ```text and the URL is not bare; apply the same change to the other
occurrences noted in the review.
|
|
||
| ## Introduction | ||
|
|
||
| This document specifies the requirements for implementing GitHub OAuth authentication using Better Auth, connected to the staging API at https://staging-api.boundlessfi.xyz. The system will allow users to sign in with their GitHub accounts, with proper session management, loading states, and error handling. |
There was a problem hiding this comment.
Wrap bare URL to satisfy markdownlint.
If markdownlint is enforced, this will flag MD034.
📝 Suggested edit
-This document specifies the requirements for implementing GitHub OAuth authentication using Better Auth, connected to the staging API at https://staging-api.boundlessfi.xyz. The system will allow users to sign in with their GitHub accounts, with proper session management, loading states, and error handling.
+This document specifies the requirements for implementing GitHub OAuth authentication using Better Auth, connected to the staging API at `https://staging-api.boundlessfi.xyz`. The system will allow users to sign in with their GitHub accounts, with proper session management, loading states, and error handling.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| This document specifies the requirements for implementing GitHub OAuth authentication using Better Auth, connected to the staging API at https://staging-api.boundlessfi.xyz. The system will allow users to sign in with their GitHub accounts, with proper session management, loading states, and error handling. | |
| This document specifies the requirements for implementing GitHub OAuth authentication using Better Auth, connected to the staging API at `https://staging-api.boundlessfi.xyz`. The system will allow users to sign in with their GitHub accounts, with proper session management, loading states, and error handling. |
🤖 Prompt for AI Agents
In @.kiro/specs/github-auth/requirements.md at line 5, The markdown contains a
bare URL "https://staging-api.boundlessfi.xyz" which triggers MD034; update the
text in the requirements document to wrap that URL in angle brackets
(<https://staging-api.boundlessfi.xyz>) or convert it to a proper markdown link
(e.g., [staging API](https://staging-api.boundlessfi.xyz)) so the URL is no
longer bare; ensure the visible text still conveys the staging API endpoint.
| - [x] 1. Configure Better Auth client for staging API | ||
| - Update `lib/auth-client.ts` to use staging API base URL | ||
| - Set baseURL to "https://staging-api.boundlessfi.xyz" | ||
| - Ensure no production URLs or hardcoded secrets |
There was a problem hiding this comment.
Wrap bare URL in tasks list.
This prevents markdownlint MD034 if it runs in CI.
📝 Suggested edit
- - Set baseURL to "https://staging-api.boundlessfi.xyz"
+ - Set baseURL to "`https://staging-api.boundlessfi.xyz`"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| - [x] 1. Configure Better Auth client for staging API | |
| - Update `lib/auth-client.ts` to use staging API base URL | |
| - Set baseURL to "https://staging-api.boundlessfi.xyz" | |
| - Ensure no production URLs or hardcoded secrets | |
| - [x] 1. Configure Better Auth client for staging API | |
| - Update `lib/auth-client.ts` to use staging API base URL | |
| - Set baseURL to "`https://staging-api.boundlessfi.xyz`" | |
| - Ensure no production URLs or hardcoded secrets |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
11-11: Bare URL used
(MD034, no-bare-urls)
🤖 Prompt for AI Agents
In @.kiro/specs/github-auth/tasks.md around lines 9 - 12, Wrap the bare URL in
the task list by surrounding the URL string
"https://staging-api.boundlessfi.xyz" with angle brackets (i.e.
<https://staging-api.boundlessfi.xyz>) so the list line "- Set baseURL to
"https://staging-api.boundlessfi.xyz"" becomes "- Set baseURL to
<https://staging-api.boundlessfi.xyz>" to satisfy markdownlint MD034; also scan
other task lines for any other bare URLs and wrap them similarly.
Add GitHub Authentication via Better Auth
This PR implements GitHub authentication using Better Auth, enabling users to sign in with their GitHub accounts.
What’s included
Integrated Better Auth GitHub provider following official documentation
Added GitHub OAuth sign-in flow
Connected auth flow to the staging API
https://staging-api.boundlessfi.xyz
Ensured secure handling of OAuth credentials and callbacks
Verified successful login and session creation with GitHub accounts
Why
This improves onboarding and authentication UX by allowing users to sign in quickly using their existing GitHub accounts.
Testing
Confirmed GitHub OAuth flow completes successfully
Verified user session is created after login
Tested login against staging environment
Notes
Uses Better Auth as the authentication provider
No breaking changes to existing auth flows
Summary by CodeRabbit
Release Notes
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.