[React] Firebase 회원가입 - Authentication

프론트엔드 구현으로만 회원가입, 로그인 기능을 구현하기 어렵다.

그러나 Firebase 의 Authentication 을 사용하여 손쉽게 회원 정보를 저장하고 관리할 수 있게 도와준다.

 

파이어베이스 세팅

파이어베이스를 리액트 프로젝트에 적용시키기 위해 세팅을 해야 한다.

 

프로젝트 만들기

아래 링크를 클릭하여 Firebase 에 들어가 회원가입과 로그인을 한다.

Firebase | Google’s Mobile and Web App Development Platform

그리고 프로젝트 추가 버튼을 클릭하여 원하는 이름의 프로젝트를 생성한다.

그러면 정상적으로 Firebase 프로젝트가 생성된다.

 

React 에 Firebase 적용

우리는 React 로 만드는 프로젝트이기 때문에, 프로젝트 개요에 들어가, </> 웹을 클릭해 준다.

 

원하는 이름으로 앱을 등록하고,

React 에 Firebase SDK 를 추가하기 위해 터미널 창에 Firebase 를 설치한다.

 

npm install firebase

 

React 프로젝트에서 Firebase 를 초기화하기 위해 src 폴더 안에 firebase.js 파일을 생성한다.

 

다음으로 아래에 있는 내용을 복사해서, firebase.js 파일에 붙여 넣는다.

그리고 초기화한 Firebase 를 프로젝트에서 사용할 수 있도록 코드 마지막 줄에 export default app; 을 추가한다.

 

그러면 이제 React 프로젝트에서 Firebase 를 사용할 수 있게 된다.

 

Authentication 적용

회원가입 기능을 구현하기 위해 Authentication(인증) 을 클릭하여, 시작하기 버튼을 누른다.

 

두 번째 탭인 Sign-in method 에 들어가면 다양한 로그인 수단을 볼 수 있다.

우리는 간단하게 이메일/비밀번호로 회원가입 기능을 구현할 거기 때문에 이메일/비밀번호 를 클릭하고, 사용 설정을 활성화한다.

 

그러면 이제 React 프로젝트에서 Firebase 를 사용해 이메일과 비밀번호로 회원가입/로그인 할 준비를 모두 마쳤다.

 

회원가입 하기

여기서 만든 회원가입 입력 폼에서 Firebase 를 사용해 회원가입 기능을 구현할 것이다.

그리고 기존 age 를 name 으로 수정하였다.

[React] React-Hook-Form 회원가입 입력 폼 유효성 검사

 

모듈 가져오기

React 에서 회원가입 기능 구현을 위해 아래 내용들을 추가해 준다.

 

Firebase의 Authentication 모듈에서

• 이메일과 비밀번호로 사용자를 생성하는 createUserWithEmailAndPassword
• 현재 Firebase 앱의 인증 객체를 가져오는 getAuth

Firebase 설정 파일인 firebase.js 의 app 을 가져온다.

import { createUserWithEmailAndPassword, getAuth } from 'firebase/auth';
import app from '../firebase';

 

인증 객체 가져오기

기능을 구현하기 위해 Firebase 앱을 통해 인증 객체를 가져와야 한다.

이 객체를 통해 Firebase Authentication 을 사용하여 사용자를 관리, 생성, 세부 정보 접근을 할 수 있다.

 

인증 객체를 가져오기 위해

Firebase Authentication 의 getAuth 함수를 사용하고, 인자로 초기화한 Firebase 설정 파일의 app 을 넣는다.

그리고 반환된 auth 를 사용하여 Firebase Authentication 의 다양한 기능을 사용할 수 있게 된다.

const auth = getAuth(app);

 

이메일/비밀번호 회원가입

함수가 비동기로 실행되게 만들고, 발생할 수 있는 오류를 처리하기 위해 try-catch 구문을 사용하였다.

 

입력받은 사용자의 이메일과 비밀번호를 createUserWithEmailAndPassword 함수를 사용해 유저를 생성한다.

이때 auth 도 같이 인자로 넣는 이유는 Firebase Authentication 과 연결되고 작동하도록 하는 데 필수적이기 때문이다.

const onSubmit = async (data) => {
  try {
    const createdUser = await createUserWithEmailAndPassword(
      auth,
      data.email,
      data.password,
    );
    console.log(createdUser);
  } catch (error) {
    console.error(error);
  }
};

 

폼을 제출하면 정상적으로 사용자가 저장이 되어 회원가입이 된다.

 

유저 상세 정보 추가

그러나 Firebase Authentication 만 사용하여 회원가입을 진행하면, 유저의 프로필이나 이름 등 상세 정보를 저장할 수 없다.

그래서 유저의 상세 정보를 저장하기 위해 Firebase 의 Realtime Database 에 저장을 할 수 있다.

 

Realtime Database 생성

유저 상세 정보 추가를 위해 Realtime Database 를 클릭하고, 데이터베이스 만들기를 클릭한다.

 

데이버베이스 위치는 한국에서 그나마 가까운 싱가포르를 선택하였고, 실제 서비스가 아니므로 테스트 모드를 선택하였다.

 

React 에 Realtime Database 적용

React 프로젝트에서 Realtime Database 를 적용하기 위해 firebase.js 에 databaseURL 을 추가해 준다.

databaseURL 은 사진에 있는 URL 이다.

 

기존 firebase.js 에 databaseURL 을 추가하고,

 

export const db = getDatabase(app); 코드를 추가해, app 객체에 연결된 Realtime Database 인스턴스를 반환한다.

그러면 반환된 db 를 사용하여 Realtime Database 인스턴스에 접근할 수 있게 해 준다.

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: '본인 apiKey',
  authDomain: '본인 authDomain',
  databaseURL:
    'https://본인 databaseURL',
  projectId: '본인 projectId',
  storageBucket: '본인 storageBucket',
  messagingSenderId: '본인 messagingSenderId',
  appId: '본인 appId',
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);
export default app;

 

모듈 가져오기

Firebase의 Authentication 모듈에서

• 사용자의 프로필 정보를 업데이트하는 함수 updateProfile

Firebase의 Database 모듈에서

• 데이터베이스의 특정 경로에 대한 참조를 생성하는 함수 ref
• 데이터베이스의 특정 위치에 데이터를 설정하는 함수 set

Realtime Database 인스턴스인 db 를 가져온다.

import {
  createUserWithEmailAndPassword,
  getAuth,
  updateProfile,
} from 'firebase/auth';
import { ref, set } from 'firebase/database';
import app, { db } from '../firebase';

 

 

이름, 이미지 저장

회원가입한 사용자의 이름과 이미지를 저장하기 위해 updateProfile 함수를 사용한다.

그래서 현재 회원가입한 유저의 displayName 과 photoURL 을 아래 내용으로 업데이트한다.

const onSubmit = async (data) => {
  try {
    ...
    await updateProfile(auth.currentUser, {
      displayName: data.name,
      photoURL:
        'https://cdn.pixabay.com/photo/2017/06/13/12/53/profile-2398782_1280.png',
    });
    console.log(auth.currentUser);
  } catch (error) {
    ...
  }
};

 

결과를 출력하면 displayName 과 photoURL 이 업데이트된 것을 볼 수 있다.

이 외에도 전화번호(phoneNumber) 를 변경할 수 있다.

 

이름, 이미지 Realtime Database 저장

객체에 저장하게 되면 언제 어디서든 사용자의 정보를 가져올 수 있다.

그러나 해당 정보도 데이터베이스에 저장해야 한다.

 

Realtime Database 인스턴스인 db 에 경로가 `users/${createdUser.user.uid}` 인 곳에

name 과 image 정보를 저장한다.

set(ref(db, `users/${createdUser.user.uid}`), {
  name: createdUser.user.displayName,
  image: createdUser.user.photoURL,
});

회원가입을 다시 실행하면 정상적으로 사용자의 이름과 이미지가 저장되는 것을 볼 수 있다.

 

 

---

 

이처럼 React 에서 Firebase 를 사용하여 이메일/비밀번호로 회원가입하고, 그 외의 정보인 이름, 이미지를 실시간 데이터베이스에 저장하는 것을 알아보았다.