Firebase을 통해 로그인 구현

Firebase

서버측 코드를 작성하지 않아도 클라우드와 연동하여 모바일 앱을 효율적으로 개발 할 수 있느 환경을 제공해준다.

사용자 인증(OAuth), 실시간 데이터베이스, 클라우드, 애널리스틱스 등과 같은 서비스를 제공한다.

OAuth
별도의 회원가입 없이 로그인 기능을 제공하는 플랫폼의 ID만 있으면 외부 서비스에서도 인증을 가능하게 하고 그 서비스의 API를 이용하게 해주는 것

Firebase 로그인 구현 과정

1. https://firebase.google.com/ 에 들어가서 로그인 후 시작하기, 프로젝트 추가한다.

2. 프로젝트가 생성되고 나면, iOS, Android, Web 앱 중 하나를 선택 후 App 이름을 적는다.

3. 해당 프로젝트의 인증 메뉴에서 SDK 설정 및 구성에서 Firebase 서비스 사용을 위한 스크립트 코드를 코드 에디터에 추가한다.

4. Firebase와의 연동을 위해 npm install firebase

5. firebase.js 생성
   필요한 Key 값들을 추가하고 하고 사용을 위해 export 해준다

import firebase from "firebase";

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

// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);

export default firebaseApp;

Key 값들은 보여주면 안되기 때문에 .env 파일에 상수로 지정해준다음 env파일의 값을 읽어오도록 한다.

★ .gitignore에 .env 파일 추가해주기

6. firebase의 OAuth 인증 서비스를 이용하기 위한 코드 구현

import firebase from "firebase";
import firebaseApp from "./firebase";

class AuthService {
  login(providerName) {
    const authProvider = new firebase.auth[`${providerName}AuthProvider`]();
    return firebaseApp.auth().signInWithPopup(authProvider);
  }
}

export default AuthService;

const authProvider = new firebase.auth${providerName}AuthProvider;
provideName은 Google, Github와 같은 값이 들어간다.

7. login 작동 함수를 생성하여 버튼에 적용한다.

const Login = ({ authService }) => {
  const onLogin = (e) => {
    authService
      .login(e.currentTarget.textContent) //
      .then(console.log());
  };

  return (
    <section className={styles.login}>
      <Header />
      <section>
        <h1>Login</h1>
        <ul className={styles.list}>
          <li className={styles.item}>
            <button className={styles.button} onClick={onLogin}>
              Google
            </button>
          </li>
          <li className={styles.item}>
            <button className={styles.button} onClick={onLogin}>
              Github
            </button>
          </li>
        </ul>
      </section>
      <Footer />
    </section>
  );
};

export default Login;

로그아웃 처리

로그아웃도 간단하다.

  logout() {
    firebase.auth().signOut();
  }