[React] FireBase를 활용한 Login 기능 구현

1. 사용자 생성, 로그인 및 소셜 로그인을 처리하는 기능을 구현하기

이번 포스팅은 소셜네트워크 서비스를 개발하면서 기능 구현하고, 발생한 오류 코드에 대해 작성하여 기술하고 해결한 것에 대한 포스팅이다.

---

 

2. 함수 설명

`Auth` 함수 

`Auth`는 사용자의 이메일과 비밀번호를 사용하여 로그인 및 계정 생성을 관리하는 React 함수로 구현

---

• `useState`를 사용하여 상태 변수를 초기화하였고 사용자의 이메일, 비밀번호를 저장한다.
• `newAccount`: 사용자가 새로운 계정을 생성 중인지 또는 기존 계정으로 로그인 중인지 나타내었다.
• `onChange` 함수를 통해 email, password 상태를 event를 통하여 얻고,  필드의 입력 값이 변경될 때 호출되는 핸들러 함수로 구현하였다.

---

`onSubmit`함수

폼 제출 이벤트 처리 함수로 정의하였다. 사용자가 폼을 submit 하면 Firebase를 통해 사용자 계정를 생성하거나 로그인한다.

 

`try`를 통해 오류를 처리하고 발생한 오류 메시지를 `error` 상태에 저장한다.

 

대표적인 오류 예시로는

• 계정(아이디)이 이미 생성된 경우
• 계정의 비밀번호가 틀린 경우
• 비밀번호 형식이 틀린 경우

---

`toggleAccount` 함수

"Create Account" 및 "Sign In" 버튼을 변경하는 함수로, `newAccount` 상태를 변경하여 현재 계정 생성 중인지 또는 로그인 중인지 에 따라 변경한다.

---

 

`onSocialClick` 함수

소셜 로그인 버튼(구글, 깃허브)을 클릭했을 때 호출된다. `name` 속성을 기반으로 선택한 소셜 로그인 플랫폼를 설정하고 Firebase를 사용하여 해당 소셜 로그인 혹은 계정을 생성한다.

---

3. 결론

사용자에게 이메일 및 비밀번호를 입력할 수 있는 폼을 표시한다.

 

"If you have an account? Sign In" 문구를 통해 클릭을 통해 "Create Account" 또는 "Sign In" 버튼을 스왑하여 계정 생성및 로그인 을 알맞게 선택한다.

 

그리고 Firebase에 접근하여 계정을 확인하여 로그인을 진행하고 로그인 오류 발생시 메시지도 출력한다.

 

구글 또는 깃허브 소셜 로그인 버튼을 표시하여 두가지 플랫폼으로 가입 혹은 로그인을 진행한다.

---

4. 발생한 오류 

 

 

      

      

      

    
    

      <javascript />
    
//Auth.js 사용자 계정 인증을 위한 code

import { authService, firebaseInstance } from "fbase";
import React, { useState } from "react";

const Auth =() => {
        const [email, setEmail] = useState("");
        const [password, setPassword] = useState("");
        const [newAccount, setNewAccount] =useState(true);
        const [error, setError]=useState("");
        const onChange = (event) => {
            const {target:{name,value}} = event;
            if(name === "email"){
                setEmail(value)
            } else if (name === "password"){
                setPassword(value);
            }
        };
        const onSubmit = async(event) => {
            event.preventDefault();
            try {
                let data;
                if(newAccount){
                    data = await authService.createUserWithEmailAndPassword(email,password);
                 } else{
                    data = await authService.signInWithEmailAndPassword(email,password);
                 }
                 console.log(data);
            } catch (error) {
                setError(error.message);
                
            }
         
        };
        const toggleAccount = () => setNewAccount((prev)=> !prev);
        const onSocialClick = async(event) => { 
            const{
                target:{name},
            } = event;
            let provider;
            if(name==="google"){
                provider = new firebaseInstance.auth.GoogleAuthProvider();
            }else if(name==="github"){
                provider = new firebaseInstance.auth.GithubAuthProvider();
            }
            const data = await authService.signInWithPopup(provider);
            console.log(data);
        };
    return(
        <div>
            <form onSubmit={onSubmit}>
                <input name="email" 
                    type="text" 
                    placeholder="Email" 
                    required 
                    value={email} 
                    onChange={onChange}/>
                <input name="password" 
                    type="password" 
                    placeholder="Password" 
                    required 
                    value={password} 
                    onChange={onChange}/>
                <input type="submit" value={newAccount ? "Create Account" : "Sign In"} />{error}
            </form>
            <span onClick={toggleAccount}>{newAccount ? "If you have a account? Sign In":"Create Account"}</span>
            <div>
                <button onClick={onSocialClick} name="google">Continue with Google</button>
                <button onClick={onSocialClick} name="github">Continue with Github</button>
            </div>
        </div>
    );
};
export default Auth;