[React] 소셜로그인 구현하기(with. Firebase)

✨ 버전 정보: "firebase": "^9.6.3"

 

0. 설치

npm install firebase

 

1. src 폴더에 config 폴더 생성 

 - auth.js - firebase-config.js

 

2. firebase 프로젝트 콘솔 설정에서 SDK 값 복사 -> firebase-config.js에 붙여 넣기

 

 

3.  필요한 항목 import 하기

//제공업체의 OAuth를 사용하기 위해 getAuth를 사용
import { getAuth } from "firebase/auth";

//파이어베이스를 한번 초기화 해주기위해서 사용함.
import { initializeApp } from "firebase/app";

//구글 분석허용
import { getAnalytics } from "firebase/analytics";

🔍 파이어베이스 소셜로그인 공식문서

https://firebase.google.com/docs/auth/web/google-signin

 

4. firbaseConfig 항목들 초기화 해준 변수 내보내기

export const authentication = getAuth(app);

 

5. auth.js에 사용하고자 하는 소셜로그인 방식 imort 하고 내보내기 

 

import { GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";

export const googleProvider = new GoogleAuthProvider();
export const githubProvider = new GithubAuthProvider();

이렇게 해준 뒤 파이어베이스 Authentication 콘솔에서 설정을 해줘야 함.

 

6. firebase 제공업체 설정

➰사용 설정을 클릭하기

앱 ID와 비밀번호는 해당 업체의 개발자 콘솔에 들어가서 새 프로젝트를 만들면 생성해주는 값 붙여 넣고

마지막 항목은 각 업체의 개발자 콘솔에 추가해주면 된다.

 

작업 후 저장을 눌러주고 Sign-in-method를 클릭해보면

위와 같이 정상적으로 설정된 것을 확인할 수 있다. 

 

7. 로그인을 관리하는 컴포넌트에 앞서 작성해둔 정보를 사용할 수 있게 함수 생성

import { authentication } from "../../config/firebase-config";
import { signInWithPopup } from "firebase/auth";
import { googleProvider, githubProvider } from "../../config/auth";

const signHandler = (provider) => {
        signInWithPopup(authentication, provider)
            .then((res) => {
                console.log(res);
                console.clear();
                navigate("/template");
            })
            .catch((err) => {
                console.log(err);
            });
    };

➰signInWithPopup( 클릭 시 해당 업체 로그인 폼이 팝업창으로 나오는 함수)

signInWithPopup(auth값, provider값) 넣어주고 Promise 사용해서 차례로 작업할 수 있게 해 줌

로그인 이후 react-router-dom의 useNavigate()를 이용해서 다음 화면으로 넘어갈 수 있게 처리함.

 

  <div className={styles.googleLogo} onClick={() => signHandler(googleProvider)}>
                    <img src={google} alt="" width="35px" />
                </div>

                <div className={styles.githubLogo} onClick={() => signHandler(githubProvider)}>
                    <img src={github} alt="" width="50px" />
                </div>

➰signHandler의 인자에 export해준 provider값을 넣어줌 

 

8. 완료

팝업창이 뜨면서 소셜 로그인 페이지가 나타난다. 로그인해서 들어가면,

➰➰➰ url주소가 변경되면서 route처리까지 정상적으로 되는 것을 확인할 수 있다.