사용자 생성, 로그인 및 소셜 로그인을 처리하는 기능을 구현하기
이번 포스팅은 소셜네트워크 서비스를 개발하면서 기능 구현하고, 발생한 오류 코드에 대해 작성하여 기술하고 해결한 것에 대한 포스팅이다.
함수 설명
`Auth` 함수
`Auth`는 사용자의 이메일과 비밀번호를 사용하여 로그인 및 계정 생성을 관리하는 React 함수로 구현
- `useState`를 사용하여 상태 변수를 초기화하였고 사용자의 이메일, 비밀번호를 저장한다.
- `newAccount`: 사용자가 새로운 계정을 생성 중인지 또는 기존 계정으로 로그인 중인지 나타내었다.
- `onChange` 함수를 통해 email, password 상태를 event를 통하여 얻고, 필드의 입력 값이 변경될 때 호출되는 핸들러 함수로 구현하였다.
`onSubmit`함수
폼 제출 이벤트 처리 함수로 정의하였다. 사용자가 폼을 submit 하면 Firebase를 통해 사용자 계정를 생성하거나 로그인한다.
`try`를 통해 오류를 처리하고 발생한 오류 메시지를 `error` 상태에 저장한다.
대표적인 오류 예시로는
- 계정(아이디)이 이미 생성된 경우
- 계정의 비밀번호가 틀린 경우
- 비밀번호 형식이 틀린 경우
`toggleAccount` 함수
"Create Account" 및 "Sign In" 버튼을 변경하는 함수로, `newAccount` 상태를 변경하여 현재 계정 생성 중인지 또는 로그인 중인지 에 따라 변경한다.
`onSocialClick` 함수
소셜 로그인 버튼(구글, 깃허브)을 클릭했을 때 호출된다. `name` 속성을 기반으로 선택한 소셜 로그인 플랫폼를 설정하고 Firebase를 사용하여 해당 소셜 로그인 혹은 계정을 생성한다.
결론
사용자에게 이메일 및 비밀번호를 입력할 수 있는 폼을 표시한다.
"If you have an account? Sign In" 문구를 통해 클릭을 통해 "Create Account" 또는 "Sign In" 버튼을 스왑하여 계정 생성및 로그인 을 알맞게 선택한다.
그리고 Firebase에 접근하여 계정을 확인하여 로그인을 진행하고 로그인 오류 발생시 메시지도 출력한다.
구글 또는 깃허브 소셜 로그인 버튼을 표시하여 두가지 플랫폼으로 가입 혹은 로그인을 진행한다.
발생한 오류
//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;
