[React] Firebase 인증하기 - 이메일 회원가입 편

이번 시간에는 Firebase를 이용하여 이메일 회원가입을 해보도록 하겠습니다.

리액트 설치하기

아래 참조 하셔서 링크접속 후 설치 하시면 됩니다.

https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

[REACT] 리액트 시작하기 - 설치하기 편

 

Firebase 접속하기

링크를 클릭하여 Firebase를 시작하도록 합니다.

 

https://firebase.google.com/?hl=ko 

Firebase

 

프로젝트 추가하기

프로젝트를 신규 생성하도록 하겠습니다.

 

웹앱 만들기

웹을 동작할 수 있도록 그림과 동일하게 순서대로 만들어 주도록 하겠습니다.

* 여기까지 Firebase WebSite 세팅 완료

 

 

React firebase 세팅하기

① React 설치되어 있는 폴더에 가서 firebase를 설치하시면 됩니다.

$ npm install firebase

② firebase-config.js 라는 파일을 생성 후 위 사진에 보이는 제품의 SDK 코드를 복사 후 붙여넣어 주시면 됩니다.

 - SDK 코드 확인 하는 방법은 아래 더보기를 누르시면 됩니다. 

SDK 코드를 전체 복사하시면 됩니다.

 

③ 제품의 SDK 코드가 복사 됐으면 회원가입을 연결하기 위해 두 가지 추가 코드를 작성해보도록 하겠습니다.

import { getAuth } from "firebase/auth"; // 코드 추가
export const auth = getAuth(app); // 코드 추가

④ 이메일 회원가입을 할 수 있도록 만들어 Input Box 를 만들어 보도록 하겠습니다.

⑤ app.js 파일에 코드를 넣도록 하겠습니다.

import React, { useState } from "react";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase-config";

const App = () => {
    const [registerEmail, setRegisterEmail] = useState("");
    const [registerPassword, setRegisterPassword] = useState("");

    const register = async () => {
        try {
            const user = await createUserWithEmailAndPassword(
                auth,
                registerEmail,
                registerPassword
            );
            console.log(user);
        } catch (error) {
            console.log(error.message);
        }
    };

    return (
        <div>
            <input
                placeholder="Email"
                onChange={(e) => {
                    setRegisterEmail(e.target.value);
                }}
            />
            <input
                placeholder="EmailPassword"
                onChange={(e) => {
                    setRegisterPassword(e.target.value);
                }}
            />
            <button onClick={register}>CreateUser</button>
        </div>
    );
};
export default App;

 

⑥ 코드 작성 후 실제로 이메일 주소, 비밀번호 CreateUser를 눌러 회원가입을 해보도록 하겠습니다.

⑦ Firebase WebSite 확인하기

 - 회원가입에 이메일 주소, 비밀번호가 정상적으로 Firebase에 입력이 되었습니다.

 

수고하셨습니다.

 

[React_리액트] Firebase 인증하기 - 이메일 로그인, 로그아웃 편