From 6371c9d05fdf804fb7182bfa0c48f3d1f595756e Mon Sep 17 00:00:00 2001
From: Xin Wang <xin.victorwang@gmail.com>
Date: Mon, 30 Jun 2025 20:33:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E5=9B=9E=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/auth/google/callback/route.ts    | 15 ++++++++++++--
 app/layout.tsx                           |  8 ++++++++
 components/ui/oauth-callback-handler.tsx | 25 ++++++++++++++++++++++++
 lib/auth.ts                              |  2 +-
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/app/api/auth/google/callback/route.ts b/app/api/auth/google/callback/route.ts
index 00b49e8..f07125e 100644
--- a/app/api/auth/google/callback/route.ts
+++ b/app/api/auth/google/callback/route.ts
@@ -18,10 +18,17 @@ export async function GET(request: NextRequest) {
   const error = searchParams.get('error');
   const state = searchParams.get('state');
   
+  console.log('Google OAuth callback received', { 
+    hasCode: !!code, 
+    error: error || 'none', 
+    hasState: !!state,
+    url: request.url
+  });
+  
   // Handle errors from Google
   if (error) {
     console.error('Google OAuth error:', error);
-    return NextResponse.redirect(new URL('/login?error=google_oauth', request.url));
+    return NextResponse.redirect(new URL(`/login?error=${encodeURIComponent(error)}`, request.url));
   }
   
   if (!code) {
@@ -34,6 +41,8 @@ export async function GET(request: NextRequest) {
   // We'll add the state to the redirect URL so the client can validate it
   
   try {
+    console.log('Processing OAuth callback with code', code.substring(0, 5) + '...');
+    
     // In a real app, you would exchange the code for tokens
     // and validate the tokens here
     
@@ -61,9 +70,11 @@ export async function GET(request: NextRequest) {
       redirectUrl.searchParams.set('state', state);
     }
     
+    console.log('Redirecting to:', redirectUrl.toString());
     return NextResponse.redirect(redirectUrl);
   } catch (error) {
     console.error('Failed to process Google authentication:', error);
-    return NextResponse.redirect(new URL('/login?error=auth_failed', request.url));
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    return NextResponse.redirect(new URL(`/login?error=auth_failed&details=${encodeURIComponent(errorMessage)}`, request.url));
   }
 } 
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 0b97c6c..e8c77e4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,9 +3,16 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { ThemeProvider } from '@/components/theme-provider';
 import { Toaster } from '@/components/ui/sonner';
+import dynamic from 'next/dynamic';
 
 const inter = Inter({ subsets: ['latin'] });
 
+// Import the OAuthCallbackHandler dynamically to ensure it only runs on the client
+const OAuthCallbackHandler = dynamic(
+  () => import('@/components/ui/oauth-callback-handler').then(mod => mod.OAuthCallbackHandler),
+  { ssr: false }
+);
+
 export const metadata: Metadata = {
   title: 'AI Movie Flow - Create Amazing Videos with AI',
   description: 'Professional AI-powered video creation platform with advanced editing tools',
@@ -27,6 +34,7 @@ export default function RootLayout({
         >
           {children}
           <Toaster />
+          <OAuthCallbackHandler />
         </ThemeProvider>
       </body>
     </html>
diff --git a/components/ui/oauth-callback-handler.tsx b/components/ui/oauth-callback-handler.tsx
index 80a19dd..8caa8a6 100644
--- a/components/ui/oauth-callback-handler.tsx
+++ b/components/ui/oauth-callback-handler.tsx
@@ -14,6 +14,27 @@ export function OAuthCallbackHandler() {
     const state = searchParams.get('state');
     const session = searchParams.get('session');
     const userJson = searchParams.get('user');
+    const error = searchParams.get('error');
+    
+    // Log debug information
+    console.log('OAuth callback handler running with params:', {
+      state: state || 'not present',
+      session: session ? 'present' : 'not present', 
+      userJson: userJson ? 'present' : 'not present',
+      error: error || 'none'
+    });
+    
+    // Handle error case
+    if (error) {
+      console.error('OAuth error:', error);
+      toast({
+        title: 'Authentication Error',
+        description: `Google sign-in failed: ${error}`,
+        variant: 'destructive',
+      });
+      router.push(`/login?error=${error}`);
+      return;
+    }
     
     // If we have state and session, this might be an OAuth callback
     if (state && session) {
@@ -22,6 +43,7 @@ export function OAuthCallbackHandler() {
       
       if (!isValid) {
         // State validation failed, possible CSRF attack
+        console.error('OAuth state validation failed');
         toast({
           title: 'Authentication Error',
           description: 'Security validation failed. Please try signing in again.',
@@ -31,10 +53,13 @@ export function OAuthCallbackHandler() {
         return;
       }
       
+      console.log('OAuth state validation successful');
+      
       // State is valid, process the login
       if (userJson) {
         try {
           const user = JSON.parse(decodeURIComponent(userJson));
+          console.log('OAuth user data parsed successfully');
           
           // Store the user in session
           sessionStorage.setItem('currentUser', JSON.stringify(user));
diff --git a/lib/auth.ts b/lib/auth.ts
index 581b44c..c62408a 100644
--- a/lib/auth.ts
+++ b/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`
+  ? 'https://movieflow.api.huiying.video/oauth/callback'
   : '';
 
 /**