[Firebase] React에서 Firebase Auth를 사용한 로그인 구글 로그인 구현

이번 시간에는 React 프로젝트에서 Firebase 통한 로그인을 구현하는 법을 알아보겠습니다. 

Firebase

Firebase 로그인을 구현하기전 먼저 Firebase 프로젝트를 만들어준다.

왼쪽 상단 톱니바퀴를 누르면 프로젝트 설정이 뜹니다. 프로젝트 설정에 가셔서 스크롤 내리시면 SDK 설정 및 구성이라는 곳에 가면 Config키들이 있으니 apiKey에서부터 measurmentid 까지 복사하세요

---

1.React 앱에 Firebase 추가하기

  - 먼저 내가 생성한 프로젝트에 firebase 추가가 필요하다.

yarn add firebase

  다음으로 firebase앱을 한번 초기화 시켜야하는데, 여러 방법이 있지만 이 포스팅에서는 모듈 번들러를 이용해 초기화를 진행할      것이다. Creact-React-App 의 경우 fBase.js파일을 만들고 그안에 다음과 같이 작성한다.

 

// .env
  apiKey: "firebase에서 받은 apiKey",
  authDomain: "도메인",
  projectId: "프로젝트ID",
  storageBucket: "저장소 ID",
  messagingSenderId: "메세지 ID",
  appId: "앱 ID",
  measurementId: "ID"

.env파일 생성해서 그안에 api_key들을 저장해줍니다.

 

// fBase.js 
import * as firebase from 'firebase/app';
import 'firebase/auth';

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_MESSAGIN_ID,
    appID: process.env.REACT_APP_APP_ID,
};

firebase.initializeApp(firebaseConfig);

export const firebaseInstance = firebase;
export const authService = firebase.auth();

firebaseConfig  에 프로젝트 설정 값들을 넣어줍니다. 해당 값들은 프로젝트 콘솔에서 들어가면 확인할 수 있습니다. 그리고 해당 설정 값들을 통해 firebase앱을 초기화 해줍니다. 또한 firebase객체와 auth서비스를 좀 더 간편하게 사용하기 위해 위와 같이 선언 해줍니다. 그리고 콘솔에서 Authentication 메뉴로 가서, 아래와 같이 설정해줘야합니다.

구글 로그인 을 구현해줄 Method 들입니다.

 

이메일 / 비밀번호 로그인 

  설정이 완료 되었다면 다음에는 App.js에서 로그인에 대한 필요한 정보를 얻기위해 입력해줘야한 정보가 있습니다.

import React, {useState} from 'react'

const App = () =>  {
  const [email,setEmail] = useState('');
  const [password,setPassword] = useState('');

  const onChange = (event) => {
    const {target: {name, value}} = event;
    if (name === 'email') {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  }

  const onSubmit = (event) => {
    event.preventDefault();
  }

  return (
     <div>
       <form onSubmit={onSubmit}>
          <input name="email" type="email" placeholder="이메일 주소" required value={email} onChange={onChange} />
          <input name="password" type="password" plcaeholder="비밀번호" required value={password} onChange={onChange} />
          <input type="submit" value="로그인" />
       </form>
     </div>
  );
}

export default App;

먼저 이메일과 비밀번호를 통해서 인증을 할것이라 각각 정보를 받는 input 창을 만들어줍니다. 그리고 onChange에서 email과 pasword에 해당 정보를 저장해줍니다. 이제 firebase auth를 이용해서 로그인을 구현해 보겠습니다. 정말 쉽고 간단하게 할 수 있을 겁니다. App.js 를 다음과 같이 수정해줍니다.

import React, {useState} from 'react'
import { authService } from './fBase';

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [newAccount, setNewAccount] = useState(true);


  // 로그인시 이벤트
  const onChange = (event) => {
    const { target: {name, value}} = event;
    if (name === 'email') {
      setEmail(value)
    } else if (name === "password") {
      setPassword(value);
    }
  }

  const onSubmit = async(event) => {
    event.preventDefault();
    try {
      let data;
      if (newAccount) {
        /// 새로운 유저 생성
        data = await authService.createUserWithEmailAndPassword(email, password);
      } else {
        // 회원가입 한 유저가 로그인시 이벤트
        data = await authService.signInWithEmailAndPassword(email,password);
      }
      console.log(data);
    } catch(error) {
      console.log(error)
    }
  }
  
  const toggleAccount = () => setNewAccount((prev) => !prev);

 


 
  return (
     <> 
       <div>
         <form onSubmit={onSubmit}>
           <input name="email" type="email" placeholder="Email" required value={email} onChange={onChange} />
           <input name="password" type="password" placeholder="password" required value={password} onChange={onChange} />
            {/* 로그인 했다 ?? 하면 회원가입 유저와 기존 유저가 로그인할때를 구분해줌 */}
           <input type="submit" value={ newAccount ? "Create Account" : "Login" } />    
         </form>
         <span onClick={toggleAccount}>{newAccount ? "Login" : "Craete Account"}</span>
       </div>
     </>
  );
}

export default App;

 위와 같이 사용자가 이메일과 비밀번호를 입력하고 제출할 경우 ,firebase auth에서 제공하는 createUserWIthEmailAndPassword메서드를 통해 회원가입을 간단하게 할 수 있습니다. 동일하게 로그인은 signInWithEmailAndPassword메서드를 통해 작성하면 됩니다. 회원가입 혹은 로그인이 완료가 되면 data에 유저 정보가 담기게 되고 정보를 볼 수 있다. 유저 정보에는 해당 유저의 이메일, 이름, 프로필 사진 url등이 담겨있다. toggleAccount는 newAccount 값을 반전시켜 새로운 유저인지 확인하는 함수입니다.

 

참고로 현재 사용자를 가져오는 메서드인 onAuthStateChanged로 사용자가 있을 경우 true로 없을 경우 false로 리턴해줍니다.

 

소셜 로그인

Firebase에서는 다양한 소셜 로그인 기능을 제공하는데, 우리는 그중 Google 계정을 통한 로그인을 구현해볼 것입니다.

그러면 App.js에서 Google로그인 버튼을 하나 만들어줍시다.

 

// App.js

...

import { authService, firebaseInstance } from 'fbase';

const App = () => {
  ...
    
   const onGoggleClick = async(event) => {
     const {target: {name}} = event;
     let provider;
     if (name === 'google') {
       provider = new firebaseInstance.auth.GoogleAuthProvider();
     }
     const data = await authService.signInWithPopup(provider);
     console.log(data);
   }
   
   ...
  }

소셜 로그인은 로그인 창으로 리다이렉션을 하거나 팝업 창을 통해 구현 할 수 있습니다. 여기서는 signInWithPopup메서드를 이용하여 팝업 창을 통해 로그인을 하도록 한다. 소셜 로그인은 위처럼 몇줄 안되는 코드로 구현을 할 수있다. 다른 소셜 로그인의 경우 에도 똑같다. 예를 들어 페이스북의 경우 FackbookAuthProvider와 같이 제공업체 이름만 다르고 로직은 똑같다.

 

로그아웃

  로그아웃 또한 매우 간단하다. 아래와 같이 로그아웃 버튼을 만들고, SingOut을 호출해서 바로 로그아웃 할 수있다.

참고 사이트

[Firebase] React에서 Firebase auth로 로그인, 구글 로그인 구현하기

로그인시 들어오는 사용자 정보