[React] Firebase Authentication 을 이용한 로그인 / 회원가입

- 로그인과 회원가입 기능을 Firebase 에서 제공하는 Authentication 을 이용하여 구현해보았습니다. 앞선 포스트에서 Login.js 와 Join.js 내용에서 수정하였습니다. 관련 포스트는 아래 링크로 확인할 수 있습니다.

 

2022.11.11 - [React] - React & Firebase / Firestore 연동

React & Firebase / Firestore 연동

 

 

#1  Login.js (로그인 기능 구현)

 

- 로그인 기능을 먼저 구현해보겠습니다. Authentication을 이용하므로 관련해서 제공하는 signInWithEmailAndPassword()  메소드를 사용하여 쉽게 구현이 가능합니다.

 

const onClickLogin = async () => {
		try {
			console.log('Login button pressed');

			// 로그인 실행
			const result = await signInWithEmailAndPassword(
				auth,
				loginEmail,
				loginPw
			);
            
			console.log(result); // console 에 result 값을 출력
		} catch (error) { console.error(error) }
	};

 

 

#2  Join.js (회원가입 기능 구현)

 

- 회원가입 기능도 마찬가지로, createUserWithEmailAndPassword() 메소드를 사용하여 사용자가 입력한 정보로 계정을 생성해보았습니다.

 

 

1) 먼저 auth를 사용하기 위한 메소드를 import 합니다.

 

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

 

 

2) 위에서 import 한 getAuth() 를 통해 auth 변수를 지정해줍니다.

 

const auth = getAuth();

 

 

3) createUserWithEmailAndPassword() 에서 첫 번째 매개변수로 auth를 쓰고, 각각 회원가입할 이메일과 비밀번호를 매개변수로 넣어주면 됩니다.

 

const signup = async() => {
        try {
            console.log('Join button pressed');
            const result = await createUserWithEmailAndPassword(auth, joinEmail, joinPw);
            console.log(result);            
        } catch (error) { 
        	console.error(error); 
        }
    }

 

 

#3 Firestore Database 에 사용자 데이터 추가

 

- 회원가입을 할 때 사용자가 입력하는 정보들(ex: 이름, 생년월일 등)을 Firestore Database 에 넣어보았습니다.

 

 

1) 먼저, firebase_config.js 에서 파이어스토어 연동을 위해 아래와 같이 코드를 작성합니다.

 

// firebase_config.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import firebase from 'firebase/compat/app';

const firebaseConfig = {
	(생략)
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app); // 추가된 내용
export {firestore}; // 추가된 내용

 

 

2) Join.js 에서 아래의 내용을 추가하여, firebase_config.js 에서 export 한 { firestore } 을 import 합니다.

 

import {firestore} from "../components/firebase_config";

 

 

3) 또한, 다음을 추가하여 firestore database 에 데이터를 넣기 위해 사용할 함수를 import 합니다.

 

import {setDoc, doc} from 'firebase/firestore';

 

 

4) 위에서 import 한 setDoc 함수를 아래와 같이 사용하면 됩니다.

 

1. doc() 의 첫 번째 인자는 2) 에서 import 했던 firestore 변수이다.
2. 두 번째 인자로 Firestore database 에서 작성한 컬렉션 이름을 넣어준다.
3. 마지막 인자로는 Firestore database 에서 작성한 문서 이름을 넣어준다.

Firestore database 에 작성한 데이터베이스 구조이다.

 

// 사용자 이름과 이메일 db에 추가
setDoc(doc(firestore, "user", userName), {
	name: userName,
	email: joinEmail
});

 

 

이렇게 로그인 및 회원가입을 기능을 모두 구현해보았습니다. 이전 포스트에서 단순히 이메일과 비밀번호를 db에 넣어놓고, 로그인할 때 db에서 데이터 값을 가져와서 비교해보았는데, 파이어베이스에서 제공하는 Authentication 을 통해 보안성을 높이면서 좀 더 간편하게 작성할 수 있었습니다.