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

 

이번 포스팅에서는 React프로젝트에서 Firebase를 통해 로그인을 구현하는 것을 다룬다. Firebase프로젝트를 만들기 전이라면 아래 링크를 통해 Firebase 프로젝트를 생성하고 글을 읽으면 될 것 같다 :)

 

firebase.google.com/?hl=ko

Firebase

---

React앱에 Firebase추가

먼저 React프로젝트에 Firebase SDK를 설치한다.



$ yarn add firebase

 

다음으로는 firebase앱을 초기화 해야하는데, 여러가지 방법이 있지만 여기서는 모듈 번들러를 통해 초기화할 것이다. Create-React-App프로젝트의 경우 src폴더에 fBase.js파일를 만들고 다음과 같이 작성한다. 

 

// 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,
    databaseURL: process.env.REACT_APP_DATABASE_URL,
    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 메뉴로 간 후, 아래와 같이 설정을 해주어야 한다.

 

 

이메일/비밀번호를 통해 기본적인 인증을 할 것이기 때문에 해당 메뉴를 사용하도록 하고, 소셜 로그인을 위해 Google또한 설정을 해주자.

 

 

이메일/비밀번호 로그인

설정을 완료했으면 다음으로는 App.js에서 로그인에 필요한 정보를 얻기위한 준비를 해보자.

 

// 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="Email" required value={email} onChange={onChange}/>
        <input name="password" type="password" placeholder="password" required value={password} onChange={onChange}/>
        <input type="submit" value="Login" />
      </form>
    </div>
  )
}

export default App;

 

먼저 이메일과 비밀번호를 통해 인증을 할 것이기 때문에 각각의 정보를 받는 input창을 만들어준다. 그리고 onChange에서 email과 password에 해당 정보를 저장한다. 이제 firebase의 auth를 이용해서 로그인을 구현해보자. 굉장히 쉽고 간단하게 할 수 있다. App.js를 다음과 같이 수정한다.

 

// 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);	// 새로운 유저인지 확인(초기값: 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) {
        // create account
        data = await authService.createUserWithEmailAndPassword(email, password);
      } else {
        // login
        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" : "Create Account"}</span>
    </div>
  )
}

export default App;

 

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

 

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

 

소셜 로그인

Firebase에서는 다양한 소셜 로그인 기능을 제공하는데, 우리는 그 중에 Google계정을 통한 로그인을 구현할 것이다. 그러면 App.js에서 Google로그인 버튼을 하나 만들어주자.

 

// App.js

const App = () => {
  ...
  
  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" : "Create Account"}</span>
      <button name="google" onClick={onGoogleClick}>구글 계정으로 로그인</button>
    </div>
  )
}
  

 

그리고 fBase에서 선언한 firebase객체인 firebaseInstance와 구글로 로그인 버튼을 클릭했을 때 처리를 위한 onGoogleClick함수를 작성한다.

 

// App.js

...

import { authService, firebaseInstance } from 'fBase';

const App = () => {
  ...
  
  const onGoogleClick = 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메서드를 이용하여 팝업 창을 통해 로그인 하도록 한다. 소셜 로그인은 위처럼 몇 줄 안되는 코드로 구현을 할 수 있다. 다른 소셜 로그인의 경우에도 똑같다. 예를 들어 페이스북의 경우 FacebookAuthProvider와 같이 제공업체의 이름만 달라지고 로직이 동일하다.

 

로그아웃

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

 

const onLogOutClick = () => {
  authService.signOut();
}