시작
서비스를 만들다 보면 소셜 로그인이 필요한 경우가 생깁니다!
백엔드에서 OAuth를 사용하여 소셜로그인을 구현할 수 있지만, 이번에 저는 파이어베이스를 사용해서 간단하게 로그인을 구현하기로 했습니다!
파이어베이스는 Backend-as-a-Service(Baas) 방식의 서비스로, 백엔드에서의 여러 도구들과 기능을 제공해줍니다! 백엔드 개발을 잘 모르더라도 파이어베이스를 사용하면 백엔드의 많은 부분을 대체할 수 있습니다. 예를 들면 소셜로그인이라던가요..!
리액트에 파이어베이스의 소셜 로그인을 적용하는 방법에 대해서 알아보겠습니다!
진짜 시작
파이어베이스에서 프로젝트를 생성하고, 이를 리액트에 적용하는 과정으로 진행됩니다!
파이어베이스
파이어베이스 프로젝트 만들기
먼저 파이어베이스에서 프로젝트를 만들어야합니다.
파이어베이스에서 로그인 후 콘솔로 이동하여 프로젝트 추가 버튼을 눌러 새로운 프로젝트를 생성합니다.
그 후 프로젝트의 이름을 입력해줍니다. 여러분의 프로젝트에 적절한 이름을 넣고 계속을 눌러주세요!
그 후 Google 애널리틱스 설정을 하게 되는데, 상황에 따라서 체크를 해주시면 됩니다. 프로젝트 만들기를 눌러 마무리해줍니다!
조금 기다리면 프로젝트가 생성됩니다!
파이어베이스 웹앱 설정
프로젝트의 메인 페이지로 넘어가게 되는데, 여기서는 세 번째 웹 아이콘을 선택합니다!
웹 앱의 이름을 입력하고, 앱 등록을 선택합니다!
그 후 복사할 수 있는 json 형식의 firebaseCofig 코드가 나올 것입니다. 미리 복사해놓으셔도 되고, 나중에 리액트 코드 작성 과정에서 필요할 때 가져오시면 됩니다! 이 코드를 우리는 리액트에 적용합니다.
파이어베이스 구글 로그인 설정
다시 프로젝트의 메인 페이지로 돌아옵니다.
좌측에 있는 여러 카테고리들 중 사람 모양의 아이콘(Authentication)을 선택합니다.
그 다음 나오는 페이지에서는 시작하기 버튼을 눌러주세요!
그 후 Authentication의 Users 탭으로 들어가 로그인 방법 설정 버튼을 눌러 소셜 로그인 설정을 시작합니다.
그 후 아래와 같은 창이 나오게 되는데, 여기서 여러 로그인 방법을 선택할 수 있습니다! 저는 프로젝트에 구글로그인을 적용할 예정이므로, 구글 로그인만 선택합니다!
구글 로그인 설정으로 들어가서 좌측의 토글버튼 사용 설정을 눌러주세요!
프로젝트 공개용 이름은 그대로 두고, 프로젝트 지원 이메일은 기본값으로 입력해주세요!!
설정을 마치고 나면, 아래에 승인된 도메인을 추가하는 탭이 생깁니다.
여기서는 여러분의 도메인을 입력해주시면 됩니다! 저는 로컬에서만 테스트할 예정이라, localhost만 있어도 괜찮겠네요!
이렇게 파이어베이스 프로젝트 생성과, 웹앱 설정, 소셜 로그인 설정까지 마쳤습니다. 너무 간단하죠..? 저도 놀랐습니다.
다음으로 리액트 코드를 직접 만들어서 파이어베이스를 적용해보겠습니다!
리액트 코드 작성
본격적으로 리액트 코드를 작성하겠습니다!!
먼저 프로젝트를 생성해주세요!
npx create-react-app firebase-login그 후 프로젝트로 들어가서 firebase를 설치해주세요!
npm i firebase그 후 src 폴더 안에 fbase.js 파일을 만들고 이전에 파이어베이스 생성 과정에서 있었던 firebaseConfig 코드를 입력해주세요!
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export { app, auth };그리고 아래의 코드로 테스트를 해보시면 로그인 후 정상적으로 자신의 이름이 뜨는 것을 확인할 수 있습니다!
console의 data로그를 확인하시고, 필요한 데이터를 서비스에서 사용하는 방향으로 사용하시면 됩니다!
import { auth } from './fbase';
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { useState } from 'react';
import Test from './Test';
function App() {
const [userData, setUserData] = useState(null);
function handleGoogleLogin() {
const provider = new GoogleAuthProvider(); // provider를 구글로 설정
signInWithPopup(auth, provider) // popup을 이용한 signup
.then((data) => {
setUserData(data.user); // user data 설정
console.log(data) // console로 들어온 데이터 표시
})
.catch((err) => {
console.log(err);
});
}
return (
<div>
<Test></Test>
<button onClick={handleGoogleLogin}>Login</button>
{userData ? userData.displayName : null}
</div>
);
}
export default App;github 코드
https://github.com/jjonggang/react-firebase-login
끝
파이어베이스 설정, 리액트에서의 사용방법을 알아보았습니다!
구글로그인 뿐만 아니라 다른 많은 provider도 선택해서 로그인을 제공할 수 있으니, 서비스의 특성에 맞게 사용해주세요!
👍👍