Firebase 로 소셜로그인 연동하기

Firebase 로 Google 과 Github 로그인을 연동해보자 Feat(React)

 

https://console.firebase.google.com/

로그인 - Google 계정

 

제일처음 필요한것은 firebase google console에 오셔서 project를 만들어야 합니다.

 

 

 

앱을 다 만드셨다면 Firebase 의 Authentication  기능을 활성화 해줘야 합니다.

Project Overview 로 오셔서 Authentication 을 눌러줍니다.

 

 

사용하고싶은 Provider 를 Disabled 에서 Enabled 로 활성화 해야합니다.

 

Google Auth 활성화

 

 

 

구글은 Project support email 에 본인 gmail을 입력해주시고 Enable 로 토글을 변경하신뒤 Save 해주시면됩니다.

 

Github Auth 활성화

 

깃허브 같은 경우는 제일 마지막 링크를 복사하신뒤 github 프로필에서 Developer settings 를 눌러주세요

 

 

 

 

OAuth Apps 에서 새로운 앱을 만들어주세요

 

 

 

 

 

 

이제 Auth 활성화는 끝낫습니다 리액트 연동으로 가볼게요

 

React 에서 Google Github 로그인 팝업창 띄우기

 

 

톱니바퀴를 누르신뒤 SDK 를 React App 에 추가해줄거에요

 

 

var firebaseconfig ~~~ frirebase.analytics(); 까지 복사해주신뒤

 

 

service 라는 폴더를 만들고 auth_serivce.js 와 firebase.js 를 만들어주세요

 

그리고 api key 와 같이 중요한 정보들은 github에 올라가면안되니깐 .env 파일로 따로 빼주겠습니다.

 

 

.env

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGEING_SENDER_ID=
REACT_APP_APP_ID=
REACT_APP_MEASUREMENT_ID=

 

뒤에 해당하는 키를 직접입력해주세요

 

 

AuthService Class 만들기

 

https://firebase.google.com/docs/auth/web/firebaseui

FirebaseUI로 손쉽게 웹 앱에 로그인 추가

공식문서에서 보면 알다싶이 auth 에 provider 이름을 넣어서 로그인 하는방식으로 사용하면 됩니다.

 

 

auth_service.js

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;

 

provider 이름을 받아서와 Google이면 구글 로그인을 Github면 github로그인을 하는 방식으로 Class를 만들었습니다.

Popup창을 만들어서 로그인하도록 할게요

그리고 Config가 적용된 Firebase App이 있어야 로그인을 할수 있겟죠 ?

 

firebase.js

import firebase from 'firebase';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGEING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
// firebase.analytics();

export default firebaseApp;

 

 

analytics 기능은 사용하지 않아서 주석처리 했습니다.

 

그리고 나서 components 폴더에 login.jsx 를 만들어서 로그인 버튼을 만들고 실제로 동작하는지 확인해보겠습니다.

 

 

./components/login/login.jsx

import React from 'react';
import Footer from '../footer/footer';
import Header from '../header/header';

const Login = ({ authService }) => {
  const onLogin = (event) => {
    authService.login(event.currentTarget.textContent);
  };
  return (
    <section>
      <Header />
      <section>
        <h2>Login</h2>
        <li>
          <button onClick={onLogin}>Google</button>
        </li>
        <li>
          <button onClick={onLogin}>Github</button>
        </li>
      </section>
      <Footer />
    </section>
  );
};

export default Login;

 

 

 

 

잘 적용 되었네요

 

개인적인 잡담

백엔드 개발자에서 리액트 개발자로 전향하게된지 2주 정도 된거같은데 프론트 엔드도 나름 재밌네요 ! ㅎㅎ

 

더 좋은정보들 자주 적도록 하겠습니다.