Skip to content

feat: Add GitHub and Google OAuth Login #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DevanshuNEU merged 6 commits into from
Jan 26, 2026
Merged

feat: Add GitHub and Google OAuth Login #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b47637e
feat: add GitHub and Google OAuth login
DevanshuNEU Jan 26, 2026
8830982
fix: improve OAuth button state handling and accessibility
DevanshuNEU Jan 26, 2026
55919b6
fix: content hidden behind fixed navbar
DevanshuNEU Jan 26, 2026
9982e3b
refactor: use CSS variables for layout dimensions
DevanshuNEU Jan 26, 2026
ac0c0fb
feat: add proper mobile responsive layout
DevanshuNEU Jan 26, 2026
584c48b
fix: correct mobile layout CSS class logic
DevanshuNEU Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 86 additions & 12 deletions frontend/src/components/auth/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export function LoginForm() {
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const { signIn } = useAuth()
const [oauthLoading, setOauthLoading] = useState<'github' | 'google' | null>(null)
const { signIn, signInWithGitHub, signInWithGoogle } = useAuth()
const navigate = useNavigate()

const handleSubmit = async (e: React.FormEvent) => {
Expand All @@ -31,6 +32,30 @@ export function LoginForm() {
}
}

const handleGitHubSignIn = async () => {
setError('')
setOauthLoading('github')
try {
await signInWithGitHub()
} catch (err: any) {
setError(err.message || 'GitHub sign in failed')
} finally {
setOauthLoading(null)
}
}

const handleGoogleSignIn = async () => {
setError('')
setOauthLoading('google')
try {
await signInWithGoogle()
} catch (err: any) {
setError(err.message || 'Google sign in failed')
} finally {
setOauthLoading(null)
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

return (
<div className="min-h-screen bg-background flex flex-col">
<Navbar />
Expand Down Expand Up @@ -118,20 +143,69 @@ export function LoginForm() {
<div className="w-full border-t border-border" />
</div>
<div className="relative flex justify-center text-xs">
<span className="px-2 bg-card text-muted-foreground">or</span>
<span className="px-2 bg-card text-muted-foreground">or continue with</span>
</div>
</div>

<Button
type="button"
variant="outline"
className="w-full h-10"
disabled
>
<Github className="w-4 h-4 mr-2" />
Continue with GitHub
<span className="ml-1 text-xs text-muted-foreground">(Soon)</span>
</Button>
<div className="grid grid-cols-2 gap-3">
<Button
type="button"
variant="outline"
className="h-10"
onClick={handleGitHubSignIn}
disabled={loading || oauthLoading !== null}
aria-label={oauthLoading === 'github' ? 'Signing in with GitHub' : undefined}
>
{oauthLoading === 'github' ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span className="sr-only">Signing in with GitHub</span>
</>
) : (
<>
<Github className="w-4 h-4 mr-2" />
GitHub
</>
)}
</Button>
<Button
type="button"
variant="outline"
className="h-10"
onClick={handleGoogleSignIn}
disabled={loading || oauthLoading !== null}
aria-label={oauthLoading === 'google' ? 'Signing in with Google' : undefined}
>
{oauthLoading === 'google' ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span className="sr-only">Signing in with Google</span>
</>
) : (
<>
<svg className="w-4 h-4 mr-2" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="currentColor"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="currentColor"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="currentColor"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Google
</>
)}
</Button>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>

<p className="text-center text-sm text-muted-foreground mt-6">
Expand Down
98 changes: 86 additions & 12 deletions frontend/src/components/auth/SignupForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ export function SignupForm() {
const [confirmPassword, setConfirmPassword] = useState('')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const { signUp } = useAuth()
const [oauthLoading, setOauthLoading] = useState<'github' | 'google' | null>(null)
const { signUp, signInWithGitHub, signInWithGoogle } = useAuth()
const navigate = useNavigate()

const handleSubmit = async (e: React.FormEvent) => {
Expand Down Expand Up @@ -42,6 +43,30 @@ export function SignupForm() {
}
}

const handleGitHubSignIn = async () => {
setError('')
setOauthLoading('github')
try {
await signInWithGitHub()
} catch (err: any) {
setError(err.message || 'GitHub sign in failed')
} finally {
setOauthLoading(null)
}
}

const handleGoogleSignIn = async () => {
setError('')
setOauthLoading('google')
try {
await signInWithGoogle()
} catch (err: any) {
setError(err.message || 'Google sign in failed')
} finally {
setOauthLoading(null)
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

return (
<div className="min-h-screen bg-background flex flex-col">
<Navbar />
Expand Down Expand Up @@ -146,20 +171,69 @@ export function SignupForm() {
<div className="w-full border-t border-border" />
</div>
<div className="relative flex justify-center text-xs">
<span className="px-2 bg-card text-muted-foreground">or</span>
<span className="px-2 bg-card text-muted-foreground">or continue with</span>
</div>
</div>

<Button
type="button"
variant="outline"
className="w-full h-10"
disabled
>
<Github className="w-4 h-4 mr-2" />
Continue with GitHub
<span className="ml-1 text-xs text-muted-foreground">(Soon)</span>
</Button>
<div className="grid grid-cols-2 gap-3">
<Button
type="button"
variant="outline"
className="h-10"
onClick={handleGitHubSignIn}
disabled={loading || oauthLoading !== null}
aria-label={oauthLoading === 'github' ? 'Signing in with GitHub' : undefined}
>
{oauthLoading === 'github' ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span className="sr-only">Signing in with GitHub</span>
</>
) : (
<>
<Github className="w-4 h-4 mr-2" />
GitHub
</>
)}
</Button>
<Button
type="button"
variant="outline"
className="h-10"
onClick={handleGoogleSignIn}
disabled={loading || oauthLoading !== null}
aria-label={oauthLoading === 'google' ? 'Signing in with Google' : undefined}
>
{oauthLoading === 'google' ? (
<>
<Loader2 className="w-4 h-4 animate-spin" />
<span className="sr-only">Signing in with Google</span>
</>
) : (
<>
<svg className="w-4 h-4 mr-2" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="currentColor"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="currentColor"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="currentColor"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Google
</>
)}
</Button>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>

<p className="text-center text-sm text-muted-foreground mt-6">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/dashboard/DashboardHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export function DashboardHome() {
] as const

return (
<div className="pt-14 min-h-screen">
<div className="min-h-screen">
<AnimatePresence mode="wait">
{/* Repository List View */}
{!isRepoView && (
Expand Down
67 changes: 60 additions & 7 deletions frontend/src/components/dashboard/DashboardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'
import { Outlet } from 'react-router-dom'
import { Outlet, useLocation } from 'react-router-dom'
import { Sidebar } from './Sidebar'
import { TopNav } from './TopNav'
import { CommandPalette } from './CommandPalette'
Expand All @@ -15,7 +15,9 @@ const SIDEBAR_STORAGE_KEY = 'codeintel-sidebar-collapsed'

export function DashboardLayout({ children }: DashboardLayoutProps) {
const { theme } = useTheme()
const location = useLocation()

// Desktop: collapsed state (narrow sidebar)
const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
try {
const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY)
Expand All @@ -24,8 +26,12 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
return false
}
})

// Mobile: open/closed state (overlay)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)

// Persist desktop collapsed state
useEffect(() => {
try {
localStorage.setItem(SIDEBAR_STORAGE_KEY, JSON.stringify(sidebarCollapsed))
Expand All @@ -34,6 +40,30 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
}
}, [sidebarCollapsed])

// Close mobile menu on route change
useEffect(() => {
setMobileMenuOpen(false)
}, [location.pathname])

// Close mobile menu on escape key
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') setMobileMenuOpen(false)
}
document.addEventListener('keydown', handleEscape)
return () => document.removeEventListener('keydown', handleEscape)
}, [])

// Prevent body scroll when mobile menu is open
useEffect(() => {
if (mobileMenuOpen) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = ''
}
return () => { document.body.style.overflow = '' }
}, [mobileMenuOpen])

useKeyboardShortcut(SHORTCUTS.COMMAND_PALETTE, () => {
setCommandPaletteOpen(true)
})
Expand All @@ -42,26 +72,49 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
setSidebarCollapsed((prev: boolean) => !prev)
})

const handleToggleSidebar = () => {
// On mobile: toggle overlay menu
// On desktop: toggle collapsed state
if (window.innerWidth < 1024) {
setMobileMenuOpen(!mobileMenuOpen)
} else {
setSidebarCollapsed(!sidebarCollapsed)
}
}

return (
<div className="min-h-screen bg-background">
<TopNav
onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
onToggleSidebar={handleToggleSidebar}
sidebarCollapsed={sidebarCollapsed}
onOpenCommandPalette={() => setCommandPaletteOpen(true)}
/>

<div className="flex">
{/* Mobile backdrop */}
{mobileMenuOpen && (
<div
className="fixed inset-0 z-30 bg-black/50 lg:hidden"
onClick={() => setMobileMenuOpen(false)}
aria-hidden="true"
/>
)}

<Sidebar
collapsed={sidebarCollapsed}
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
onToggle={handleToggleSidebar}
mobileOpen={mobileMenuOpen}
onMobileClose={() => setMobileMenuOpen(false)}
/>

{/* Main content - no margin on mobile, dynamic margin on desktop */}
<main
className={`flex-1 transition-all duration-300 ${
sidebarCollapsed ? 'ml-16' : 'ml-60'
}`}
className={`
flex-1 transition-all duration-300 pt-[var(--navbar-height)]
ml-0 ${sidebarCollapsed ? 'lg:ml-[var(--sidebar-width-collapsed)]' : 'lg:ml-[var(--sidebar-width)]'}
`}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
>
<div className="p-6">
<div className="p-4 md:p-6">
{children || <Outlet />}
</div>
</main>
Expand Down
Loading