[React] firebase / 사용자 이메일 로그인 기능 구현해보기

 

프로젝트를 조금씩 하고있는데 백엔드없이 작업을 하려니

무언가 프로젝트가 미완성된 느낌을 받을 때가 있었다.

node로 서버구현을 해본적은 있지만 좀 더 간편하게 백엔드를 연결해서

사용할 수 있는 firebase를 사용해보기로 했다!

 

몇차례 알아보고 테스트를 해보니 생각보다 간단해서 놀랐다.

 

참고로 9버전이다.

 

 

1. firebase console에서 프로젝트를 생성

 

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

로그인 - Google 계정

 

테스트로 만들어 보는 것이기 때문에 test로 작성했다.

프로젝트 이름은 test로 했지만 중복된 네임이기 때문에 아래의 test-88e5b가 내가 사용할 고유코드가 된다.

애널리틱스 계정이름 또한 test로 만들고 위치는 대한민국으로 해준다.

 

 

2. firebase 앱 추가

프로젝트 생성을 하면 위와 같은 페이지로 연결되는데

웹에서 사용할 것이기 때문에 웹모양 버튼을 눌러준다.

 

앱 닉네임을 적고 앱 등록을 누르면 SDK를 추가하는 방법을 알려준다.

 

그리고 SDK를 복사해놓는다.

해당 코드는 페이지를 벗어나도 프로젝트 설정에서 확인할 수 있다.

 

3. 인증 추가

 

Authentication 섹션에서 로그인 방법을 추가해 주어야 한다.

 

 

일단 이메일, 비밀번호를 이용한 로그인과 구글 로그인을 해볼 것이다.

두 개를 각각 클릭하여 사용설정을 on으로 해준다.

 

 

firebase console에서의 설정은 이정도로 하고

이제 코드에서 구현해보자.

 

---

 

✅ 내 프로젝트에 firebase 추가하기

 

npm install firebase

firebase를 설치해준다.

 

[firebase.js]

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

const app = initializeApp(firebaseConfig);

firebase라는 파일을 만들어주고 안에 위와 같이 

아까 복사한 SDK를 넣어 주었다.

다른 곳에 업로드는 하진 않을 것이지만 일단 실전을 생각하여 React 환경변수를 사용하여 처리했다.

코드가 원래 좀 더 길지만 로그인 구현을 먼저 해보는 것이기 때문에 쓸데없는 것은 지웠다.

 

📄 이메일 / 비밀번호 가입

이게 왜 되지? 싶을 정도로 매우 간단하게 가능한 이메일, 비밀번호 가입을 해보자.

 

일단 내가 만든 컴포넌트 구성은 이러하다.

App

ㄴ Home

ㄴ Login

ㄴ Join

 

Route를 이용하여 /, /login, /join에 접근할 수 있게 만들었다.

 

[Join.js]

import React from "react";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const Join = (props) => {
  const onSubmit = async(event) => {
    event.preventDefault();
    const email = event.target.email.value;
    const password = event.target.password.value;
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log(user, "Login");
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode, "error code");
        console.log(errorMessage, "errorMessage");
      });
  };

  return (
    <div className="login">
      <h1>Join</h1>
      <form className="join-form" onSubmit={onSubmit}>
        <input name="email" type="email" plaseholder="email" required />
        <input
          name="password"
          type="password"
          plaseholder="password"
          required
        />
        <input type="submit" />
      </form>
    </div>
  );
};

export default Join;

회원가입을 할 수 있게 email과 password를 입력하는 form을 만들어 주었다.

 

공식문서에 적혀있는 (ver. 9) 내용을 토대로 코드를 그대로 복사해왔다.

 

테스트를 해보기 위해 코드가 지저분하지만 일단 완성이다.

양식을 작성하면 사용자가 입력한 이메일 주소와 비밀번호의 유효성을 검사한다고 했는데

어떻게 검사결과가 나오는지 테스트해보자.

 

비밀번호를 4자리만 입력해보았더니 아래와 같은 에러가 발생했다.

내부 로직을 살펴보니 다양한 에러 코드들이 존재 하니

참고하면 좋을 것 같다.

 

코드를 약간 수정하고 async await 코드로 변경하면 아래와 같다.

  const onSubmit = async (event) => {
    event.preventDefault();
    const email = event.target.email.value;
    const password = event.target.password.value;
    try {
      const auth = getAuth();
      const user = await createUserWithEmailAndPassword(auth, email, password);
      console.log(user, "Login");
    } catch (error) {
      console.log(error.code, "error code");
      console.log(error.message, "errorMessage");
    }
  };

 

정상적으로 회원가입을 하면 유저 정보도 받을 수 있으며

자동으로 로그인이 된다.

 

 

❗ Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]'

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at getApp (api.ts:192:1)
    at getAuth (index.ts:37:1)
    at onSubmit (Join.js:15:1)

** 이전 코드 그대로 작업 했는데도 불구하고 위와 같은 에러가 자꾸 발생했었는데

app.js에서 import "./firebase"; 로 내가 만들어놓은 firebase.js파일을 불러오면 해당 에러가 사라진다.

 

 

가입한 유저 확인

firebase console에서 사이드메뉴 build - Authentication- Users에서 확인할 수 있다.

 

회원가입관련 테스트는 위의 해당 페이지에서 계정을 삭제해 가면서 진행했다.

 

✅ 로그인 확인

현재 사용자가 로그인이 된 상태인지 확인하려면 아래의 코드를 활용하면 된다.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
  onAuthStateChanged(auth, (user) => {
    if (user) {
      const uid = user.uid; // 사용자의 고유 id
      setCurrentUser(uid);
      console.log(uid, "Member");
    } else {
      console.log("Nonmember");
    }
  });

 

현재 로그인이 되어있는 상태인지 확인이 가능하다.

 

유저의 경우는 최상위 컴포넌트에서 관리하는 것이 좋을 것 같아서

상위 컴포넌트에 context api를 이용하여 만들어보았다.

 

import React, { createContext, useEffect, useState } from "react";

import { getAuth, onAuthStateChanged } from "firebase/auth";

export const UserContext = createContext();

const UserStore = (props) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
      if (user) {
        const uid = user.uid;
        setCurrentUser(uid);
        console.log(uid, "Member");
      } else {
        console.log("Nonmember");
      }
    });
  }, [currentUser]);

  return (
    <UserContext.Provider value={{ currentUser }}>
      {props.children}
    </UserContext.Provider>
  );
};

export default UserStore;

편의상 데이터를 id만 넣어놓았는데 user의 정보를 넣어놓아도 될 것 같다.

 

 

✅ 로그아웃

import { getAuth, signOut} from "firebase/auth";

export const onLogout = async () => {
  try {
    const auth = getAuth();
    await signOut(auth);
  } catch (error) {
    console.log(error);
  }
};

로그아웃 또한 간단하게 구현이 가능하다.