Investigate Supabase connection issues

Investigate the cause of "Unexpected end of JSON input" error despite successful Supabase connection test.
2025-03-15 13:24:11 +00:00
parent 5853e5f51b
commit dc0e94d352
3 changed files with 205 additions and 108 deletions
--- a/src/contexts/auth/auth.utils.ts
+++ b/src/contexts/auth/auth.utils.ts
@@ -15,36 +15,77 @@ export const handleNetworkError = (error: any): string => {
    return 'CORS 오류가 발생했습니다. 서버 설정 또는 CORS 프록시를 확인하세요.';
  } else if (error.message && error.message.includes('NetworkError')) {
    return '네트워크 오류가 발생했습니다. 인터넷 연결을 확인하세요.';
+  } else if (error.message && error.message.includes('json')) {
+    return '서버 응답 형식 오류: 서버가 올바른 JSON 응답을 반환하지 않았습니다.';
  }
  
  return error.message || '예상치 못한 오류가 발생했습니다.';
 };

-// 응답 파싱 유틸리티 함수
+// 응답 파싱 유틸리티 함수 개선
 export const parseResponse = async (response: Response) => {
  try {
+    // 비어있는 응답 또는 401 응답을 먼저 확인
+    if (response.status === 401) {
+      if (response.headers.get('content-length') === '0' || await response.clone().text() === '') {
+        return { 
+          error: '인증 실패: 잘못된 인증 정보 또는 서버 설정 문제',
+          status: 401 
+        };
+      }
+    }
+    
+    // 응답 내용 확인 (디버깅용)
    const responseText = await response.text();
-    console.log('응답 원본:', responseText);
+    console.log('응답 원본:', responseText, 'Status:', response.status);
    
    // 빈 응답 또는 공백만 있는 응답 처리
    if (!responseText || responseText.trim() === '') {
      if (response.status === 401) {
-        return { error: '인증 실패: 이메일 또는 비밀번호가 올바르지 않습니다.' };
+        return { 
+          error: '인증 실패: 서버가 인증을 거부했습니다.', 
+          status: 401 
+        };
+      } else if (response.status === 404) {
+        return { 
+          error: '서버 경로를 찾을 수 없습니다. Supabase URL을 확인하세요.',
+          status: 404 
+        };
      } else {
-        throw new Error('서버가 빈 응답을 반환했습니다');
+        return { 
+          error: `서버가 빈 응답을 반환했습니다 (상태 코드: ${response.status})`,
+          status: response.status 
+        };
      }
    }
    
    try {
      return JSON.parse(responseText);
    } catch (parseError) {
-      // JSON 파싱 오류 시 응답 상태에 따른 처리
+      console.error('JSON 파싱 오류:', parseError, '원본 텍스트:', responseText);
+      
+      // HTTP 상태 코드에 따른 적절한 오류 메시지 반환
      if (response.status === 401) {
-        return { error: '인증 실패: 이메일 또는 비밀번호가 올바르지 않습니다.' };
+        return { 
+          error: '인증 실패: 이메일 또는 비밀번호가 올바르지 않습니다.',
+          status: 401 
+        };
      } else if (response.status === 404) {
-        return { error: '서버 경로를 찾을 수 없습니다. Supabase URL을 확인하세요.' };
+        return { 
+          error: '서버 경로를 찾을 수 없습니다. Supabase URL을 확인하세요.',
+          status: 404
+        };
+      } else if (response.status >= 500) {
+        return { 
+          error: '서버 내부 오류가 발생했습니다.',
+          status: response.status
+        };
      } else {
-        throw parseError;
+        return { 
+          error: `응답 형식 오류 (상태 코드: ${response.status}): 서버가 올바른 JSON 응답을 반환하지 않았습니다.`,
+          status: response.status,
+          rawResponse: responseText
+        };
      }
    }
  } catch (parseError) {
--- a/src/contexts/auth/signIn.ts
+++ b/src/contexts/auth/signIn.ts
@@ -29,6 +29,23 @@ export const signIn = async (email: string, password: string) => {
      } else if (error) {
        // 기본 방식 실패 시 커스텀 로그인 시도
        console.warn('기본 로그인 실패, 커스텀 방식 시도:', error.message);
+        
+        // JSON 파싱 오류라면 직접 API 호출 시도
+        if (error.message.includes('json') || error.message.includes('Unexpected end')) {
+          // 다음 단계에서 직접 API 호출
+        } else {
+          // 다른 종류의 오류는 그대로 반환
+          let errorMessage = error.message;
+          
+          if (error.message.includes('Invalid login credentials')) {
+            errorMessage = '이메일 또는 비밀번호가 올바르지 않습니다.';
+          } else if (error.message.includes('Email not confirmed')) {
+            errorMessage = '이메일 인증이 완료되지 않았습니다. 이메일을 확인해주세요.';
+          }
+          
+          showAuthToast('로그인 실패', errorMessage, 'destructive');
+          return { error: { message: errorMessage }, user: null };
+        }
      }
    } catch (basicAuthError) {
      console.warn('기본 인증 방식 예외 발생:', basicAuthError);
@@ -37,72 +54,63 @@ export const signIn = async (email: string, password: string) => {
    
    // 기본 방식 실패 시 직접 API 호출
    // 응답 예외 처리를 위한 래핑
-    const response = await fetch(`${supabase.auth.url}/token?grant_type=password`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'apikey': supabase.supabaseKey,
-        'Authorization': `Bearer ${supabase.supabaseKey}`,
-        'X-Client-Info': 'supabase-js/2.x'
-      },
-      body: JSON.stringify({ email, password })
-    }).catch(err => {
-      console.error('로그인 요청 중 fetch 오류:', err);
-      throw new Error('서버 연결에 실패했습니다. 네트워크 연결을 확인해주세요.');
-    });
-    
-    // 응답 상태 확인 및 로깅
-    console.log('로그인 응답 상태:', response.status);
-    
-    // 응답 처리
-    let responseData;
    try {
-      responseData = await parseResponse(response);
-    } catch (parseError) {
-      console.error('로그인 응답 파싱 오류:', parseError);
-      
-      // 401 응답은 인증 실패로 처리
-      if (response.status === 401) {
-        return { 
-          error: { message: '이메일 또는 비밀번호가 올바르지 않습니다.' },
-          user: null 
-        };
-      }
-      
-      return { 
-        error: { message: '서버 응답을 처리할 수 없습니다. 네트워크 연결을 확인하세요.' },
-        user: null 
-      };
-    }
-    
-    // 오류 응답 확인
-    if (responseData?.error) {
-      return { error: { message: responseData.error }, user: null };
-    }
-    
-    // 응답 처리
-    if (response.ok && responseData?.access_token) {
-      // 로그인 성공 시 Supabase 세션 설정
-      await supabase.auth.setSession({
-        access_token: responseData.access_token,
-        refresh_token: responseData.refresh_token
+      const response = await fetch(`${supabase.auth.url}/token?grant_type=password`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'apikey': supabase.supabaseKey,
+          'Authorization': `Bearer ${supabase.supabaseKey}`,
+          'X-Client-Info': 'supabase-js/2.x'
+        },
+        body: JSON.stringify({ email, password })
      });
      
-      // 사용자 정보 가져오기
-      const { data: userData } = await supabase.auth.getUser();
+      // 응답 상태 확인 및 로깅
+      console.log('로그인 응답 상태:', response.status);
      
-      console.log('로그인 성공:', userData);
+      // 응답 처리
+      const responseData = await parseResponse(response);
      
-      showAuthToast('로그인 성공', '환영합니다!');
+      // 오류 응답 확인
+      if (responseData?.error) {
+        const errorMessage = responseData.error_description || responseData.error;
+        showAuthToast('로그인 실패', errorMessage, 'destructive');
+        return { error: { message: errorMessage }, user: null };
+      }
      
-      return { error: null, user: userData.user };
-    } else {
-      // 오류 응답 처리
-      console.error('로그인 오류 응답:', responseData);
+      // 응답 처리
+      if (response.ok && responseData?.access_token) {
+        // 로그인 성공 시 Supabase 세션 설정
+        await supabase.auth.setSession({
+          access_token: responseData.access_token,
+          refresh_token: responseData.refresh_token
+        });
+        
+        // 사용자 정보 가져오기
+        const { data: userData } = await supabase.auth.getUser();
+        
+        console.log('로그인 성공:', userData);
+        
+        showAuthToast('로그인 성공', '환영합니다!');
+        
+        return { error: null, user: userData.user };
+      } else {
+        // 오류 응답 처리
+        console.error('로그인 오류 응답:', responseData);
+        
+        const errorMessage = responseData?.error_description || 
+                            responseData?.error || 
+                            '로그인에 실패했습니다. 이메일과 비밀번호를 확인하세요.';
+        
+        showAuthToast('로그인 실패', errorMessage, 'destructive');
+        return { error: { message: errorMessage }, user: null };
+      }
+    } catch (fetchError) {
+      console.error('로그인 요청 중 fetch 오류:', fetchError);
      
-      const errorMessage = responseData?.error_description || 
-                          responseData?.error || 
-                          '로그인에 실패했습니다. 이메일과 비밀번호를 확인하세요.';
+      const errorMessage = handleNetworkError(fetchError);
+      showAuthToast('로그인 요청 실패', errorMessage, 'destructive');
      
      return { error: { message: errorMessage }, user: null };
    }
@@ -111,6 +119,7 @@ export const signIn = async (email: string, password: string) => {
    
    // 네트워크 오류 확인
    const errorMessage = handleNetworkError(error);
+    showAuthToast('로그인 오류', errorMessage, 'destructive');
    
    return { error: { message: errorMessage }, user: null };
  }
--- a/src/contexts/auth/signUp.ts
+++ b/src/contexts/auth/signUp.ts
@@ -1,58 +1,105 @@

 import { supabase } from '@/lib/supabase';
-import { handleNetworkError, showAuthToast } from './auth.utils';
+import { handleNetworkError, parseResponse, showAuthToast } from './auth.utils';

 export const signUp = async (email: string, password: string, username: string) => {
  try {
    console.log('회원가입 시도:', { email, username });
    
    // 회원가입 시도
-    const { data, error } = await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        data: {
-          username,
+    try {
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: {
+            username,
+          },
        },
-      },
-    });
+      });

-    if (error) {
-      console.error('회원가입 오류:', error);
+      if (error) {
+        console.error('회원가입 오류:', error);
+        
+        // 사용자 친화적인 오류 메시지 설정
+        let errorMessage = error.message;
+        
+        if (error.message.includes('User already registered')) {
+          errorMessage = '이미 등록된 이메일입니다. 로그인을 시도하세요.';
+        } else if (error.message.includes('Password should be at least')) {
+          errorMessage = '비밀번호는 최소 6자 이상이어야 합니다.';
+        } else if (error.message.includes('Invalid email')) {
+          errorMessage = '유효하지 않은 이메일 형식입니다.';
+        } else if (error.message.includes('Unable to validate')) {
+          errorMessage = '서버 연결 문제: 이메일 검증에 실패했습니다.';
+        } else if (error.message.includes('json')) {
+          errorMessage = '서버 응답 형식 오류: 올바른 JSON 응답이 없습니다.';
+        } else if (error.message.includes('fetch failed')) {
+          errorMessage = '서버 연결에 실패했습니다. 네트워크 연결 또는 서버 상태를 확인하세요.';
+        } else if (error.message.includes('Failed to fetch')) {
+          errorMessage = 'CORS 오류가 발생했습니다. 서버 설정을 확인하거나 네트워크 관리자에게 문의하세요.';
+        }
+        
+        showAuthToast('회원가입 실패', errorMessage, 'destructive');
+        return { error, user: null };
+      }
+
+      // 성공 메시지 표시
+      showAuthToast('회원가입 성공', '이메일 확인 후 로그인해주세요.');
      
-      // 사용자 친화적인 오류 메시지 설정
-      let errorMessage = error.message;
-      
-      if (error.message.includes('User already registered')) {
-        errorMessage = '이미 등록된 이메일입니다. 로그인을 시도하세요.';
-      } else if (error.message.includes('Password should be at least')) {
-        errorMessage = '비밀번호는 최소 6자 이상이어야 합니다.';
-      } else if (error.message.includes('Invalid email')) {
-        errorMessage = '유효하지 않은 이메일 형식입니다.';
-      } else if (error.message.includes('Unable to validate')) {
-        errorMessage = '서버 연결 문제: 이메일 검증에 실패했습니다.';
-      } else if (error.message.includes('json')) {
-        errorMessage = '서버 응답 처리 오류: 네트워크 연결을 확인하세요.';
-      } else if (error.message.includes('fetch failed')) {
-        errorMessage = '서버 연결에 실패했습니다. 네트워크 연결 또는 서버 상태를 확인하세요.';
-      } else if (error.message.includes('Failed to fetch')) {
-        errorMessage = 'CORS 오류가 발생했습니다. 서버 설정을 확인하거나 네트워크 관리자에게 문의하세요.';
+      // 개발 환경 또는 데모 모드에서는 즉시 로그인 허용
+      if (import.meta.env.DEV || process.env.NODE_ENV === 'development') {
+        // 개발 환경에서는 즉시 로그인 상태로 전환
+        showAuthToast('개발 모드', '개발 환경에서는 이메일 확인 없이 로그인됩니다.');
      }
      
-      showAuthToast('회원가입 실패', errorMessage, 'destructive');
-      return { error, user: null };
+      return { error: null, user: data.user };
+    } catch (signUpError: any) {
+      console.error('기본 회원가입 방식 실패:', signUpError);
+      
+      // 특정 오류 패턴을 확인하여 대체 방법 시도
+      if (signUpError.message && (
+        signUpError.message.includes('json') || 
+        signUpError.message.includes('Unexpected end')
+      )) {
+        console.log('JSON 파싱 오류 발생, 직접 API 호출 시도');
+        
+        // 직접 API 호출 시도
+        const response = await fetch(`${supabase.auth.url}/signup`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'apikey': supabase.supabaseKey,
+            'Authorization': `Bearer ${supabase.supabaseKey}`,
+          },
+          body: JSON.stringify({ 
+            email, 
+            password,
+            data: { username },
+          })
+        });
+        
+        // 응답 처리
+        const result = await parseResponse(response);
+        
+        if (result.error) {
+          showAuthToast('회원가입 실패', result.error, 'destructive');
+          return { error: { message: result.error }, user: null };
+        }
+        
+        if (result.id) {
+          showAuthToast('회원가입 성공', '이메일 확인 후 로그인해주세요.');
+          return { error: null, user: result };
+        }
+        
+        // 알 수 없는 응답 처리
+        showAuthToast('회원가입 결과 불명확', '로그인을 시도해보세요.', 'destructive');
+        return { error: { message: '서버 응답을 해석할 수 없습니다.' }, user: null };
+      }
+      
+      // 그 외 오류는 그대로 던짐
+      throw signUpError;
    }
-
-    // 성공 메시지 표시
-    showAuthToast('회원가입 성공', '이메일 확인 후 로그인해주세요.');
-    
-    // 개발 환경 또는 데모 모드에서는 즉시 로그인 허용
-    if (import.meta.env.DEV || process.env.NODE_ENV === 'development') {
-      // 개발 환경에서는 즉시 로그인 상태로 전환
-      showAuthToast('개발 모드', '개발 환경에서는 이메일 확인 없이 로그인됩니다.');
-    }
-    
-    return { error: null, user: data.user };
  } catch (error: any) {
    console.error('회원가입 중 예외 발생:', error);