108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
|
|
import React, { useEffect, useState } from 'react';
|
|
import { supabase } from '@/lib/supabase';
|
|
import { Session, User } from '@supabase/supabase-js';
|
|
import { toast } from '@/hooks/useToast.wrapper';
|
|
import { AuthContextType } from './types';
|
|
import * as authActions from './authActions';
|
|
import { clearAllToasts } from '@/hooks/toast/toastManager';
|
|
import { AuthContext } from './AuthContext';
|
|
|
|
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [session, setSession] = useState<Session | null>(null);
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// 현재 세션 체크 - 최적화된 버전
|
|
const getSession = async () => {
|
|
try {
|
|
console.log('세션 로딩 시작');
|
|
|
|
// 비동기 작업을 마이크로태스크로 지연하여 UI 차단 방지
|
|
await new Promise<void>(resolve => queueMicrotask(() => resolve()));
|
|
|
|
const { data, error } = await supabase.auth.getSession();
|
|
|
|
if (error) {
|
|
console.error('세션 로딩 중 오류:', error);
|
|
} else if (data.session) {
|
|
// 상태 업데이트를 마이크로태스크로 지연
|
|
queueMicrotask(() => {
|
|
setSession(data.session);
|
|
setUser(data.session.user);
|
|
console.log('세션 로딩 완료');
|
|
});
|
|
} else {
|
|
console.log('활성 세션 없음');
|
|
}
|
|
} catch (error) {
|
|
console.error('세션 확인 중 예외 발생:', error);
|
|
} finally {
|
|
// 로딩 상태 업데이트를 마이크로태스크로 지연
|
|
queueMicrotask(() => {
|
|
setLoading(false);
|
|
});
|
|
}
|
|
};
|
|
|
|
// 초기 세션 로딩 - 약간 지연시켜 UI 렌더링 우선시
|
|
setTimeout(() => {
|
|
getSession();
|
|
}, 100);
|
|
|
|
// auth 상태 변경 리스너 - 최적화된 버전
|
|
const { data: { subscription } } = supabase.auth.onAuthStateChange(
|
|
async (event, session) => {
|
|
console.log('Supabase auth 이벤트:', event);
|
|
|
|
// 비동기 작업을 마이크로태스크로 지연하여 UI 차단 방지
|
|
await new Promise<void>(resolve => queueMicrotask(() => resolve()));
|
|
|
|
if (session) {
|
|
// 상태 업데이트를 마이크로태스크로 지연
|
|
queueMicrotask(() => {
|
|
setSession(session);
|
|
setUser(session.user);
|
|
});
|
|
} else if (event === 'SIGNED_OUT') {
|
|
// 상태 업데이트를 마이크로태스크로 지연
|
|
queueMicrotask(() => {
|
|
setSession(null);
|
|
setUser(null);
|
|
|
|
// 로그아웃 시 열려있는 모든 토스트 제거
|
|
clearAllToasts();
|
|
|
|
// 로그아웃 이벤트 발생시켜 SyncSettings 등에서 감지하도록 함
|
|
window.dispatchEvent(new Event('auth-state-changed'));
|
|
});
|
|
}
|
|
|
|
// 로딩 상태 업데이트를 마이크로태스크로 지연
|
|
queueMicrotask(() => {
|
|
setLoading(false);
|
|
});
|
|
}
|
|
);
|
|
|
|
// 리스너 정리
|
|
return () => {
|
|
subscription.unsubscribe();
|
|
};
|
|
}, []);
|
|
|
|
// 인증 작업 메서드들
|
|
const value: AuthContextType = {
|
|
session,
|
|
user,
|
|
loading,
|
|
signIn: authActions.signIn,
|
|
signUp: authActions.signUp,
|
|
signOut: authActions.signOut,
|
|
resetPassword: authActions.resetPassword,
|
|
};
|
|
|
|
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
|
};
|