컴퓨터 정보/FireBase

FireBase : 구글 로그인 팝업창 만들기

혜닝혜루 2023. 2. 6. 16:22
728x90
반응형

1. 프로젝트 설정 - > 해당 코드 복사 하기

 

2. firebase 라는 자바스크립트를 따로 만들어준다 . 

만약 로그인하는 컴포넌트에서 사용하게 되면 의존성이 높아지기 때문에 따로 관리하는게 좋다.

 

// initalizeApp 을통해 app 을 초기화 시켜 주었다.

import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey:process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain:process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL:process.env.REACT_APP_FIREBASE_DB_URL,
  projectId:process.env.REACT_APP_FIREBASE_PROJECT_ID,
};


const provider = new GoogleAuthProvider();
const app = initializeApp(firebaseConfig);
const auth = getAuth();

export function login(){
  signInWithPopup(auth, provider)
  .then((result) => {
    const user = result.user;
    console.log(user)
    
  }).catch(console.error);
}

 

3. 코드를보면 맨마지막에 signInWithPopup ( auth, provider ) 즉, 사용자의 정보를 가져올수 있는 코드가 나와있다.

이 함수를 export 해서 로그인하려는 버튼인 컴포넌트에 넣어줄건데

로그인 을 클릭하면 해당  signInWithPopup 가 실행되고 실행된 함수에는 로그인하는 사용자의 정보를 가져올 수 있다.

로그인을 했을때  그 로그인한 사용자정보를 콘솔에 한번 찍어보았다.

 

해당 데이터로 어떤 UI를 그릴 수 있을지 생각해보면 대표적으로

 

displayName = " 사용자의 이름 " 을 볼 수 있고

email = "나의 구글 이메일"

photoURL = " 나의 구글이미지 "

이정도를 볼 수 있을것 같다.  :) 보통 로그인할때 내 아이디와 이미지가 나오기 마련이기 때문이다.

그리고 사용자의 uid도 확인할 수 있는걸 볼 수 있다.

 

 

해당 user의 정보를 확인했으니 user의 정보를 return 해줄거다

 

어디로? login 을 호출했던 네브바 UI에서 

리턴한 사용자의 로그인 정보를 담기위해 state하나를 만들어준다.

login().then(setuser)

=> 로그인 함수를 호출했을때 로그인이 잘되었다면? setuser 즉 사용자의 정보를 user에 담아주고 setuser 해줄건데

user => setuser으로 작성할 필요없이 바로 setUser을  작성해줘도 동일하게 코드가 실행이 된다.

 

 

그럼 이제 로그인을 하고 로그아웃을 할때를 로직을 짤 수 있는데 문제는 새로고침 하면 리로링이 된다는 것이다.

 

 

 

-------------------> 상태값 변경하는건 다음 글에서 쓰도록 하겠따

728x90