[React] Firebase - Authentication으로 로그인 기능 구현하기

https://firebase.google.com/?hl=ko&gclid=CjwKCAjwpqCZBhAbEiwAa7pXeX-_LGJVKKRu3WA1Zbs-awSKivk12siAqSNzd60QEYrX7TKbOp59MxoCHK0QAvD_BwE&gclsrc=aw.ds 

Firebase

 

1. npm install

---

https://www.npmjs.com/package/firebase

npm install --save firebase

 

2. firebase 초기화

---

Firebase > Console > 프로젝트 생성 > 프로젝트 > 프로젝트 설정
아래의 Firebase SDK 를 복사해 줍니다.

 

Firebase와 관련된 서비스들은 컴포넌트와 따로 만들기 위해, src폴더에 service 폴더를 생성 후 firebase.js 생성해 줍니다.

../src/service/firebase.js

 

복사한 내용을 붙여줍니다.

• 필요 없는 것들은 안 써주고, 로그인과 회원가입 할 때 필요한 api key와 auth domain만 남겨줬습니다.
• key는 외부에 노출되면 안 되니까, env 파일에 숨겨줍니다.

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

/** 프로젝트 config */
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Authentication SDK 추가 및 초기화
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

export { auth };

 

 

로그인을 할 때, 이렇게 Google 로그인 팝업창이 뜨도록 해보겠습니다!

 

3.  Google 로그인 업체 설정

---

우선, 연결하고 싶은 로그인 업체를 추가해주세요. (저는 Google만 했습니다.)

Firebase > Console > 본인 project 선택 > Authentication > Sign-in method

 

4. Google 사용하여 인증

---

https://firebase.google.com/docs/auth/web/google-signin?authuser=0 

자바스크립트로 Google을 사용하여 인증  |  Firebase

 

../src/service/firebase.js 에 Google auth provider를 추가해줍니다.

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

/** 프로젝트 config */
const firebaseConfig = {
  apiKey: env.REACT_APP_FIREBASE_API_KEY,
  authDomain: env.REACT_APP_FIREBASE_AUTH_DOMAIN,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Authentication SDK 추가 및 초기화
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

/** 구글 auth provider */
const googleAuthProvider = new GoogleAuthProvider();

export { auth, googleAuthProvider };

 

../src/service/auth.js 을 생성해주고, 해당 코드를 작성하여 로그인 팝업창을 구현해줍니다.

import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { auth, googleAuthProvider } from "./firebase";

/** 로그인 팝업 */
export const signInGoogle = signInWithPopup(auth, googleAuthProvider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });

 

signInGoogle을 잘 활용하여, 본인의 프로젝트 내에서 로그인 팝업창을 뜨게 할 곳에 연결합니다.

예를 들어, 버튼을 클릭하면 Google 로그인 팝업창이 뜨도록...