add social-auth: google and github#7
Merged
Merged
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis PR integrates Google and GitHub social authentication into the application. It adds the ChangesSocial Authentication Integration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/modules/auth/ui/views/sign-up-view.tsx (1)
202-219:⚠️ Potential issue | 🟠 Major | ⚡ Quick winIcon-only social buttons need accessible names.
These buttons currently expose no accessible label for assistive tech.
Suggested fix
<Button disabled={pending} variant="outline" type="button" className="w-full cursor-pointer" onClick={() => onSocial('google')} + aria-label="Continue with Google" > <FaGoogle /> + <span className="sr-only">Continue with Google</span> </Button> <Button disabled={pending} variant="outline" type="button" className="w-full cursor-pointer" onClick={() => onSocial('github')} + aria-label="Continue with GitHub" > <FaGithub /> + <span className="sr-only">Continue with GitHub</span> </Button>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/modules/auth/ui/views/sign-up-view.tsx` around lines 202 - 219, The social icon-only Buttons in sign-up-view.tsx (the Button components that call onSocial('google') and onSocial('github') and render FaGoogle/FaGithub) lack accessible names; add explicit accessible labels by either adding aria-label attributes (e.g., aria-label="Continue with Google" and aria-label="Continue with GitHub") or include visually hidden text (sr-only span) inside each Button so screen readers can announce the purpose while keeping the visual icon-only appearance.src/modules/auth/ui/views/sign-in-view.tsx (1)
154-171:⚠️ Potential issue | 🟠 Major | ⚡ Quick winAdd accessible labels to icon-only social auth buttons.
Without accessible naming, screen readers can’t identify button purpose.
Suggested fix
<Button disabled={pending} variant="outline" type="button" className="w-full cursor-pointer" onClick={() => onSocial('google')} + aria-label="Continue with Google" > <FaGoogle /> + <span className="sr-only">Continue with Google</span> </Button> <Button disabled={pending} variant="outline" type="button" className="w-full cursor-pointer" onClick={() => onSocial('github')} + aria-label="Continue with GitHub" > <FaGithub /> + <span className="sr-only">Continue with GitHub</span> </Button>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/modules/auth/ui/views/sign-in-view.tsx` around lines 154 - 171, The social auth buttons (the Button components rendering only FaGoogle and FaGithub icons in sign-in-view.tsx) lack accessible names, so add an accessible label to each Button (e.g., aria-label="Sign in with Google" and aria-label="Sign in with GitHub") or include visually hidden text inside the Button to convey purpose; update the two Button elements that call onSocial('google') and onSocial('github') accordingly and ensure the labels match the icon intent so screen readers can identify them.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/lib/auth.ts`:
- Around line 8-18: The socialProviders object is coercing env vars with "as
string" which hides missing values at runtime; add a startup validation that
checks the required env vars for google and github
(process.env.GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GITHUB_CLIENT_ID,
GITHUB_CLIENT_SECRET) and fail fast if any are missing. Implement a small
validator function (e.g., validateOAuthEnvVars or validateSocialProvidersEnv)
and call it before exporting/using socialProviders so it throws a clear error or
exits with a descriptive message identifying which provider and variable is
missing.
In `@src/modules/auth/ui/views/sign-in-view.tsx`:
- Line 141: The Tailwind class on the OctagonAlertIcon uses the deprecated
suffix form "text-destructive!"; update the JSX in sign-in-view (the
OctagonAlertIcon element) to use the modern prefix important modifier
"!text-destructive" instead of "text-destructive!" so the className becomes
"!text-destructive" (keep the existing size classes unchanged).
In `@src/modules/auth/ui/views/sign-up-view.tsx`:
- Line 189: The Tailwind class on OctagonAlertIcon uses the deprecated trailing
important marker; update the className for OctagonAlertIcon to use the leading
important modifier so the icon color is applied in Tailwind v4 (replace the
current "text-destructive!" usage with the leading form, e.g., use
"!text-destructive" alongside the existing "h-4 w-4" in the OctagonAlertIcon
className).
---
Outside diff comments:
In `@src/modules/auth/ui/views/sign-in-view.tsx`:
- Around line 154-171: The social auth buttons (the Button components rendering
only FaGoogle and FaGithub icons in sign-in-view.tsx) lack accessible names, so
add an accessible label to each Button (e.g., aria-label="Sign in with Google"
and aria-label="Sign in with GitHub") or include visually hidden text inside the
Button to convey purpose; update the two Button elements that call
onSocial('google') and onSocial('github') accordingly and ensure the labels
match the icon intent so screen readers can identify them.
In `@src/modules/auth/ui/views/sign-up-view.tsx`:
- Around line 202-219: The social icon-only Buttons in sign-up-view.tsx (the
Button components that call onSocial('google') and onSocial('github') and render
FaGoogle/FaGithub) lack accessible names; add explicit accessible labels by
either adding aria-label attributes (e.g., aria-label="Continue with Google" and
aria-label="Continue with GitHub") or include visually hidden text (sr-only
span) inside each Button so screen readers can announce the purpose while
keeping the visual icon-only appearance.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 69218708-a209-4044-9534-e63d013bce01
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
package.jsonsrc/app/page.tsxsrc/lib/auth.tssrc/modules/auth/ui/views/sign-in-view.tsxsrc/modules/auth/ui/views/sign-up-view.tsxsrc/modules/home/ui/views/home-view.tsx
Comment on lines
+8
to
+18
| socialProviders: { | ||
| google: { | ||
| clientId: process.env.GOOGLE_CLIENT_ID as string, | ||
| clientSecret: process.env.GOOGLE_CLIENT_SECRET as string, | ||
| }, | ||
| github: { | ||
| clientId: process.env.GITHUB_CLIENT_ID as string, | ||
| clientSecret: process.env.GITHUB_CLIENT_SECRET as string, | ||
| scope: ['user:email'], | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Fail fast when required OAuth env vars are missing.
Using as string here won’t protect runtime paths. Missing provider credentials will surface later as auth failures instead of startup-time errors.
Suggested fix
+const requiredEnv = (key: string) => {
+ const value = process.env[key]
+ if (!value) throw new Error(`Missing required env var: ${key}`)
+ return value
+}
+
export const auth = betterAuth({
socialProviders: {
google: {
- clientId: process.env.GOOGLE_CLIENT_ID as string,
- clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+ clientId: requiredEnv('GOOGLE_CLIENT_ID'),
+ clientSecret: requiredEnv('GOOGLE_CLIENT_SECRET'),
},
github: {
- clientId: process.env.GITHUB_CLIENT_ID as string,
- clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
+ clientId: requiredEnv('GITHUB_CLIENT_ID'),
+ clientSecret: requiredEnv('GITHUB_CLIENT_SECRET'),
scope: ['user:email'],
},
},🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/lib/auth.ts` around lines 8 - 18, The socialProviders object is coercing
env vars with "as string" which hides missing values at runtime; add a startup
validation that checks the required env vars for google and github
(process.env.GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GITHUB_CLIENT_ID,
GITHUB_CLIENT_SECRET) and fail fast if any are missing. Implement a small
validator function (e.g., validateOAuthEnvVars or validateSocialProvidersEnv)
and call it before exporting/using socialProviders so it throws a clear error or
exits with a descriptive message identifying which provider and variable is
missing.
| {!!error && ( | ||
| <Alert className="bg-destructive/10 border-none"> | ||
| <OctagonAlertIcon className="h-4 w-4 !text-destructive" /> | ||
| <OctagonAlertIcon className="h-4 w-4 text-destructive!" /> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In Tailwind CSS v4, is text-destructive!valid syntax for the important modifier, or is the correct form!text-destructive?
💡 Result:
In Tailwind CSS v4, the important modifier syntax is! at the end of the class name, i.e.!text-destructive, not text-destructive!. Tailwind’s v4 upgrade guide states: “In v4 you should place the! at the very end of the class name instead” and shows the pattern flex! (with the note that the old way is deprecated) [1]. So for your example, use!text-destructive (optionally with variants as usual, e.g. hover:!text-destructive), while text-destructive! is not the recommended/valid v4 form per the upgrade guidance [1].
Citations:
Use !text-destructive instead of text-destructive! for Tailwind CSS v4 compatibility.
In Tailwind CSS v4, the important modifier syntax places ! at the beginning of the class name, not the end. The current text-destructive! syntax is invalid and deprecated; the alert icon color may silently fall back.
Suggested fix
-<OctagonAlertIcon className="h-4 w-4 text-destructive!" />
+<OctagonAlertIcon className="h-4 w-4 !text-destructive" />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/modules/auth/ui/views/sign-up-view.tsx` at line 189, The Tailwind class
on OctagonAlertIcon uses the deprecated trailing important marker; update the
className for OctagonAlertIcon to use the leading important modifier so the icon
color is applied in Tailwind v4 (replace the current "text-destructive!" usage
with the leading form, e.g., use "!text-destructive" alongside the existing "h-4
w-4" in the OctagonAlertIcon className).
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.