2. firebase authentication

mangojang·2023년 6월 3일

react-disney-app 회고록

목록 보기

2/8

백앤드 서버 없이 간단하게 로그인을 구현 하고 싶어 firebase를 사용하였다. 다양한 로그인 방식을 지원 하는데 그 중에서 구글 로그인 방식을 사용하였다. firebase 콘솔 설정 방법과 코드 적용 방법에 대해서 이야기 하겠다.

firebase 콘솔 설정

firebase 프로젝트 생성 및 SDK 발급

프로젝트 추가 클릭
프로젝트 이름 지정
애널리틱스 설정
- 필수 값은 아니다. 필요하다면 선택
웹 아이콘 클릭
앱 닉네임 입력 후, 앱 등록 버튼 클릭

npm 사용 선택 → SDK 코드 복사

프로젝트에 firebase.tsx 생성 후, 복사한 코드 붙여 넣기

필자는 typescript 를 사용했기에 .tsx파일로 생성하였다.

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// import { getAnalytics } from "firebase/analytics";
import 'firebase/auth';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
	apiKey: `${process.env.NEXT_PUBLIC_FIREBASE_API_KEY}`,
	authDomain: 'react-disney-app-43d60.firebaseapp.com',
	projectId: 'react-disney-app-43d60',
	storageBucket: 'react-disney-app-43d60.appspot.com',
	messagingSenderId: '280606126806',
	appId: '1:280606126806:web:adc2a31ee1adeebdc6cf77',
	measurementId: 'G-7P8NZMBCRH',
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
export default app;

Authentication 로그인 방법 추가

참여 > Authentication 클릭
Sign-in-method 탭 > Google 클릭
사용 설정 스위치 활성화 후, 이메일 선택 후 저장 버튼 클릭
구글 로그인 추가 확인

코드 적용 방법

자세한 코드는 여기 를 확인 바란다.

//1. sdk 설정 파일 불러오기
import app from '@/firebase';
import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup, signOut } from 'firebase/auth';

//3. auth, provider 할당
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

const handleAuth = useCallback((e: React.MouseEvent<HTMLElement>) => {
		e.preventDefault();
		signInWithPopup(auth, provider)
			.then(result => {
				//4. 로그인 성공 했을 경우 코드 작성
				//4-1. user 정보는 result.user로 받아 올 수 있음.
				const user = result.user;
				// dispatch(setUser(user));
				dispatch(setLoggedIn(true));
				setCookie('uid', user.uid, 1);
				user.photoURL && setPhotoUrl(user.photoURL);
			})
			.catch(error => {
				//5. 로그인 실패 했을 경우 코드 작성
				alert(`잠시후 다시 시도해 주세요.\n${error.message}`);
				console.log(error);
			});
	}, []);

로그아웃

signOut 함수 메서드를 이용한다.

const handleLogout = useCallback(() => {
		signOut(auth)
			.then(() => {
				// dispatch(setUser({}));
				dispatch(setLoggedIn(false));
				delCookie('uid');
				setPhotoUrl('');
			})
			.catch(error => {
				console.log(error);
			});
	}, []);

로그인 상태 값 확인

onAuthStateChanged 메서드를 통해 현재 로그인한 상태인지 아닌지 확인 할 수 있다.

useEffect(() => {
		onAuthStateChanged(auth, user => {
			//1. user가 있을 경우, 로그인한 상태 
			if (user) {
				//2. 로그인 한 상태 일 경우 코드 작성
				// dispatch(setUser(user));
				dispatch(setLoggedIn(true));
				const photourl = user.photoURL;
				photourl && setPhotoUrl(photourl);
				setCookie('uid', user.uid, 1);
			}
		});
	}, [auth]);