[React-BookStore] firebase 인증 추가 - 구글 /깃허브

 

2. 구글 인증

 

 

 

 

 

프로젝트 이름이랑 이메일 작성하고 추가하면

아래와 같이 제공업체가 추가된다.

 

 

 

파이어 스토어(db)도 사용하게끔 

firebase에 저장한다.

 

 

import { initializeApp } from "firebase/app";

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

import { getFirestore } from "firebase/firestore";

const firebaseConfig = {

  apiKey: import.meta.env.VITE_FIRE_API,

  authDomain: import.meta.env.VITE_FIRE_DOMAIN,

  projectId: import.meta.env.VITE_FIRE_PROJECTID,

  storageBucket: import.meta.env.VITE_FIRE_BUCKET,

  messagingSenderId: import.meta.env.VITE_FIRE_SENDERID,

  appId: import.meta.env.VITE_FIRE_APPID,

};

// Initialize Firebase

const app = initializeApp(firebaseConfig);

//파이어베이스 인증

const auth = getAuth();

//구글 인증 객체

const googleAuth = new GoogleAuthProvider();

//fire store db 사용

const db = getFirestore();

export { auth, googleAuth, db };

 

Login.jsx

에서 구글 로그인 버튼 클릭 시 팝업 형태로 로그인 창 띄움

 

  //구글 인증

  const signInWithGoogle = async () => {

    try {

      await signInWithPopup(auth, googleAuth); //팝업창 생성

      navigate("/");

    } catch (error) {

      console.log(error);

    }

  };

 

        <div className="snsLogin" onClick={signInWithGoogle}>

          <FcGoogle />

        </div>

 

 

 

 

---

3. 깃허브 인증

 

 

깃허브 개발자 설정에서 

New OAuth App으로 추가한다. 

 

 

 

 

깃허브 인증 객체도 추가하고 

 

 

 Login.jsx 페이지에서 

 

깃허브 버튼을 클릭하면 구글 인증과 동일하게 팝업창을 통해 인증을 실행한다. 

 

        <div className="snsLogin" onClick={signInWithGithub}>

          <FaGithub />

        </div>

 

  // //깃허브 인증

  const signInWithGithub = async () => {

    try {

      await signInWithPopup(auth, githubAuth);

      navigate("/");

    } catch (error) {

      console.log(error);

    }

  };

 

 

로그인 성공 시 navigate를 통해 기본페이지로 이동