(null);
+ const [loading, setLoading] = useState(true);
+
+ // Check for existing auth on mount
+ useEffect(() => {
+ checkAuth();
+ }, []);
+
+ const checkAuth = async () => {
+ try {
+ const token = localStorage.getItem('accessToken');
+ if (!token) {
+ setLoading(false);
+ return;
+ }
+
+ const response = await fetch('/api/auth/me', {
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ },
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ setUser(data.user);
+ } else {
+ // Token might be expired, try to refresh
+ await refreshToken();
+ }
+ } catch (error) {
+ console.error('Auth check failed:', error);
+ localStorage.removeItem('accessToken');
+ localStorage.removeItem('refreshToken');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const login = async (email: string, password: string) => {
+ const response = await fetch('/api/auth/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ email, password }),
+ });
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error || 'Login failed');
+ }
+
+ const data = await response.json();
+ localStorage.setItem('accessToken', data.tokens.accessToken);
+ localStorage.setItem('refreshToken', data.tokens.refreshToken);
+ setUser(data.user);
+ };
+
+ const logout = () => {
+ localStorage.removeItem('accessToken');
+ localStorage.removeItem('refreshToken');
+ setUser(null);
+ };
+
+ const refreshToken = async () => {
+ try {
+ const refreshTokenValue = localStorage.getItem('refreshToken');
+ if (!refreshTokenValue) {
+ throw new Error('No refresh token available');
+ }
+
+ const response = await fetch('/api/auth/refresh', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ refreshToken: refreshTokenValue }),
+ });
+
+ if (!response.ok) {
+ throw new Error('Token refresh failed');
+ }
+
+ const data = await response.json();
+ localStorage.setItem('accessToken', data.tokens.accessToken);
+ localStorage.setItem('refreshToken', data.tokens.refreshToken);
+
+ // Re-check auth to get updated user info
+ await checkAuth();
+ } catch (error) {
+ console.error('Token refresh failed:', error);
+ logout();
+ throw error;
+ }
+ };
+
+ const value = {
+ user,
+ loading,
+ login,
+ logout,
+ refreshToken,
+ };
+
+ return {children};
+}
+
+export function useAuth() {
+ const context = useContext(AuthContext);
+ if (context === undefined) {
+ throw new Error('useAuth must be used within an AuthProvider');
+ }
+ return context;
+}
+
+// Helper hook for auth state
+export function useUser() {
+ const { user } = useAuth();
+ return user;
+}
+
+// Helper hook to check if user is authenticated
+export function useIsAuthenticated() {
+ const { user, loading } = useAuth();
+ return { isAuthenticated: !!user, loading };
+}
\ No newline at end of file
diff --git a/apps/web/components/auth/auth-guard.tsx b/apps/web/components/auth/auth-guard.tsx
new file mode 100644
index 00000000..313b3f16
--- /dev/null
+++ b/apps/web/components/auth/auth-guard.tsx
@@ -0,0 +1,74 @@
+/**
+ * Auth guard component to protect routes
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from './auth-context';
+import { Loader2 } from 'lucide-react';
+
+interface AuthGuardProps {
+ children: React.ReactNode;
+ redirectTo?: string;
+ requireEmailVerification?: boolean;
+}
+
+export function AuthGuard({
+ children,
+ redirectTo = '/login',
+ requireEmailVerification = false
+}: AuthGuardProps) {
+ const { user, loading } = useAuth();
+ const router = useRouter();
+
+ useEffect(() => {
+ if (!loading) {
+ if (!user) {
+ router.push(redirectTo);
+ return;
+ }
+
+ if (requireEmailVerification && !user.isEmailVerified) {
+ router.push('/verify-email');
+ return;
+ }
+ }
+ }, [user, loading, router, redirectTo, requireEmailVerification]);
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ if (!user) {
+ return null; // Will redirect
+ }
+
+ if (requireEmailVerification && !user.isEmailVerified) {
+ return null; // Will redirect to email verification
+ }
+
+ return <>{children};
+}
+
+// Wrapper for pages that require authentication
+export function withAuth(
+ Component: React.ComponentType
,
+ options?: {
+ redirectTo?: string;
+ requireEmailVerification?: boolean;
+ }
+) {
+ return function AuthenticatedComponent(props: P) {
+ return (
+
+
+
+ );
+ };
+}
\ No newline at end of file
diff --git a/apps/web/components/auth/index.ts b/apps/web/components/auth/index.ts
new file mode 100644
index 00000000..c72e759c
--- /dev/null
+++ b/apps/web/components/auth/index.ts
@@ -0,0 +1,6 @@
+export { LoginForm } from './login-form';
+export { RegisterForm } from './register-form';
+export { AuthProvider, useAuth, useUser, useIsAuthenticated } from './auth-context';
+export { AuthGuard, withAuth } from './auth-guard';
+export { SSOButton } from './sso-button';
+export { SSOLoginSection } from './sso-login-section';
\ No newline at end of file
diff --git a/apps/web/components/auth/login-form.tsx b/apps/web/components/auth/login-form.tsx
new file mode 100644
index 00000000..dd0aa116
--- /dev/null
+++ b/apps/web/components/auth/login-form.tsx
@@ -0,0 +1,117 @@
+/**
+ * Login form component
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2 } from 'lucide-react';
+import { SSOLoginSection } from './sso-login-section';
+
+interface LoginFormProps {
+ onSuccess?: (user: any, tokens: any) => void;
+ redirectTo?: string;
+}
+
+export function LoginForm({ onSuccess, redirectTo = '/projects' }: LoginFormProps) {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+ const router = useRouter();
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setLoading(true);
+ setError('');
+
+ try {
+ const response = await fetch('/api/auth/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ email, password }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Login failed');
+ }
+
+ // Store tokens in localStorage (in a real app, consider httpOnly cookies)
+ localStorage.setItem('accessToken', data.tokens.accessToken);
+ localStorage.setItem('refreshToken', data.tokens.refreshToken);
+
+ if (onSuccess) {
+ onSuccess(data.user, data.tokens);
+ } else {
+ router.push(redirectTo);
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Login failed');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+ Sign In
+
+ Enter your email and password to access your account
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/components/auth/register-form.tsx b/apps/web/components/auth/register-form.tsx
new file mode 100644
index 00000000..11ba4174
--- /dev/null
+++ b/apps/web/components/auth/register-form.tsx
@@ -0,0 +1,175 @@
+/**
+ * Registration form component
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2 } from 'lucide-react';
+
+interface RegisterFormProps {
+ onSuccess?: (user: any) => void;
+ redirectTo?: string;
+}
+
+export function RegisterForm({ onSuccess, redirectTo = '/login' }: RegisterFormProps) {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
+ const [name, setName] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+ const [success, setSuccess] = useState(false);
+ const router = useRouter();
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setLoading(true);
+ setError('');
+
+ if (password !== confirmPassword) {
+ setError('Passwords do not match');
+ setLoading(false);
+ return;
+ }
+
+ if (password.length < 8) {
+ setError('Password must be at least 8 characters long');
+ setLoading(false);
+ return;
+ }
+
+ try {
+ const response = await fetch('/api/auth/register', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ email, password, name: name || undefined }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Registration failed');
+ }
+
+ setSuccess(true);
+
+ if (onSuccess) {
+ onSuccess(data.user);
+ } else {
+ // Redirect to login page after successful registration
+ setTimeout(() => {
+ router.push(redirectTo);
+ }, 2000);
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Registration failed');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (success) {
+ return (
+
+
+ Registration Successful!
+
+ Please check your email for a verification link.
+
+
+
+
+
+ We've sent a verification email to {email}. Please click the link in the email to verify your account.
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Create Account
+
+ Enter your information to create a new account
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/components/auth/sso-button.tsx b/apps/web/components/auth/sso-button.tsx
new file mode 100644
index 00000000..9480c1ea
--- /dev/null
+++ b/apps/web/components/auth/sso-button.tsx
@@ -0,0 +1,105 @@
+/**
+ * SSO Button Component
+ * Handles SSO login for different providers
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2 } from 'lucide-react';
+import type { SSOProvider } from '@codervisor/devlog-core';
+
+interface SSOButtonProps {
+ provider: SSOProvider;
+ className?: string;
+ disabled?: boolean;
+}
+
+const providerConfig = {
+ github: {
+ name: 'GitHub',
+ icon: '🔗', // You can replace with actual GitHub icon
+ bgColor: 'bg-gray-900 hover:bg-gray-800',
+ textColor: 'text-white',
+ },
+ google: {
+ name: 'Google',
+ icon: '🔗', // You can replace with actual Google icon
+ bgColor: 'bg-blue-600 hover:bg-blue-700',
+ textColor: 'text-white',
+ },
+ wechat: {
+ name: 'WeChat',
+ icon: '💬', // You can replace with actual WeChat icon
+ bgColor: 'bg-green-600 hover:bg-green-700',
+ textColor: 'text-white',
+ },
+};
+
+export function SSOButton({ provider, className = '', disabled = false }: SSOButtonProps) {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+
+ const config = providerConfig[provider];
+
+ const handleSSOLogin = async () => {
+ if (loading || disabled) return;
+
+ setLoading(true);
+ setError('');
+
+ try {
+ // Get authorization URL from the server
+ const response = await fetch('/api/auth/sso', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ provider,
+ returnUrl: window.location.href,
+ }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Failed to initiate SSO login');
+ }
+
+ // Redirect to OAuth provider
+ window.location.href = data.data.authUrl;
+
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'SSO login failed');
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+ {availableProviders.map((provider) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ Or continue with email
+
+
+
+