处理回调

app/api/auth/google/callback/route.ts

@@ -16,6 +16,7 @@ export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
   const code = searchParams.get('code');
   const error = searchParams.get('error');
+  const state = searchParams.get('state');
   
   // Handle errors from Google
   if (error) {
@@ -28,6 +29,10 @@ export async function GET(request: NextRequest) {
     return NextResponse.redirect(new URL('/login?error=no_code', request.url));
   }
   
+  // The state parameter validation will happen client-side
+  // since we're storing the original state in sessionStorage
+  // We'll add the state to the redirect URL so the client can validate it
+  
   try {
     // In a real app, you would exchange the code for tokens
     // and validate the tokens here
@@ -51,6 +56,11 @@ export async function GET(request: NextRequest) {
     redirectUrl.searchParams.set('session', 'demo-session-token');
     redirectUrl.searchParams.set('user', encodeURIComponent(JSON.stringify(mockUser)));
     
+    // Pass the state back to the client for validation
+    if (state) {
+      redirectUrl.searchParams.set('state', state);
+    }
+    
     return NextResponse.redirect(redirectUrl);
   } catch (error) {
     console.error('Failed to process Google authentication:', error);

app/page.tsx

@@ -1,10 +1,13 @@
 import { DashboardLayout } from '@/components/layout/dashboard-layout';
 // import { HomePage } from '@/components/pages/home-page';
 import { HomePage2 } from '@/components/pages/home-page2';
+import { OAuthCallbackHandler } from '@/components/ui/oauth-callback-handler';
 
 export default function Home() {
   return (
     <DashboardLayout>
+      {/* Handle OAuth callbacks */}
+      <OAuthCallbackHandler />
       <HomePage2 />
     </DashboardLayout>
   );

components/ui/oauth-callback-handler.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { validateOAuthState } from '@/lib/auth';
+import { toast } from '@/hooks/use-toast';
+
+export function OAuthCallbackHandler() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  
+  useEffect(() => {
+    // Check if this is an OAuth callback
+    const state = searchParams.get('state');
+    const session = searchParams.get('session');
+    const userJson = searchParams.get('user');
+    
+    // If we have state and session, this might be an OAuth callback
+    if (state && session) {
+      // Validate the state parameter to prevent CSRF
+      const isValid = validateOAuthState(state);
+      
+      if (!isValid) {
+        // State validation failed, possible CSRF attack
+        toast({
+          title: 'Authentication Error',
+          description: 'Security validation failed. Please try signing in again.',
+          variant: 'destructive',
+        });
+        router.push('/login?error=invalid_state');
+        return;
+      }
+      
+      // State is valid, process the login
+      if (userJson) {
+        try {
+          const user = JSON.parse(decodeURIComponent(userJson));
+          
+          // Store the user in session
+          sessionStorage.setItem('currentUser', JSON.stringify(user));
+          
+          // Show success message
+          toast({
+            title: 'Signed in successfully',
+            description: `Welcome ${user.name}!`,
+          });
+          
+          // Remove the query parameters from the URL
+          router.replace('/');
+        } catch (error) {
+          console.error('Failed to parse user data', error);
+          toast({
+            title: 'Authentication Error',
+            description: 'Failed to process authentication data',
+            variant: 'destructive',
+          });
+          router.push('/login?error=invalid_user_data');
+        }
+      }
+    }
+  }, [searchParams, router]);
+  
+  // This is a utility component that doesn't render anything
+  return null;
+} 

lib/auth.ts

@@ -1,7 +1,7 @@
 // Mock Google OAuth configuration
 const GOOGLE_CLIENT_ID = '1016208801816-qtvcvki2jobmcin1g4e7u4sotr0p8g3u.apps.googleusercontent.com';
 const GOOGLE_REDIRECT_URI = typeof window !== 'undefined' 
-  ? `${window.location.origin}/api/auth/google/callback`
+  ? `${window.location.origin}/users/oauth/callback`
   : '';
 
 /**