[firebase] 구글/깃허브 로그인/로그아웃 (+그냥 로그인/로그아웃)

그냥 이메일, 패스워드를 활용한 로그인/로그아웃이 있는가 하면 google, github, facebook 같은 소셜 로그인이 있다.

어드민 같은 경우에는 소셜 로그인을 할 필요는 없을 것 같다고 판단했고, 작업은 이메일과 패스워드로 Create Account를 해서 해당 Account가 firebas Authentication User에 남도록 하는 목표로 수정하였다. 그래도 소셜로그인 테스트도 진행해보았다.

 

최종코드 : github.com/jayounglee92/react-firebase

1. 선행작업

자세한 선행작업은 스킵하겠다.

• CRA로 프로젝트 생성 : https://ko.reactjs.org/docs/getting-started.html
• react-router-dom 설치 : https://reactrouter.com/web/guides/quick-start
• firebase 설치 : https://firebase.google.com/docs/reference/js
• src 외부에 jsconfig.json 파일 생성 후 아래 내용 입력 : import할 때 ".../../component" 이런 상대경로 작업을 절대경로로 바꾸기 위한 작업이다.

 jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

2. firebaseConfig 처리

src/fbase.js

src 안에 fbase.js라는 이름으로 파일을 만들었고 각각 기능별로 export 하여 다른 컴포넌트에서 사용할 수 있도록 할 예정이다.

• firebase/auth : https://firebase.google.com/docs/reference/js/firebase.auth/ : 로그인 모듈
• firebase/firestore : https://firebase.google.com/docs/reference/js/firebase.firestore : NoSQL 데이터베이스
• firebase/storage : https://firebase.google.com/docs/reference/js/firebase.storage : 이미지 저장 스토리지

import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";

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

firebase.initializeApp(firebaseConfig);

export const firebaseInstance = firebase; // 소셜로그인
export const authService = firebase.auth(); // 로그인 모듈
export const dbService = firebase.firestore(); // NoSQL 데이터베이스
export const storageService = firebase.storage(); // 이미지 저장 스토리지

.env

src/fbase.js에서 firebaseConfig 내 들어가 api 키나 보안상 필요한 내용들을 담을 파일로 src 외부에 파일을 만들어 아래와 같이 입력하고 이 파일을 gitignore에 추가한다.

해당 값들은 프로젝트 설정에서 볼 수 있다.

 

  REACT_APP_API_KEY={본인 api key 입력}
  REACT_APP_AUTH_DOMAIN={프로젝트명}.firebaseapp.com
  REACT_APP_DATABASE_URL=https://{프로젝트명}.firebaseio.com
  REACT_APP_PROJECT_ID={프로젝트명}
  REACT_APP_STORAGE_BUCKET={프로젝트명}.appspot.com
  REACT_APP_MESSAGIN_ID={본인거}
  REACT_APP_APP_ID={본인거}

3. 라우터

src/components/AppRouter

우선 라우터를 살펴보면 userObj 가 없으면 <Auth/>라는 컴포넌트가 나오고 userObj가 있다면 <Navigation/>컴포넌트가 나온다. 당연히 첫 페이지는 <Auth/>컴포넌트가 나올것이다.

- Navigation : gnb에 해당하는 컴포넌트

- Auth : 회원가입, 로그인, 로그아웃, 소셜 로그인 기능을 하는 컴포넌트

import React from "react";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Auth from "routes/Auth";
import Home from "routes/Home";
import Profile from "routes/Profile";
import Navigation from "components/Navigation";

const AppRouter = ({ refreshUser, userObj }) => {
  return (
    <Router>
      {userObj && <Navigation userObj={userObj} />}
      <Switch>
        {userObj ? (
          <>
            <Route exact path="/">
              <Home userObj={userObj} />
            </Route>
            <Route exact path="/profile">
              <Profile userObj={userObj} refreshUser={refreshUser} />
            </Route>
            <Redirect from="*" to="/" />
          </>
        ) : (
          <>
            <Route exact path="/">
              <Auth />
            </Route>
            <Redirect from="*" to="/" />
          </>
        )}
      </Switch>
    </Router>
  );
};

export default AppRouter;

4. 소셜 로그인

src/route/Auth

구글 로그인과 깃헙 로그인 버튼에 onClick 이벤트를 추가하고, 만들어논 fbase 를 활용해 로그인을 할 수 있다. 

funtion에 대한 자세한 도큐멘트 : firebase.google.com/docs/reference/android/com/google/firebase/auth/FirebaseAuth

import React from "react";
import { authService, firebaseInstance } from "fbase";
import AuthForm from "components/AuthForm";

const Auth = () => {
  const onSocialClick = async (event) => {
    const {
      target: { name },
    } = event;
    let provider;
    if (name === "google") {
      provider = new firebaseInstance.auth.GoogleAuthProvider();
    } else if (name === "github") {
      provider = new firebaseInstance.auth.GithubAuthProvider();
    }
    await authService.signInWithPopup(provider);
  };

  return (
    <div>
      <AuthForm />

      <div>
        <button onClick={onSocialClick} name="google">
          Continue with Google
        </button>
        <button onClick={onSocialClick} name="github">
          Continue with Github
        </button>
      </div>
    </div>
  );
};

export default Auth;

5. 그냥 로그인

src/components/AuthForm

Hooks 를 이용해 이메일과 패스워드, 에러 등을 셋팅하고 로그인과 회원가입은 같은 인풋들고 사용하고, 로그인할 건지 회원가입할 건지는 newAccount 로 상태를 정해준다.

Submit 하게 되면 authService로 유저가 생성되고 로그인되는 걸 확인할 수 있다.

 

import React, { useState } from "react";
import { authService } from "fbase";

const AuthForm = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = 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) => {
    // prevent refresh
    event.preventDefault();
    try {
      //let data;
      if (newAccount) {
        // create account
        await authService.createUserWithEmailAndPassword(email, password);
      } else {
        // log in
        await authService.signInWithEmailAndPassword(email, password);
      }
    } catch (error) {
      setError(error.message);
    }
  };

// 회원가입할건지 로그인할건지 선택하는 토글
  const toggleAccount = () => setNewAccount((prev) => !prev);

  return (
    <>
      <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 ? "Creaet Account" : "Log In"} />
        {error}
      </form>
      <span onClick={toggleAccount}>
        {newAccount ? "Sign In" : "Create Account"}
      </span>
    </>
  );
};

export default AuthForm;

6. 결과창

그냥 이메일을 가지고 회원가입 및 로그인을 해보자!

 

 

소셜 로그인을 해보자!

7. firebase Authentication 확인

소셜로그인을 한 경우에는 공급자가 구글모양으로 뜨고, 그냥 회원가입을 하게되면 제공업체에 우편모양의 썸네일이 뜬다. 여기서 모든 유저들을 관리할 수 있게 된다.

 

 

 

컴포넌트들이나 소스에 대한 자세한 내용은 깃헙코드에서 확인하시는 게 빠릅니다🤗