From dc0e94d3528f4de21fc57ede3680ae0415488453 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 15 Mar 2025 13:24:11 +0000 Subject: [PATCH] Investigate Supabase connection issues Investigate the cause of "Unexpected end of JSON input" error despite successful Supabase connection test. --- src/contexts/auth/auth.utils.ts | 57 ++++++++++++-- src/contexts/auth/signIn.ts | 127 ++++++++++++++++--------------- src/contexts/auth/signUp.ts | 129 ++++++++++++++++++++++---------- 3 files changed, 205 insertions(+), 108 deletions(-) diff --git a/src/contexts/auth/auth.utils.ts b/src/contexts/auth/auth.utils.ts index 71be197..1abb225 100644 --- 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) { diff --git a/src/contexts/auth/signIn.ts b/src/contexts/auth/signIn.ts index 579acc9..027575e 100644 --- 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 }; } diff --git a/src/contexts/auth/signUp.ts b/src/contexts/auth/signUp.ts index 0c2f880..523fe87 100644 --- 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);