회사에서 Vue로 작성된 코드를 React로 바꾸는 중인데, 인증부분을 Firebase로 사용하고 있었습니다. 이번 기회에 React에서 Firebase를 사용해서 구글 인증을 구현해보고 공부해보려 합니다.
Firebase 프로젝트 생성
프로젝트 추가
firebase 접속
아래 링크를 통해 firebase 웹사이트에 접속합니다.
프로젝트 추가
프로젝트 추가를 클릭하고, 새로운 프로젝트 이름을 입력합니다.
애널리틱스를 사용할지 묻는 창이 나오는데, 지금은 공부하는 목적이므로 굳이 체크를 하지 않아도 됩니다.
다음 단계로 넘어가면, 프로젝트를 생성하게 되는데, 잠시 기다려줍니다.
완성되면 다음을 클릭합니다.
로그인 제공 설정
구글 인증 선택
프로젝트의 로그인 방법을 추가해봅시다.
좌측 바에 Authentication을 클릭합니다.
Sign-in method 탭을 클릭하면 다음과 같은 창이 나옵니다. 다양한 로그인 방법을 선택할 수 있습니다.
이 프로젝트에서는 구글 로그인을 사용할 예정이므로, 추가 제공업체의 "Google"을 클릭합니다.
우측 상단의 "사용 설정"을 활성화해줍니다.
프로젝트 지원 이메일을 누르고 firebase에 가입한 이메일을 입력해줍니다.
로그인 제공업체에 다음과 같이 "Google"이 있으면 성공입니다.
Firebase 앱 생성
웹 앱 추가
프로젝트 메인 화면에서 앱을 추가합니다. 웹사이트를 만들 것이므로, 웹 아이콘을 눌러줍니다.
앱 등록
앱 닉네임을 입력 후에, 앱 등록을 클릭합니다.
SDK 추가
등록이 완료되면 다음과 같이 SDK가 생성됩니다.
firebaseConfig의 각 key는 .env 파일로 관리해주는 것이 좋습니다.
여기까지 firebase 로그인 제공자 설정과 firebase 초기화도 마쳤습니다.
Google 로그인 구현
저는 간단히 로그인 버튼을 누르면 구글 로그인 탭을 띄우고, 계정을 클릭해서 로그인 정보를 받아오는 앱을 만들겠습니다.
React 앱에서 로그인 기능 구현
CRA를 통한 앱 생성
cra 명령어로 프로젝트를 생성해줍니다.
npx create-react-app firebase-login
저는 다음과 같은 디렉토리 구조를 사용하였습니다.
├── node_modules
├── public
├── src
├── auth
└── login.js
├── pages
└── MainPage.jsx
└── service
└── firebase.js
└── .envfirebase.js
firebase.js 파일에서 firebase 앱을 초기화하고 인증 객체를 export 합니다.
firebaseConfig에는 위의 SDK 생성하는 창에서 나온 firebaseConfig를 사용합니다.
(저는 .env를 통해 관리하였습니다.)
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth"
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APPID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export { app, auth };
firebase를 import 할 때
//권장하지 않음 👎
import "firebase"; 처럼 사용하면, Firebase SDK를 전체적으로 가져오게 됩니다. 이는 Firebase의 모든 기능과 모듈을 포함하므로, 프로젝트에서 필요하지 않은 기능을 불러오게 될 수 있습니다. 따라서 아래 코드처럼 프로젝트에서 실제로 사용하는 특정 모듈만 가져오는 것이 권장됩니다.
//권장하는 방법 👍
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth"로그인 기능 구현
login.js 파일에서 구글 로그인 기능과 로그아웃을 구현합니다.
import { GoogleAuthProvider, signInWithPopup, signOut } from "firebase/auth"
import { auth } from '../service/firebase';
export async function loginWithGoogle() {
try {
const provider = new GoogleAuthProvider(); //provieder 구글 설정
const result = await signInWithPopup(auth, provider); // 팝업창 띄워서 로그인
const credential = GoogleAuthProvider.credentialFromResult(result);
// 인증 자격증명(credential)을 추출 (액세스 토큰)
const token = credential.accessToken;
const user = result.user;
return { token, user };
} catch (error) {
throw new Error(error);
}
}
//Logout 하는 함수
export async function logout() {
await signOut(auth);
return;
}
provider는 Firebase 인증(Auth)에서 제공하는 인증 공급자를 나타내는 객체입니다.
이 객체는 사용자 인증에 필요한 정보를 제공하고, Firebase가 해당 인증 공급자와 상호 작용하여 사용자 인증을 처리할 수 있도록 합니다.
GoogleAuthProvider는 Firebase 인증(Auth)에서 제공하는 구글 로그인 인증 공급자입니다. 이 공급자를 사용하면 사용자는 구글 계정을 사용하여 앱에 로그인할 수 있습니다. signInWithPopup 함수에서 이 구글 인증 공급자를 사용하여 팝업 창을 띄워 구글 로그인을 수행할 수 있습니다.
signInWithPopup 함수는 구글 로그인을 포함한 인증 팝업을 띄우고, 사용자가 인증을 완료하면 해당 인증 정보와 함께 Promise를 반환합니다. Promise의 리턴 값은 사용자 인증에 대한 결과를 나타내는 객체입니다.
MainPage 구현
앞에서 구현한 로그인, 로그아웃 기능을 사용할 페이지를 구현합니다.
import { useCallback, useState } from 'react';
import { loginWithGoogle, logout } from '../auth/login';
import { FcGoogle } from 'react-icons/fc';
export default function MainPage() {
const [userData, setUserData] = useState(null);
const [token, setToken] = useState(null);
//로그인 버튼을 눌렀을 때, 작동하는 이벤트 핸들러
const handleLogin = useCallback(async () => {
try {
const { token, user } = await loginWithGoogle();
setUserData(user);
setToken(token);
} catch (error) {
console.error(error);
}
}, []);
//로그아웃 버튼을 눌렀을 때, 작동하는 이벤트 핸들러
const handleLogout = useCallback(async () => {
try {
await logout();
setUserData(null);
} catch (error) {
console.error(error);
}
}, []);
return (
<div className="py-24">
<button className="login-btn" onClick={handleLogin}>
<FcGoogle className="inline-block mx-3" />
Sign in with google
</button>
<div className="login-info__area">
<p className="login-info">Login Information</p>
<p>name: {userData?.displayName}</p>
<p>email: {userData?.email}</p>
<p>token: {token ? `${token.slice(0, 20)}...` : ''}</p>
</div>
<button className="login-btn" onClick={handleLogout}>
logout
</button>
</div>
);
}실제 화면
"Sign in with google" 버튼을 클릭하면 다음과 같이 구글 계정을 선택하는 팝업이 나타납니다.
계정을 선택하면 userData에 로그인한 계정에 대한 정보가 저장됩니다.
등록된 사용자 확인
Firebase 사이트의 프로젝트에서 "User" 탭을 누르면 등록된 사용자를 확인할 수 있습니다.
참고
firebase 공식문서: firebase.google.com/docs
cychann 벨로그 : velog.io/@cychann/React-React
