[인프런] 6. 회원가입 hook 만들기

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 강의 - 대시보드 | 인프런 (inflearn.com)

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어 | 제

 

1. Firebase Authentication 설정 

 

- Firebase 콘솔로 이동 후 왼쪽 메뉴의 Authentication을 클릭 

 

- Sign-in method 설정을 클릭하면 유저가 어떤 경로로 로그인 할지 선택할 수 있다. 

- 이메일 / 비밀번호, 전화번호 등 다양한 방법으로 로그인을 할 수 있다. 

- 로그인 제공업체는 구글, 페이스북, 깃헙, 트위터 등 여러 곳이 있는 것을 볼 수 있다. 

 

- 기본으로 제공하는 이메일/비밀번호를 선택하도록 한다. 

- 사용설정을 ON으로 클릭한 후에 저장을 클릭한다. 

 

 

 

- 선택한 후 Authentication에서 제공하는 여러 기능을 이용하기 위해 config.js 파일에  관련 코드를 추가한다. 

 

config.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFireStore } from "firebase/firestore";

...

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const appAuth = getAuth();
const appFireStore = getFireStore(app);

//밖으로 사용할 수 있도록 준비
export { appFireStore, appAuth };

 

 

2. Authentication 기능 구현 

 

1) 회원가입 구현과 context 관리 

 

1. Signup 구현

 

- 다른 컴포넌트에서 재사용 가능하도록 회원가입을 도와줄 커스텀 훅(hook)을 하나 만들어 준다. 

 

- hooks 폴더를 src 폴더안에 생성하고 useSignup.js 파일을 생성한다. 

- 이 훅은 유저가 회원가입 양식을 작성하고 제출(submit)할 때 작동하도록 한다. 

 

src/hooks/useSignup.js

import { useState } from 'react'
import { appAuth } from '../firebase/config'
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'

export const useSignup = () => {

    // 에러 정보를 저장합니다.
    const [error, setError] = useState(null);
    // 현재 서버와 통신중인 상태를 저장합니다.
    const [isPending, setIsPending] = useState(false);

    // signup 훅을 만듭니다. email, password, displayName 세가지 매개변수를 갖습니다.
    const signup = (email, password, displayName) => {
        setError(null); // 아직 에러가 없으니 null 입니다.
        setIsPending(true); // 통신중이므로 true입니다.


        // 비밀번호 설정으로 유저 정보를 등록합니다. import 받아야합니다.
        createUserWithEmailAndPassword(appAuth, email, password)
            .then((userCredential) => {
                // Signed in
                const user = userCredential.user;
                console.log(user);
                // 회원 정보를 정상적으로 받지 못하면 실패입니다.
                if (!user) {
                    throw new Error('회원가입에 실패했습니다.');
                }

                // 회원가입이 완료되고 유저 정보에 닉네임을 업데이트합니다. import 받아야합니다.
                updateProfile(appAuth.currentUser, { displayName })
                    .then(() => {
                        setError(null);
                        setIsPending(false);
                    }).catch((err) => {
                        setError(err.message);
                        setIsPending(false)
                        console.log(err.message);
                    });
            })
            .catch((err) => {
                setError(err.message);
                setIsPending(false);
                console.log(err.message);
            });
    }

    return { error, isPending, signup }
}

 

자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기 (google.com)

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

 

 

2. Signup 훅 적용

 

- Signup.js로 이동해 useState를 작성했던 상단에 useSignin을 추가한다. 

- 그리고 signup 함수를 양식을 제출할 때 실행하도록 배치한다. 

 

src/pages/signup/Signup.js

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

// displayName은 파이어베이스에서 유저 정보에 저장 할 수 있는 속성중 하나입니다. 때문에 다른 변수명을 사용하지 말아주세요. ( 참고 : https://firebase.google.com/docs/reference/js/auth.md#updateprofile)
const [displayName, setDisplayName] = useState('');


// 우리가 직접 만든 useSignup 커스텀 훅을 이용합니다. useSignup 훅은 세 가지 프로퍼티를 가지는 객체를 반환합니다.
const { error, isPending, signup } = useSignup();

…


const handleSubmit = (event) => {
    event.preventDefault();
    // 훅에서 받아온 signup 함수를 실행합니다.
    signup(email, password, displayName);
}