Firebase로 구글 로그인하기
프로젝트 생성
1. Firebase와 연결하기
Firebase 훔페이지에서 프로젝트 생성
상단에 Go to console 클릭
원하는 앱 클릭(ios/android/web)
vscode에 firebase 설치
여기서부터 사이트에서 보여주는 코드 복붙하면 된다.
src 폴더 아래 firebase.js 파일 생성해서 코드 복붙하고 마지막 줄에 export default app 입력
2. provider 설정
build > Authentication > 사용하려는 provider(구글) 선택 > 허용 > 지원 이메일 설정 > 저장
(필요한 provider는 위 같은 방식으로 모두 추가)
로그인
1. import하기
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
2. auth, provider 설정
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
(app은 firebase 사이트에서 프젝 생성 후 firebase.js 파일에 복붙한 코드 / export default app)
3. 로그인 팝업 띄우기(로그인 클릭 시 구글 로그인 팝업창 뜨게 하기)
signInWithPopup(auth, provider)
4. user 로그인 상태 확인하기
*onAuthStateChanged: 페이지가 refresh 되면 실행된다.
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
if (!user) {
navigate('/login');
} else if (user && pathname === '/login') {
navigate('/');
}
});
return () => {
unsubscribe(); // 더 이상 사용 안 할 때 닫는다
};
}, [pathname]);
로그인 시 발생하는 에러
🔻error: Cross-Origin-Opener-Policy policy would block the window.close call. google provider 사용 시 발생하는 보안 관련 에러로 firebase에서 해결하려고 노력 중이라고 한다. (아직 해결 못함..ㅎ)
로그아웃
*signOut 함수 사용(firebase에서 지원)
const handleLogout = () => {
signOut(auth)
.then(() => { setUserData({});
})
.catch((error) => {
alert(error.message);
});
};
참고 사이트
Last updated