파이어베이스 실제 프로젝트 연결 예시

[ firebase 연동 코드 ]

import firbase from 'firebase'; 

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 firebaseApp = firebase.initializeApp(firebaseConfig); 
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth };
export default db;

 

기존 포스팅을 따라 파이어베이스 연동이 끝났다면

이제 실제로 활용해 볼 차례입니다.

 

아래는 넷플릭스 클론 프로젝트를 제작하면서 파이어베이스를 연동했던 로그인 관련 코드입니다.

Sign component

import React, { useRef } from 'react';
import { auth } from '../../service/firebase'; 	// 파이어베이스.js 파일에서 인증을 가져옵니다
import styles from './Sign.module.css';

function Sign() {
    const emailRef = useRef(null); 	// useRef를 사용해 입력값을 받아올 수 있어요 ! html을 아주 큰 손가락으로 가리키고 있다고 생각하면 쉽습니다. 
    const passwordRef = useRef(null);
    const register = (e) => {
        	// 등록 버튼을 누를때 마다 사용자의 이메일로 계정을 만들고 인증을 원해
        e.preventDefault();
        	// 인증 객체를 얻었으니 실제 사용자 이메일로 생성
        auth.createUserWithEmailAndPassword(
            emailRef.current.value, // 현재 값을 받아와 전달
            passwordRef.current.value,
        ).then((authUser) => {
            console.log(authUser); 	// 로그인 정보를 확인할 수 있습니다.
        }).catch(error => {
            alert(error.message);
        })
    };

    const signIn = (e) => {
        e.preventDefault();
    }
    return (
        <div className={styles.sign}>
            <h1>Sign In</h1>
            <form>
                <input ref={emailRef} type="email" placeholder="Enter email" />
                <input ref={passwordRef} type="password" placeholder="Enter password" />
                <button className={styles.button} type="submit" onClick={signIn}>Sign In</button>
                <h4>
                    <span className={styles.gray}>New to Netflix? </span>
                    <span className={styles.link} onClick={register}> Sign Up now</span></h4>
            </form>
        </div>
    )
}

export default Sign;

 

  파이어베이스 파일에서 작성한 연동 코드 하단에 export 해준 인증관련 auth 기능을 import 해오면, 이제 해당 컴포넌트에선 input 창에 작성한 로그인 정보를 받아와 파이어베이스로 전달해주는 과정을 통해 사용자의 이메일을 활용한 로그인이 가능합니다. 파이어베이스 로그인 기능은 이메일 계정을 활용하는 방법 외에도 구글, 깃허브 등 다양한 항목의 간편 로그인 기능도 제공해줍니다. 🍾

 

 

   파이어베이스에서 인증 연동 후 이메일 로그인 옵션을 사용 하면 백엔드 없이 이메일을 활용한 로그인 연동이 가능해 집니다. 콘솔에 authUser를 출력해보면 파이어베이스에서 얻어온 로그인 정보를 확인해 볼 수 있습니다.

 

사용자 로그인 정보 출력 콘솔 화면

 

  백엔드에서 전달해주는 것과 같이 로그인 실패 시 해당 에러 정보를 전달해주어 프론트에서 alert 처리를 통해 에러 메시지를 간편하게 알려 줄 수 있게 됩니다.

회원가입을 하지 않았거나 비밀번호가 틀린 유저가 로그인 시 출력되는 에러 메시지

 

Redux를 통해 App.js에서 또한 useEffect를 사용하여 사용자 로그인 확인할 수 있으며,

 

 

Redux는 간단히 우리가 앱의 어디에 위치해 있던 간에 사용자 권한이나 위치같은 변수에 액세스를 할 수 있도록 정보를 저장하는 '글로벌 저장소' 역할을 수행한다고 이해하면 좋습니다.

 

 

Posted by Ang