email과 password로 회원가입 구현
createUserWithEmailAndPassword
import { getAuth,
createUserWithEmailAndPassword} from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});firebase 공식 홈페이지 그대로 가져온 코드이다.
그러니 복붙하고 적당히 수정하면 될 것 같다..!
https://firebase.google.com/docs/auth/web/password-auth
로그인하는 방법
signInWithEmailAndPassword
import { getAuth,
signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});마찬가지로 firebase 홈페이지에 똑같이 나와있다.
https://firebase.google.com/docs/auth/web/password-auth
직접 해보기 + hook 이용해서 state 관리
[Auth.js]
import { authService } from "fbase";
import React, { useState } from "react";
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
}
from "firebase/auth";
const Auth = ({}) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [newAccount, setNewAccount] = useState(false);
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();
let data;
if (newAccount) {
createUserWithEmailAndPassword(authService, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log(user); // user 정보 확인 가능
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
} else {
signInWithEmailAndPassword(authService, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log(user); // user정보 확인 가능
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
}
};
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>Continue with Google</button>
<button>Continue with Github</button>
</div>
</div>
);
};
export default Auth;로그인되지 않은 상태라면 보여줄 컴포넌트 파일이다.
이제 로그인 상태를 관리해주어야 한다.
유저의 로그인/로그아웃 여부 판별
onAuthStateChanged
.currentUser 으로는 firebase의 초기화 시점 지연 문제로 유저의 로그인, 로그아웃 여부를 판단하기 부적절하다. 따라서,onAuthStateChanged(()=>{})를 사용한다.
이는 유저의 상태가 변화했을 때를 감지하는 일종의 이벤트로써,
const [isLoggedIn,setIsLoggedIn] = useState(false);
useEffect(() => {
authService.onAuthStateChanged((user) => {
if (user) {
setIsloggedIn(true);
} else {
setIsloggedIn(false);
}
});
}, []);위와 같이 Auth State가 변화할 때, user가 true일땐 로그인 된 상태이므로 IsloggedIn에 true 값을, user가 false일땐 로그아웃된 상태이므로 IsloggedIn에 false 값을 넣어준다.
소셜로그인
signInWithPopup/GithubAuthProvider/GoogleAuthProvider
firebase에서 Authentication 설정을 구글, 깃허브로 해놓은 상태이다. 깃허브의 경우 따로 자신의 깃허브 계정 - settings - Developer settings 들어가서 앱을 만들어준 뒤 URL까지 firebase에서 복붙해서 설정해주어야한다.
- import
import { createUserWithEmailAndPassword, signInWithEmailAndPassword, GithubAuthProvider, GoogleAuthProvider, signInWithPopup, } from "firebase/auth";
- provider 생성 >
GoogleAuthProvider()/GithubAuthProvider()이용
const provider = new GoogleAuthProvider();
const provider_gh = new GithubAuthProvider();
// provider 생성- await
signInWithPopup(auth,provider);
const data = await signInWithPopup(authService,provider);[Auth.js]
import app, { authService } from "fbase";
import React, { useState } from "react";
import {
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
GithubAuthProvider,
GoogleAuthProvider,
signInWithPopup,
} from "firebase/auth";
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();
let data;
if (newAccount) {
createUserWithEmailAndPassword(authService, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log(user);
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorMessage);
setError(errorMessage);
// ..
});
} else {
signInWithEmailAndPassword(authService, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log(user);
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorMessage);
setError(errorMessage);
});
}
};
const toggleAccount = () => setNewAccount((prev) => !prev);
const onSocialClick = async (event) => {
const {
target: { name },
} = event;
let provider;
if (name === "google") {
provider = new GoogleAuthProvider();
} else if (name === "github") {
provider = new GithubAuthProvider();
}
const data = await signInWithPopup(authService, 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" : "Log In"} />
{error}
</form>
<span onClick={toggleAccount}>
{newAccount ? "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;가장 어려울 것 같았던 로그인/로그아웃 상태 관리에 성공했다-!
암냠냠