목표 - 파이어베이스로 회원가입 기능을 처리해보자! |
액션1 - onSubmit 함수에서 로그인과 회원가입 분기시키기
로그인, 회원가입을 위한 onSubmit 함수는 몇개가 필요??
로그인 1개 회원가입 1개 총2개 => but, 상태를 잘 활용하면 onSubmit 함수를 2개나 만들 필요 x
import { useState } from "react";
const Auth = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [newAccount, setNewAccount] = useState(true);
const onChange = (event) => {
const {
target: { name, value },
} = event;
if (name === "email") {
setEmail(value);
} else if (name === "password") {
setPassword(value);
}
};
const onSubmit = (event) => {
event.preventDefault();
if (newAccount) {
//create newAccount
} else {
//log in
}
};
return (
<div>
<form onSubmit={onSubmit}>
<input
name="email"
type="email"
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" : "Log In"} />
</form>
<div>
<button>Continue with Google</button>
<button>Continue with Github</button>
</div>
</div>
);
};
export default Auth;
newAccount 를 useState 함수로 정의, newAccount 의 true, false에 따라 onSubmit 함수에서
회원가입과 로그인을 할 수 있도록 코드를 분기,
이렇게 하면 깔끔하게 회원가입과 로그인 기능을 만들 수 있음
액션2 - 파이어베이스로 로그인과 회원가입 처리하기
파이어베이스에서 제공하는 인증 기능 중 "EmailAuthProvider"에 속한
"createUserWithEmailAndPassword" 함수와 "signInWithEmailAndPassword" 를 사용
이메일, 비밀번호를 통한 회원가입과 로그인을 처리
"createUserWithEmailAndPassword" -> 인자로 전달받은 이메일, 비밀번호를 파이어베이스의 데이터베이스에 저장
"signInWithEmailAndPassword" -> 인자로 전달받은 이메일, 비밀번호를 파이어베이스 데이터베이스에 전달하여 확인 후 로그인할 수 있게 해줌.
import { authService } from "fbase";
import { useState } from "react";
const Auth = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [newAccount, setNewAccount] = useState(true);
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
);
//create newAccount
} else {
data = await authService.signInWithEmailAndPassword(email, password);
//log in
}
console.log(data);
} catch (error) {
console.log(error);
}
};
return (
<div>
<form onSubmit={onSubmit}>
<input
name="email"
type="email"
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" : "Log In"} />
</form>
<div>
<button>Continue with Google</button>
<button>Continue with Github</button>
</div>
</div>
);
};
export default Auth;
**onSubmit 문에 추가된 async 문과 await 문**
authService에 들어있는 함수들은 서버로 값을 요청해서 결괏값을 수신받기 까지 시간이 걸림
로그인 또는 회원가입 인증이 처리 된 후에 트위터가 실행되어야 하므로 기다렸다 실행하라는 뜻의
async와 await 사용
**try catch문**
로그인 또는 회원가입의 실패, 성공을 처리하도록
성공 -> try문에 있는 console.log(data)로 로그인 또는 회원가입 완료 시 data에 어떤 값이 들어있는지 출력
실패 -> catch문에 있는 console.log(error)로 자바스크립트가 자동으로 보내준 오륫값을 출력
콘솔로그를 보면 잘 작동됨을 확인할 수 있음
만약 같은 아이디로 가입을 시도하면 "the email adress is already in use~~~" 가 뜨며 중복체크까지 해준다.
firebase Authentication에 들어가보면 회원가입 정보가 뜬다.
+)) 로그인을 지속지켜주는 setPersistence 알아보기
파이어베이스는 "setPersistence" 를 이용해 로그인 상태 지속을 3가지로 나눠 관리
local / session / none 옵션을 가지고 있음
1) local : 웹 브라우저를 종료해도 로그인 유지
2) session: 웹 브라우저 탭을 종료하면 로그아웃
3) none: 새로고침하면 로그아웃
기본값은 local
액션3 - 사용자 정보가 저장되어 있는 곳 살펴보기
local 옵션으로 저장한 사용자 로그인 정보는 브라우저 내에 있는 IndexedDB 라는 데이터베이스에 사용자 정보를 저장
'리액트 - 클론코딩' 카테고리의 다른 글
트위터 클론코딩 - 트위터에 소셜 로그인 추가하기 (0) | 2023.05.14 |
---|---|
트위터 클론코딩 - 로그인, 로그아웃하기 (0) | 2023.05.11 |
트위터 클론코딩 - 파이어베이스 로그인 설정하기 (0) | 2023.05.11 |
트위터 클론코딩 - 파이어베이스 로그인 준비하기 (1) | 2023.05.10 |
트위터 클론코딩 - 라우터 적용하기(isLoggedIn을 사용한 삼항연산자) (0) | 2023.05.10 |