FIREBASE를 이용하여 로그인 구현하기

리액트에 firebase를 연결해서 로그인을 구현해보았다.

메인 컨셉은 firebase에서 제공하는 sdk를 나의 프로젝트와 연결한 후 함수를 이용하여 구현하는 것

 

차근차근 구현을 해보았다.

 

미리 해놓아야하는것 :

 - firebase홈페이지에 들어가서 프로젝트 추가 후 Authentication, Realtime Database 시작해놓기

 - console창의 Authentication의 Sign-in method에서 사용을 원하는 로그인방시의 실행을 on으로 변경해놓기

 - 프로젝트에 firebase를 add하기

 

 

 

1. firebase sdk를 내 앱에 복사-붙여넣기한다.

 - 보통 service폴더를 하나 만든 후 firebase.js라는 js폴더를 따로 빼서 관리하면 편리하다.

 - firebase 사이트 내 해당 프로젝트의 console - web(웹페이지 기준)으로 접속해서 sdk코드를 확인한다

 

위 스크립트를 복사하여 연결할 firebase.js폴더에 붙여넣기한다.

 

//firebase.js의 내부 모습

import firebase from 'firebase'; //firebase를 사용하기 위해 import 해준다.

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
}; //복사한 부분을 넣고 firebaseConfig에 사용해야 할 속성들을 남겨두고는 다 삭제, key값과 id값은 노출되지 않도록 env파일에 따로 보관하여 관리하였다

// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
//firebaseConfig를 initailizeApp로 실행해주는데 이부분을 export해서 사용하기 위해 변수에 담아준다

export default firebaseApp;
//firebaseApp으로 export해준다.

 

2. firebase를 프로젝트에 연결시켜주었으니 다음으로 login을 구현할 파일을 만들어준다.

 - service폴더 내부에 auth_service폴더를 만들어 관리하였다.

 - 사용하는 함수는 firebase 의 문서 내 빌드 -> 인증 -> 웹 으로 들어가서 확인할 수 있다.

 - 지금은 로그인을 팝업창으로 가능하게하기 까지만 구현하도록 한다.

 

import firebase from 'firebase'; 
import firebaseApp from './firebase'; //firebase.js에서 Initialize한 firebase함수를 사용하기 위해 firebaseApp을 import


//AuthService를 class로 지정하여 관리
class AuthService{
  login(providerName){
    const authProvider = new firebase.auth[`${providerName}AuthProvider`](); 
    //providerName에 들어가는 파라미터에 맞게 auth가 실행되기때문에 login 관련 컴포넌트에서 파라미터를 넘겨주어야 함.
    return firebaseApp.auth().signInWithPopup(authProvider);
    //popup으로 실행하는 함수를 return하기
  }
}

export default AuthService;

 

 

3. 앱이 시작되는 부분인 index.js에서 class 생성을 해준 후 app.js -> login_page.jsx까지 클래스를 prop으로 넘겨준다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.module.css';
import App from './App';
import AuthService from './service/auth_service';

const authService = new AuthService();

ReactDOM.render(
  <React.StrictMode>
    <App authService={authService} />
  </React.StrictMode>,
  document.getElementById('root')
);

 

4. login_page.jsx에서 onClick을 통해 함수가 실행될 수 있도록 코드를 작성한다.

import React from 'react';
import styled from './login_page.module.css'

const LoginPage = ({authService}) => {
  const onLogin = (event) => {
    authService
    .login(event.currentTarget.value) // login함수에 이벤트 대상의 value(Google, Github)값을 파라미터로 전달
  };
  return(
    <>
      <section className={styled.top_section}>
        <h1>NAMECARD WALLET</h1>
        <p>for your successful business</p>
      </section>
      <section>
        <div className={styled.login_buttons}>
          <button 
          className={styled.google_button}
          onClick={onLogin}
          value="Google">
            use your google account
          </button>
          <button 
          className={styled.github_button}
          onClick={onLogin}
          value="Github">
            use your github account
          </button>
        </div>
      </section>
    </>
  );
};

export default LoginPage;

 

 

 

여기까지 해주면 프로젝트가 firebase와 연동되면서

나의 google 또는 github 아이디를 이용해서 사용자 인증을 거친 후 로그인을 구현할 수 있다.