react firebase 연동 auth 정보 db, app에 저장하기

firebase.initializeApp(config);

firebase 를 처음 실행할때 필요하다. config 에서는 firebase에서 제공하는 api key 등등의 정보들이 들어있다.

 

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

firebase 의 auth, firestore 메소드를 불러온다 auth 는 이후 app.js 에서 사용할것이다.

 

 

const provider = new firebase.auth.GoogleAuthProvider(); //auth 라이브러리 접근가능
provider.setCustomParameters({prompt:'select_account'}) // pop up 

 

GoogleAuthProvider 클래스를 불러와 이렇게 set 해주면

google auth 를 사용할때마다 구글 팝업을 띄워준다.

이provider 를

 

 

export const signInWithGoogle = () =>auth.signInWithPopup(provider);

 

이런식으로 signInWithPopup 메소드에 넣어주면 실제 구글 로그인팝업을 사용할수있다.

 

원하는 컴포넌트에서 이 함수를 사용하면된다.

<CustomButton onClick ={signInWithGoogle} isGoogleSignIn>Sign In With Google</CustomButton>

 

 

웹에서 유저가 로그인 했는지 안했는지 확인하는 방법은 auth 를 활용하면된다.

    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth=>{






componentWillUnmount(){
    this.unsubscribeFromAuth();  //unmount -> auth 해제
  }

onAuthStateChanged 메소드는 auth 상태가 바뀔때마다 실행되고 파라미터로 user상태를 받는다

그리고 return 값으로 auth 를 끈을 메소드를 리턴한다.

auth 상태

 

 

firebase db 에 접근해보자

export const createUserProfileDocument = async (userAuth,additionalData) =>{
    if(!userAuth){
        return ;
    }
    const userRef = firestore.doc(`users/${userAuth.uid}`);
    const snapshot = await userRef.get();
    if(!snapshot.exists){
        //이미 존재하지 않으면
        const { displayName , email} = userAuth;
        const createAt = new Date();


        try {
            await userRef.set({
                displayName,
                email,
                createAt,
                ...additionalData,
            })
        } catch (error) {
            console.log(error);
        }
    }
    return userRef;
    }

userAuth 가 null 일때(사인아웃) 를 제외하고

 

firestore.doc 은 해당 위치에 데이터가 있던없건 queryReference라는 오브젝트를 리턴한다

이 오브젝트로 데이터를 저장할지 가져올지 할수있다.

 

documentRef , collectionRef 형태가있는데

documentRef는 CRUD 에사용되고

collectionRef는 add 에사용된다.

 

.get()을 사용해 데이터를 가져오면 snapsot 를 리턴한다.

데이터가 없는경우는 (로그인 했지만 db 에 저장되지않음)

db 에 저장한다.

 

다시 onAuthStateChanged로 돌아와서

this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth=>{
      console.log('userAuth');
      
      console.log(userAuth);
      if(userAuth){
        const userRef = await createUserProfileDocument(userAuth); //db 에 유저생성
        
        userRef.onSnapshot(snapshot =>{
          console.log(snapshot.data());
            this.setState({
              currentUser:{
                id:snapshot.id,
                ...snapshot.data()
              }
            },()=>{
              console.log(this.state);
            });
            
        });
      }else{
        this.setState({
          currentUser:userAuth
        })
      }
    })

createUserProfileDocument 함수 에서 userRef를 리턴받아

스냅샷을 컴포넌트에 저장해준다. 

onSnapshot 메소드는 리스너로 userRef이 변경될때마다 실행된다.

저장되는 state에는 

snapsnot.id 와 또 snapshot.data()를 저장하는데

snapshot.data() 에는  snapshot 과 달리 필요한 정보만 들어있다.