Firebase v9로 이메일 로그인, 회원가입 기능 구현하기

 

최근에 파이어베이스가 v9로 업데이트하면서 문법이 많~이 바뀌었다고 한다.

그래서 새로 업데이트된 버전으로 로그인, 회원가입 기능을 구현해보는 시간을 가졌다.

파일 트리

 

[과정 개요]

- cra 생성, npm i firebase 

- 파이어베이스 홈페이지에서 프로젝트 생성

- 콘솔에서 앱 등록

- firebase SDK 복붙

- src폴더에서 fBase.js생성

- app.js에서 fBase.js에서 생성한 authService 임포트 후 authService.currentUser 값을 useState를 이용해 isLogin에 할당

- env 파일 생성하여 환경변수 설정 후 fBase.js에서 process.env 붙여서 값 숨기기

 

- Router.js(HashRouter import), Auth.js, Main.js 생성 후 Router.js에서 Auth와 Main 라우터 설정(로그인 안한경우 전자, 한 경우 후자로 라우팅되도록)

- 파이어베이스 콘솔에서 이메일로 로그인 설정

- Auth.js에서 로그인 폼 추가

- input 값이 변경될 때마다 onchange 함수 호출

- createUserWithEmailAndPassword 함수를 이용하여 이메일과 패스워드를 입력하여 계정을 생성

- onAuthStateChanged(비동기 callback 함수) 사용자 로그인 상태의 변화를 관찰하는 메소드를 추가

(로그아웃, 계정 생성시에도 트리거가 되고 Firebase 초기화 될 때에도 실행하기 위해서)

 

 

 

 

initializseApp import후 firebaseConfig 설정

 

app을 콘솔에 찍어보면 

다음과 같이 잘 나오는 것을 확인할 수 있다.

 

 

전체 파일 코드

components>App.js

components>Router.js

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

const Auth = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [newAccount, setNewAccount] = useState(true);

    const onChange = (event) => {
        const inputData = {
            type: event.target.type,
            value: event.target.value
        }
        if (inputData.type === 'email') {
            setEmail(inputData.value);
        } else if (inputData.type === 'password') {
            setPassword(inputData.value);
        }
    }

    const onSubmit = (event) => {
        event.preventDefault();

        const auth = getAuth();
        // let user;
        try {
            if (newAccount) {
                createUserWithEmailAndPassword(auth, email, password).then((userCredential) => {
                    console.log(userCredential.user);
                })
            } else {
                signInWithEmailAndPassword(auth, email, password).then((userCredential) => {
                    console.log(userCredential.user);
                })
            }
        } catch (error) {

        }
    }


    return (
        <>
            <h2>로그인 페이지입니다.</h2>
            <form onSubmit={onSubmit}>
                <div>
                    <label>이메일 : </label>
                    <input type="email" required value={email} onChange={onChange}></input>
                </div>
                <div>
                    <label>비밀번호 : </label>
                    <input type="password" required value={password} onChange={onChange}></input>
                </div>
                <button type="submit">{newAccount ? '회원가입' : '로그인'}</button>
            </form>
        </>
    )
}


export default Auth;

routes>Auth.js

 

import React from "react";

const Main=()=> <h2>메인 페이지입니다 환영합니다~</h2>

export default Main;

routes>Main.js

 

src>fBase.js

 

 

**참고해야하는 사이트

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

로그인 - Google 계정

https://firebase.google.com/docs/auth/web/password-auth?hl=ko#web-version-9 

자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기  |  Firebase Documentation