- 계정을 생성하기 위해 Firebase Docs에서 createUserWithEmailAndPassword 로 들어가자.
계정과 관련된 여러 API들을 볼 수 있다.
- 계정 기능을 만들기 위해 Auth.js에서 새로운 state를 추가하자.
newAccount가 true일 때는 새로운 계정을 만들 것이고
false일 때는 log in 버튼을 활성화할 것이다.
import React, {useEffect, useState} from "react";
// for auth import
const Auth = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [newAccount, setNewAccount] = useState(true);
// Input Change 감지
const onChange = (event) => {
//console.log(event.target.name);
// 이벤트로부터 name을 받아서 email OR password set하기
const {target: {name, value}} = event;
if(name === "email") {
setEmail(value);
}
else if (name === "password") {
setPassword(value);
}
};
const onSubmit = (event) => {
// form 제출 값이 default인 것을 방지
event.preventDefault();
if(newAccount) {
// 계정 생성
}
else {
// 로그인
}
};
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" : "Log In"}
/>
</form>
<div>
<button>
Login with Google
</button>
</div>
</div>
);
};
export default Auth;
- 이제 onSubmit를 firebase의 auth API를 사용하여 계정생성과 로그인 기능을 넣을 것이다.
이때 onSubmit을 async로 바꿔주고 각 auth의 반환값을 data로 선언하여 로그에 찍어 볼 것이다.
(try catch로 에러 핸들링도 잊지 말자)
import { createUserWithEmailAndPassword,
signInWithEmailAndPassword,
getAuth
} from "firebase/auth";
import { authService } from "myFirebase";
import React, {useEffect, useState} from "react";
// for auth import
const Auth = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [newAccount, setNewAccount] = useState(true);
// Input Change 감지
const onChange = (event) => {
//console.log(event.target.name);
// 이벤트로부터 name을 받아서 email OR password set하기
const {target: {name, value}} = event;
if(name === "email") {
setEmail(value);
}
else if (name === "password") {
setPassword(value);
}
};
// async로 바꿔주기
const onSubmit = async (event) => {
// form 제출 값이 default인 것을 방지
event.preventDefault();
try {
let data;
const auth = getAuth();
if(newAccount) {
// 계정 생성
data = await createUserWithEmailAndPassword(
auth,
email,
password
);
}
else {
// 로그인
data = await signInWithEmailAndPassword(
auth,
email,
password
);
}
console.log(data);
}
catch(error) {
console.log(error);
}
};
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" : "Log In"}
/>
</form>
<div>
<button>
Login with Google
</button>
</div>
</div>
);
};
export default Auth;
- 이제 홈페이지에 들어가 계정을 생성하고
(아래 에러는 API가 바뀐것을 모르고 authService로 로그인 하려다뜬 것(1),
firebase 기본 password가 최소 6자리인 것을 모르고 계정 생성하다 뜬 것(2) 이다.)
- authentication에 들어가면 아래와 같이 계정이 생성된 것을 볼 수 있다.
(계정 생성 및 로그인 기능 구현의 간편함이 역시 firebase의 최대 장점이라 생각한다!)
- 마지막으로 persistence를 설정해 주어야 한다.
이는 사용자들을 어떻게 기억할 것인지 설정해 주는 것이다.
default는 local로 기억한다. 이후 sesstion으로 바꿔 볼 것이다.
- 개발자 콘솔에서 application 탭의 firebaseDB를 살펴보면
아래와 같이 유저의 데이터가 저장되어 있는데 local로 저장되어 있기 때문에
새로고침을 하거나, 사이트를 나가도 정보가 유지된다.
- ref) https://nomadcoders.co/nwitter/lectures/