React + Google Firebase 연동하기

개인적으로 구글 파이어베이스가 다른 플랫폼에 비해 사용하기가 쉽다고 생각됩니다.

가장 좋은건 파이어베이스 Auth를 통해 각종 소셜 로그인을 쉽게 구현할 수 있고 

Realtime DB와 store를 통해 프로젝트를 쉽게 만들어볼 수 있습니다.

오늘은 React 프로젝트에서 구글Firebase연동을 통해 구글로그인을 할 수 있도록 설정해보겠습니다.

---

1. 파이어베이스에 로그인하여 프로젝트를 생성합니다.

 

애널리틱스 사용을 권합니다.

2. 프로젝트를 등록하고 받은 firebase SDK를 저장해놓습니다.

나의 앱 firebase SDK

 

구글 로그인을 활성화 해야합니다.

 

3. 이제 다시 VSC로 돌아와 터미널에서 firebase를 설치해 줍니다.

npm install firebase

그리고 아까 저장해두었던 SDK를 가지고 유틸 컴포넌트를 하나 만들어줍니다.

 // firebase_config.js
 
 
  import firebase from 'firebase'
  
  const firebaseConfig = {
    apiKey: "[APIKEY]",
    authDomain: "[Your domain]",
    databaseURL: "[Your DBurl]",
    projectId: "[Your project id]",
    storageBucket: "[Your storage Bucket]",
    messagingSenderId: "[Your .. ]",
    appId: "[Your .. ]",
    measurementId: "[Your .. ]"
  };
  // Initialize Firebase  
firebase.initializeApp(firebaseConfig)

export const auth = firebase.auth();
export const firestore = firebase.firestore();

const provider = new firebase.auth.GoogleAuthProvider();
// GoogleAuthProvider 클래스를 authentication 라이브러리에서 사용할 수 있도록 불러오는 코드.

provider.setCustomParameters({prompt: 'select_account'});
// signIn이랑 authentication을 위해서 GoogleAuthProvider를 사용할 때마다 구글 팝업을 항상 띄우기를 원한다는 의미이다.

export const signInWithGoogle = () => auth.signInWithPopup(provider);
// signInWithPopup 메소드는 여러 파라미터를 받을 수 있다. 트위터, 페이스북, 깃허브 등으로도 로그인이 필요할 수도 있으므로.
// 여기에서는 google로 signIn할 것이기 때문에, 파라미터로 위에서 정의한 provider를 넣어준다.

export default firebase;
// 혹시 전체 라이브러리가 필요할지도 모르기 때문에 firebase도 export 해준다.

 

4. 이제 준비는 끝났습니다. 구글 로그인을 보여줄 컴포넌트를 만들어봅시다.

import 'firebase/firestore';
import 'firebase/auth';
import { signInWithGoogle } from '../firebase_config';
import { auth } from '../firebase_config';

먼저 필요한 파일들을 가져오겠습니다. 여기서 firebase_config는 좀전에 저희가 작성했던 파이어베이스 앱에 대한 파일입니다. 

// onAuthStatChanged를 통해 로그인 변경 감지를하여 함수를 실행시켜줍니다

function GoogleSignin(props){

    auth.onAuthStateChanged(user => {
    // user.currentUser 를 통해 현재 로그인 중인 사용자에 대한 정보를 이용할 수 있습니다.
    // ex) user.currentUser.email , user.currentUser.displayName .. etc
    
      if(user !== null){;
        console.log('로그인되었습니다.');
      }
    })

    return (
      <div>
        <button onClick={signInWithGoogle}>로그인</button>
      </div>
    )
  }

 

 

5. 로그아웃 버튼 추가하기

로그아웃 버튼을 보여줄 컴포넌트를 정한 후 컴포는트에서도 똑같이 auth 관련 import를 해줍니다.

import { auth } from './firebase_config';

 

<button onClick={() => {
                auth.signOut();
                console.log('로그아웃 합니다');
            }}>EXIT</button>

 

참고블로그 : soldonii.tistory.com/117